jQuery проверить с AJAX в submitHandler, отправляется на второй клик?

Question

Я новичок в AJAX и использовал код из этого SO ответ здесь jQuery Ajax POST example with PHP для интеграции с формой на сайте WordPress. Это прекрасно работает, но у меня возникают проблемы интеграции с JQuery проверки

Я попытался поместить JavaScript со страницы выше в функции submitHandler ниже

$("#my-form").validate({ 
    submitHandler: function(form) { 
    **js from other page** 
    } 
}); 

Моя форма проверяет на первый щелчок. Тогда, если я набираю вход и ничего не получаю, я должен нажать второй раз, чтобы форма была правильно отправлена ​​с помощью AJAX. Ниже приведен jsfiddle. Любая помощь приветствуется.

jsfiddle моего кода думал, что это будет журнал об ошибке в консоль, так как form.php не связан

Answer 1

Работа в submitHandler должен представить форму, не регистрировать отправки формы обработчик события.

Выдавать submitHandler, когда в вашем случае инициируется событие отправки формы, вместо того, чтобы отправлять форму, которую вы регистрировали обработчик отправки, поэтому, когда событие отправки формы запускается в первый раз, форма не отправляется. когда он запускается во второй раз, сначала событие отправки обрабатывается валидатором, а затем обработчик, который вы зарегистрировали, запускает запрос ajax.

В submitHandler вы просто должны отправить Аякса запрос нет необходимости регистрировать обработчик событий

$("#add-form").validate({ 
    submitHandler: function (form) { 
     // setup some local variables 
     var $form = $(form); 
     // let's select and cache all the fields 
     var $inputs = $form.find("input, select, button, textarea"); 
     // serialize the data in the form 
     var serializedData = $form.serialize(); 

     // let's disable the inputs for the duration of the ajax request 
     $inputs.prop("disabled", true); 

     // fire off the request to /form.php 

     request = $.ajax({ 
      url: "forms.php", 
      type: "post", 
      data: serializedData 
     }); 

     // callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR) { 
      // log a message to the console 
      console.log("Hooray, it worked!"); 
      alert("success awesome"); 
      $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>'); 
     }); 

     // callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown) { 
      // log the error to the console 
      console.error(
       "The following error occured: " + textStatus, errorThrown); 
     }); 

     // callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 
      // reenable the inputs 
      $inputs.prop("disabled", false); 
     }); 

    } 
}); 

Answer 2

Вызов $("#add-form").submit(function(){...}) не представляет форму. Он связывает обработчик, который говорит, что делать , когда пользователь отправляет форму. Вот почему вы должны отправить два раза: первый раз вызывает обработчик отправки плагина validate, который проверяет данные и запускает вашу функцию, а второй раз вызывает обработчик отправки, который вы добавили в первый раз.

Не заверните код внутри .submit(), просто сделайте это прямо в своей функции submitHandler:. Изменение:

var $form = $(this); 

к:

var $form = $(form); 

Вам не нужно event.PreventDefault(), то Validate плагин делает это для вас.

Answer 3

$("#add-form").validate({ 
    submitHandler: function (form) { 
     var request; 
     // bind to the submit event of our form 



     // let's select and cache all the fields 
     var $inputs = $(form).find("input, select, button, textarea"); 
     // serialize the data in the form 
     var serializedData = $(form).serialize(); 

     // let's disable the inputs for the duration of the ajax request 
     $inputs.prop("disabled", true); 

     // fire off the request to /form.php 

     request = $.ajax({ 
       url: "forms.php", 
       type: "post", 
       data: serializedData 
     }); 

     // callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR) { 
       // log a message to the console 
       console.log("Hooray, it worked!"); 
       alert("success awesome"); 
       $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>'); 
     }); 

     // callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown) { 
       // log the error to the console 
       console.error(
        "The following error occured: " + textStatus, errorThrown); 
     }); 

      // callback handler that will be called regardless 
      // if the request failed or succeeded 
     request.always(function() { 
       // reenable the inputs 
       $inputs.prop("disabled", false); 
     });    

    } 
});