jQuery在submitHandler中使用AJAXvalidation，在第二次点击时提交？

我是AJAX的新手，并使用此SO答案的代码，这里使用PHP的jQuery Ajax POST示例与 WordPress站点上的表单集成。 它工作正常，但我无法将其与jqueryvalidation集成

我尝试将上面的页面中的javascript放入下面的submitHandler函数中

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

我的表单在第一次点击时validation。 然后，如果我输入输入并提交没有任何反应，我必须再次单击表单以使用AJAX正确提交。 下面是一个jsfiddle。 任何帮助表示赞赏谢谢。

我的代码的一个jsfiddle认为它会将一个错误记录到控制台，因为form.php没有链接

Answer 1

submitHandler的工作是提交表单，而不是注册表单提交事件处理程序。

在触发formm submit事件时调用submitHandler，在您的情况下，而不是提交您正在注册提交处理程序的表单，以便在第一次触发表单提交事件时不提交表单。 当第二次触发它时，validation器首先处理提交事件，然后触发你注册的处理程序，触发ajax请求。

在submitHandler中，您只需发送ajax请求就不需要注册事件处理程序

 $("#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('
×Well done! You successfully read this important alert message.
'); }); // 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插件的提交处理程序，它validation数据并运行你的函数，第二次调用你第一次添加的提交处理程序。

不要将代码包装在.submit() ，只需在submitHandler:函数中直接执行即可。 更改：

 var $form = $(this); 

至：

 var $form = $(form); 

你不需要event.PreventDefault() ，validate插件也可以为你做这event.PreventDefault() 。

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('
×Well done! You successfully read this important alert message.
'); }); // 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); }); } });