jQuery validate with AJAX in submitHandler, submits on second click? -

i'm new ajax , used code answer here jquery ajax post example php integrate form on wordpress site. works fine, i'm having trouble integrating jquery validation

i tried placing javascript page above submithandler function below

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

my form validates on first click. if type input , submit nothing happens, have click second time form submit ajax. below jsfiddle. appreciated thanks.

a jsfiddle of code thought it'll log error console since form.php isn't linked

the job of submithandler submit form, not register form submit event handler.

the submithandler called when formm submit event triggered, in case instead of submitting form registering submit handler when form submit event triggered first time form not submitted. when fired second time first submit event processed validator handler registered fired triggers ajax request.

in submithandler have sent ajax request there no need register event handler

$("#add-form").validate({     submithandler: function (form) {         // setup local variables         var $form = $(form);         // let's select , cache fields         var $inputs = $form.find("input, select, button, textarea");         // serialize data in form         var serializeddata = $form.serialize();          // let's disable inputs duration of ajax request         $inputs.prop("disabled", true);          // fire off request /form.php          request = $.ajax({             url: "forms.php",             type: "post",             data: serializeddata         });          // callback handler called on success         request.done(function (response, textstatus, jqxhr) {             // log message console             console.log("hooray, 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> read important alert message.</div>');         });          // callback handler called on failure         request.fail(function (jqxhr, textstatus, errorthrown) {             // log error console             console.error(                 "the following error occured: " + textstatus, errorthrown);         });          // callback handler called regardless         // if request failed or succeeded         request.always(function () {             // reenable inputs             $inputs.prop("disabled", false);         });      } });