我是AJAX的新手,并使用此SO答案中的代码
jQuery Ajax POST example with PHP来与wordpress网站上的表单集成.它工作正常,但我无法将其与jquery验证集成
我尝试将上面的页面中的javascript放入下面的submitHandler函数中
$("#my-form").validate({
submitHandler: function(form) {
**js from other page**
}
});
我的表单在第一次点击时验证.然后,如果我输入输入并提交没有任何反应,我必须再次单击表单以使用AJAX正确提交.下面是一个jsfiddle.任何帮助表示赞赏谢谢.
解决方法
submitHandler的工作是提交表单,而不是注册表单提交事件处理程序.
在触发formm submit事件时调用submitHandler,在您的情况下,而不是提交您正在注册提交处理程序的表单,以便在第一次触发表单提交事件时不提交表单.当第二次触发它时,验证器首先处理提交事件,然后触发你注册的处理程序,触发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('<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,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);
});
}
});
