JQuery check using AJAX in submitHandler, sent on second click?

Question

I am new to AJAX and used the code from this SO here jQuery AJAX POST example with PHP to integrate with a form on a WordPress site. It works fine, but I am having problems integrating it with jquery validation

I tried putting javascript from the page above into the submitHandler function below

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

My form is checked on first click. Then, if I type in the input and receive nothing, I have to click a second time so that the form is submitted correctly using AJAX. Below is jsfiddle. Any help is appreciated.

A jsfiddle of my code thought it would log an error for the console since form.php is not connected

Answer 1

SubmitHandler's job is to submit the form, not register the form submit event handler.

SendHandler is called when the formm submit event is fired in your case, and not in the form that you registered with the submit handler, so when the form submit event is fired for the first time, the form is not submitted. when it is run a second time, the dispatch event is first processed by the validator, and then the handler that you registered fires an ajax request.

In submitHandler you just need to send an ajax request, there is no need to register an event handler

 $("#add-form").validate({ submitHandler: function (form) { // setup some local variables var $form = $(form); // let 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 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

Calling $("#add-form").submit(function(){...}) does not submit the form. It binds a handler that says what to do when the user submits the form. This is why you should send two times: the first time it calls the send handler of the validate plugin, which checks the data and runs your function, and the second time it calls the send handler that you added the first time.

Do not complete the code inside .submit() , just execute it directly in your submitHandler: function. Change:

 var $form = $(this); 

in

 var $form = $(form); 

You do not need event.PreventDefault() , the validate plugin does this for you event.PreventDefault() .

Answer 3

 $("#add-form").validate({ submitHandler: function (form) { var request; // bind to the submit event of our form // let 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 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); }); } });