2012-03-23 5 views
2

jQuery Validation Plugin 1.9.0でHTMLフォームの検証を行う状況があります。 (私はjQuery 1.6.4を使用しています)。 ページが読み込まれた後にフォームが正しく入力された場合、検証時に検証が行われます。検証では成功メッセージが返されますが、submitHandlerはトリガーされません。 送信ボタンをもう一度押すと、submitHandlerがトリガーされます。jQuery Validate submitHandlerがトリガーされる前に、なぜ2回提出する必要がありますか?

問題を説明するために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を押すと、検証はフォームに適用されていません。それが2回目です。

あなたはsubmitハンドラのvalidate外に呼び出しを移動する必要があります。

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/