jQuery表單插件沒有提交時使用它與jQuery驗證插件

Question

我有一個簡單的表單，我用jQuery Validation plugin和jQuery Form plugin來處理表單。

該驗證工作沒有問題，但表單插件沒有提交。
它不會顯示控制檯的問題，甚至不會顯示腳本發送的任何ajax調用。

$("#creatUser").validate({ 
       rules: { 
        firstname: { 
         required: true 
        }, 
             lastname: { 
         required: true 
        }, 
        email: { 
         required: true, 
         email: true 
        }, 
        username: { 
         required: true 
        }, 
        password: { 
         required: true, 
         minlength: 5 
        }, 
             cpassword: { 
         required: true, 
         minlength: 5, 
         equalTo: '#password' 
        } 
       }, 

       invalidHandler: function(form, validator) { 
        var errors = validator.numberOfInvalids(); 
        if (errors) { 
         var message = errors == 1 
         ? 'You missed 1 field. It has been highlighted' 
         : 'You missed ' + errors + ' fields. They have been highlighted'; 
         $("#da-ex-val1-error").html(message).show(); 
        } else { 
         $("#da-ex-val1-error").hide(); 
        } 
       }, 
           submitHandler: function(form) { 
            var options = { 
              target: '#da-ex-val1-error', 
              success: function() { 
               alert('Thanks for your comment!'); 
              }, 
              url: 'php.php', 
              type: 'POST' 
             }; 

             // bind form using 'ajaxForm' 
             $('#creatUser').ajaxForm(options); 
          } 
      }); 

Answer 1

你似乎是用插件的初始化混淆功能操作。

出移動.ajaxForm()方法，這樣它的.validate()方法的兄弟...

$(document).ready(function() { 

    $("#creatUser").validate(...); // initialize jQuery Validate plugin 

    $('#creatUser').ajaxForm(...); // initialize Ajax Form plugin 

}); 

然後妥善中利用回調函數...

1）只放一個return false在submitHandler.validate()方法內的回調。

$("#creatUser").validate({ 
    // your other options, 
    submitHandler: function(form) { 
     return false; // block submit since another plugin is handling this 
    } 
}); 

2）.valid() is a method from the jQuery Validate plugin，您可以調用檢查形式的有效性，並得到一個布爾結果。

3）使用.valid()以及.ajaxForm()方法中的beforeSubmit回調函數。

$('#creatUser').ajaxForm({ 
    // your other options, 
    beforeSubmit: function() { 
     if $('#creatUser').valid() { // check validity using jQuery Validate 
      return true; // proceed if valid 
     } else { 
      return false; // stop if not valid 
     } 
    } 
}) 

參見：http://malsup.com/jquery/form/#validation