2012-03-23 67 views
2

我有一个使用jQuery Validation Plugin 1.9.0验证HTML表单的情况。 (我使用jQuery 1.6.4)。 如果在页面加载后表单填写正确,则在提交时进行验证。验证提供了成功消息,但不会触发submitHandler。 如果你再次按下提交按钮,它只会触发submitHandler。为什么在jQuery Validate submitHandler被触发前你必须提交两次?

我在http://jsfiddle.net/peterph/Hv3xz/1/上创建了一个模拟来说明问题。 谁能告诉我如何解决这个问题?

<form method="post" id="form"> 
    <input id="E_Mail" name="E_mail" title="E_mail" required="required" /><br /> 
    <input class="submit" type="submit" value="Send"/> 
</form> 

<script> 
    jQuery(function($) { 
     $("#form").submit(function(e) { 
      var $form = $(this); 
      alert('Start Validation'); 
      $form.validate({ 
       debug: false, 
       focusInvalid: false, 
       onfocusout: false, 
       onkeyup: false, 
       onclick: false, 
       rules: 
       { 
        E_mail: {required:true, email:true }, 
       }, 
       success: function(label) { 
        alert('succes:' + label); 
       }, 
       submitHandler: function(form){ 
        alert('start submitHandler'); 
        postContent('test'); 
        alert('end submitHandler'); 
       }, 
       invalidHandler: function(form, validator) { 
        alert('invalidHandler'); 
       }, 
      }).form(); 
      alert('end Validation'); 
      e.preventDefault(); 
     }); 
    }); 

    function postContent(postData){ 
     alert('postcontent: ' + postData); 
    } 
</script> 

回答

2

validate直到您提交表单才会被调用。第一次点击submit时,验证尚未应用到表单中。第二次它有。

您应该将呼叫转移到validatesubmit处理程序:

jQuery(function ($) { 
    $("#form").validate({ 
     debug: false, 
     focusInvalid: false, 
     onfocusout: false, 
     onkeyup: false, 
     onclick: false, 
     rules: 
     { 
      E_mail: {required:true, email:true }, 
     }, 
     success: function(label) { 
      alert('succes:' + label); 
     }, 
     submitHandler: function(form){ 
      alert('start submitHandler'); 
      postContent('test'); 
      alert('end submitHandler'); 
     }, 
     invalidHandler: function(form, validator) { 
      alert('invalidHandler'); 
     }, 
    }); 
}); 

,一切都应该正常工作。

更新了例:http://jsfiddle.net/8r47E/