如何将 jQuery Validate 与此 ajax 结合使用?
Posted
技术标签:
【中文标题】如何将 jQuery Validate 与此 ajax 结合使用?【英文标题】:How can I combine jQuery Validate with this ajax? 【发布时间】:2017-04-21 08:34:39 【问题描述】:我有一个 ajax 帖子可以很好地提交,但我需要在提交之前将它与 jQuery Validate 结合起来,但我无法让它工作。
我尝试在提交处理程序中提交 ajax,但这会导致表单中的某些字段消失,或者在某些情况下不更新我的数据库。
单独使用它就可以了:
$('#myform').submit(function(e)
e.preventDefault();
var url = 'http://example.com';
var data = $('#myform').serializeArray();
$.ajax(
type: "POST",
url: url,
data: data,
success: function()
$('.pop_up').fadeOut();
);
);
但以下代码不能 100% 工作(只是有时和某些部分)。有时它发布的电子邮件字段为空,有时其他字段很古怪。
var url = 'http://example.com';
var data = $('#myform').serializeArray();
$('#myform').validate(
rules:
emailaddress:
required: true,
email: true
,
meeting:
required:
depends: function ()
return $('input[name=in_12_months]').is(':checked')==false && $('input[name=in_6_months]').is(':checked')==false
,
submitHandler: function(form)
$.ajax(
type: "POST",
url: url,
data: data,
success: function()
$('.pop_up').fadeOut();
);
);
与 Submithandler 分离的验证有效,因此除非必填字段正常,否则不会发布。
那么,我如何将这些数据与 100% 可靠且发布良好的数据结合起来呢?
我的网页中有多个表单,我是否应该填写具体的表单而不是submitHandler: function(form)
?
【问题讨论】:
“我尝试在提交处理程序中提交 ajax,但这会导致表单中的某些字段消失,或者在某些情况下不更新我的数据库。” ~这毫无意义......submitHandler
是正确执行此操作的唯一方法,数百万人使用此插件没有此类问题。向我们展示一个更完整的演示,包括相关的 html。
“但是下面的代码不能 100% 工作(只是有时和某些部分)。有时它发布时电子邮件字段为空,有时其他字段很古怪。” 〜请解决您的问题,以便用足够的细节更好地解释一切。没有人知道“其他领域很古怪”是什么意思。
【参考方案1】:
您的代码...
var url = 'http://example.com';
var data = $('#myform').serializeArray();
$('#myform').validate(
.....
submitHandler: function(form)
$.ajax(
type: "POST",
url: url,
data: data, ....
您不能序列化submitHandler
之外的数据。它在这里不起作用,因为调用 .serialize()
时表单是空的。
将其放在submitHandler
中,同时利用回调函数的form
参数...
$('#myform').validate(
.....
submitHandler: function(form)
$.ajax(
type: "POST",
url: url,
data: $(form).serialize(),
....
您可能还想使用.serialize()
而不是.serializeArray()
。
阅读the .ajax()
documentation for data
:
要发送到服务器的数据。如果还不是字符串,则将其转换为查询字符串。它附加到 GET 请求的 url。请参阅 processData 选项以防止此自动处理。对象必须是键/值对。如果 value 是一个 Array,jQuery 会根据传统设置的 value 序列化多个具有相同 key 的值(如下所述)。
【讨论】:
美丽,闪亮!以上是关于如何将 jQuery Validate 与此 ajax 结合使用?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Parsley Validate 使用 jQuery Currency 格式验证输入字段? (也许是正则表达式?)
JQuery.validate() 将无效域格式的电子邮件地址作为有效地址传递