jQuery驗證停止表單提交

Question

我正在使用jQuery驗證表單，但是當表單被驗證時，它會重新加載或提交我要停止該操作的頁面。 我已經使用了event.preventDefault（），但它不起作用。

這是我的代碼：

$("#step1form").validate();
$("#step1form").on("submit", function(e){
    var isValid = $("#step1form").valid();

    if(isValid){
        e.preventDefault();
        // Things i would like to do after validation
        $(".first_step_form").fadeOut();
        if(counter == 3){
            $(".second_step_summary").fadeIn();
            $(".third_step_form").fadeIn();
            $(".third_inactive").fadeOut();
        }else if(counter < 3){
            $(".second_step_form").fadeIn();
            $(".third_inactive").fadeIn();
        }

        $(".first_step_summary").fadeIn();
        $(".second_inactive").fadeOut();
    }

    return false;
});

Answer 1

submitHandler是插件中內置的回調函數。

submitHandler （默認：本機表單提交）：

當表單有效時，回調處理實際提交。 獲取表單作為唯一參數。 替換默認提交。 在驗證后通過Ajax提交表單的正確位置。

由於submitHandler自動捕獲提交按鈕的單擊並僅在有效表單上觸發，因此您不需要另一個提交處理程序，也不需要使用valid()來測試表單。

您的代碼可以替換為：

$("#step1form").validate({
    submitHandler: function(form) {
        // Things I would like to do after validation
        $(".first_step_form").fadeOut();
        if(counter == 3){
            $(".second_step_summary").fadeIn();
            $(".third_step_form").fadeIn();
            $(".third_inactive").fadeOut();
        }else if(counter < 3){
            $(".second_step_form").fadeIn();
            $(".third_inactive").fadeIn();
        }
        $(".first_step_summary").fadeIn();
        $(".second_inactive").fadeOut();
        return false;  // block the default submit action
    }
});

Answer 2

我將這個基本結構用於我的所有JS驗證，它可以滿足您的要求

$('#form').on('submit', function() {
    // check validation
    if (some_value != "valid") {
        return false;
    }
});

你不需要e.preventDefault(); 並且return false; 聲明，他們做同樣的事情。

Answer 3

該插件為有效和無效的表單提交嘗試提供回調。 如果您提供submitHandler回調，則表單不會自動提交給服務器。

$("#step1form").validate({
   submitHandler : function()
   {
        // the form is valid 
        $(".first_step_form").fadeOut();
        if(counter == 3){
            $(".second_step_summary").fadeIn();
            // etc
        }
   }
});