Зачем вам отправлять два раза перед запуском jQuery Validate submitHandler?

Question

У меня есть ситуация, когда проверка формы HTML с помощью jQuery Validation Plugin 1.9.0. (Я использую jQuery 1.6.4). Если форма заполнена правильно после загрузки страницы, проверка выполняется при отправке. Валидация дает сообщение об успешном завершении, но это не вызывает submitHandler. Он только запускает 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> 

Answer 1

validate не вызывается, пока вы не отправите форму. В первый раз, когда вы нажмете submit, validate не был применен к форме. Второй раз.

Вы должны переместить вызов validate наружу из submit обработчика:

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/