如何将 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() 将无效域格式的电子邮件地址作为有效地址传递

如何安装 jQuery Validate 插件?

jquery validate插件如何允许为空?

Jquery validate校验如何根据校验结果的不同情况改变错误信息出现的位置

用jquery.validate() 如何控制提交?