jQuery驗證程序如果未驗證，則調用成功

Question

我無法理解驗證程序在窗體中的字段爲空時顯示成功消息的原因。我被引導認爲$ .post不應該運行，直到所有的字段都被驗證。我在這裏錯過簡單的東西嗎？如果有人能指出我的錯誤，我將不勝感激。我正在使用的腳本是：http://jqueryvalidation.org/。由於

jQuery代碼

$(function() { 

    $.validator.setDefaults ({ 

     errorClass: 'form_error', 
     errorElement: 'div' 
    }); 

    $("#BA_boxform").validate({ 
     rules: { 
      BA_customer: { 
       required: true 
      }, 
      customerdept: { 
       required: true 
      }, 
      customeraddress: { 
       required: true 
      }, 
      BA_service: { 
       required: true 
      }, 
      BA_box: { 
       required: true 
      }, 
      BA_destdate: { 
       required: true 
      }, 
      BA_authorised: { 
       required: true 
      } 
     }, 
     messages: { 
      BA_customer: { 
       required: '<br />* required: You must select a customer' 
      }, 
      customerdept: { 
       required: "<br />* required: You must select a department" 
      }, 
      customeraddress: { 
       required: "<br />* required: You must select a customer address" 
      }, 
      BA_service: { 
       required: "<br />* required: You must select a service level" 
      }, 
      BA_box: { 
       required: "<br />* required: You must enter a box number for intake" 
      }, 
      BA_destdate: { 
       required: "<br />* required: You must enter a destruction date" 
      }, 
      BA_authorised: { 
       required: "<br />* required" 
      } 
     }, 

     submitHandler: function() { 
       if ($("#BA_boxform").valid() === true) { 
       var data = $("#BA_boxform").serialize(); 
       $.post('/domain/admin/requests/boxes/boxesadd.php', data, function() { 


       }, 'json'); 
     } else 
       { 
      return; 
       } 
     }, 
     success: function(msg) { 
       $("#BA_addbox").html("You have entered a box"); 
       //$("#BA_boxform").get(0).reset(); 
     } 

    }); 


}); 

Answer 1

爲每個成功驗證的輸入調用success函數，不僅在整個表單有效時調用。從文檔：

如果指定，將顯示錯誤標籤以顯示有效元素。如果給出一個字符串，它將作爲一個類添加到標籤中。如果給出了一個函數，它將使用標籤（作爲jQuery對象）和經過驗證的輸入（作爲DOM元素）進行調用。該標籤可用於添加「OK！」等文字。

直到所有字段驗證成功爲止，表單纔會被提交。如果您希望在表單完好時顯示消息，請在submitHandler函數中執行。

這是我的作品版本。 （FIDDLE）

我刪除了提交處理程序中的.valid()檢查;這是多餘的，因爲除非表單有效，否則不會調用提交處理程序。我在調用$.post()之前將消息「您輸入了一個框」，因爲小提琴不能發佈任何內容;這只是證明我們到了那裏。

$(function() { 

    $.validator.setDefaults({ 

     errorClass: 'form_error', 
     errorElement: 'div' 
    }); 

    $("#BA_boxform").validate({ 
     rules: { 
      BA_customer: { 
       required: true 
      }, 
      customerdept: { 
       required: true 
      }, 
      customeraddress: { 
       required: true 
      }, 
      BA_service: { 
       required: true 
      }, 
      BA_box: { 
       required: true 
      }, 
      BA_destdate: { 
       required: true 
      }, 
      BA_authorised: { 
       required: true 
      } 
     }, 
     messages: { 
      BA_customer: { 
       required: '<br />* required: You must select a customer' 
      }, 
      customerdept: { 
       required: "<br />* required: You must select a department" 
      }, 
      customeraddress: { 
       required: "<br />* required: You must select a customer address" 
      }, 
      BA_service: { 
       required: "<br />* required: You must select a service level" 
      }, 
      BA_box: { 
       required: "<br />* required: You must enter a box number for intake" 
      }, 
      BA_destdate: { 
       required: "<br />* required: You must enter a destruction date" 
      }, 
      BA_authorised: { 
       required: "<br />* required" 
      } 
     }, 

     submitHandler: function() { 
      $("#BA_addbox").html("You have entered a box"); 
      var data = $("#BA_boxform").serialize(); 
      $.post('/domain/admin/requests/boxes/boxesadd.php', data, function() { 

       $("#BA_addbox").html($("#BA_addbox").html() + "<br>You have entered a box"); 
      }, 'json'); 
     }, 
     success: function (msg) { 
      //$("#BA_addbox").html("You have entered a box"); 
      //$("#BA_boxform").get(0).reset(); 
     } 

    }); 


}); 

Answer 2

我認爲問題是，你應該通過形式作爲行參數：

submitHandler: function() { ... } 

也許它更改爲：

submitHandler:function(form) { ... } 

然後用參數代替id來組織你的數據