jQuery + Gravity Forms:对错误的验证执行 jQuery

Posted

技术标签:

【中文标题】jQuery + Gravity Forms:对错误的验证执行 jQuery【英文标题】:jQuery + Gravity Forms: Perform jQuery on bad validation 【发布时间】:2012-12-14 16:53:22 【问题描述】:

我在当前的重力表单上使用了一些 jQuery。但是,当我提交表单并返回错误的验证时,我会丢失一些 jQuery 目标。

我很好奇如何将$(document).ready(function() 替换为一旦字段被错误验证重新加载后将调用我的 jQuery 的东西。

我已经尝试过$("#gform_submit_button_1").click(function() ,但是这还为时过早。它需要在新字段从 ajax 返回时发生。

【问题讨论】:

我为 GF 做了 2 个插件,但总是使用我自己的 javascript 文件。我知道他们的字段有一个我从未使用过的 AJAX 功能。请提供更多信息... 不确定要提供什么其他信息,@NomikOS .. 目前,我刚刚禁用了 ajax。 我已经安装了 GF,给我一个你的问题的例子,在这里重新创建它。可以肯定的是,我们可以找到解决方法... 启用 AJAX 后,即使验证错误,它也会在提交时重写所有 html。所以我在页面上使用 jQuery 来定位特定元素,然后当它用 AJAX 重写这些元素时,jQuery 基本上变得无用了。在 AJAX 之后加载新的 html 时,我需要代码来重新激活 jQuery。 您是否尝试过使用不同形式的事件委托?尝试 onlive,具体取决于您的 jQuery 版本,它们会随着元素添加到 DOM 中而更新。 【参考方案1】:

这里其实提供了一个钩子供使用:gform_post_render

每次呈现表单时都会触发此 jQuery 挂钩,以允许执行自定义 jQuery。这包括初始表单加载、转到多页表单的下一页/上一页、呈现验证错误的表单、显示确认消息等。

jQuery(document).bind('gform_post_render', function()

    // code to trigger on AJAX form render

);

http://www.gravityhelp.com/documentation/gravity-forms/extending-gravity-forms/hooks/javascript/gform_post_render/

【讨论】:

【参考方案2】:

由于某种原因,Gravity Forms 仍然没有为失败的表单验证添加 jQuery 挂钩。他们建议做的是检查div.validation_error 的存在。

jQuery(document).on('gform_post_render', function(e, form_id) 
    if ( jQuery('div.validation_error').length > 0 ) 
        console.log('Form validation error.');
    
);

当我检查验证错误元素时,您会注意到我没有指定父级:jQuery('div.validation_error')。如果页面上有多个表单,这会导致问题。返回的form_id 参数包含数据库中表单的 ID(例如 1、2、35 等),但我不确定此值是否与 HTML 中的表单 ID 匹配,例如<form id="gform_1">。如果确实匹配,那么最好指定父级,因此您可以这样做:

if ( jQuery('div.validation_error', '#gform_' + form_id).length > 0 ) 

也许其他人可以参与进来,让我们知道表单的 HTML ID 是否始终与表单的数据库 ID 匹配。

【讨论】:

Gravity Forms 似乎将验证错误类从 .validation_error 更新为 .gform_validation_error 。所以上面的示例代码应该是:jQuery(document).bind('gform_post_render', function(e, form_id) if ( jQuery('div. gform_validation_error').length > 0 ) console.log('Form validation error.'); );【参考方案3】:

重力表单确实提供了一个gform_confirmation_loaded 挂钩,但我认为这不适用于您的情况,因为它不是加载确认,而是加载错误状态表单。他们对此没有钩子,但我已经成功使用 jquery 委托事件。我使用.gform_wrapper 作为我的第一个选择器,然后定位我想要实际定位的字段。

有关更多信息,请参阅此文档:

http://api.jquery.com/on/#direct-and-delegated-events http://www.gravityhelp.com/documentation/gravity-forms/extending-gravity-forms/hooks/filters/gform_confirmation_loaded/

【讨论】:

【参考方案4】:

一种解决方案是:捕获提交事件并启动一个间隔来检查您的表单是否有更改,然后调用您的函数:

$('#your-form').submit(function()
    html = $('#your-form').html();
    iv = setInterval(function()
        If($('#your-form').html != html)
            yourfunc();
            clearInterval(iv);
        
    , 200);
);

function yourfunc()
    //your stuff   

然而,这不是很整洁,只有在 Ajax 调用后实际更改了 html 时才会起作用。

【讨论】:

以上是关于jQuery + Gravity Forms:对错误的验证执行 jQuery的主要内容,如果未能解决你的问题,请参考以下文章

使用 Gravity Forms & Gravity Wiz Nested Forms 从嵌套表单中动态提取值

php Gravity Wiz // Gravity Forms Styles Pro //强制验证消息

php Gravity Wiz // Gravity Forms //按表单名称获取表单ID

php Gravity Wiz // Gravity Forms //添加日期合并标记的格式选项

php Gravity Wiz // Gravity Forms Coupons //允许零金额优惠券

php Gravity Wiz // Gravity Forms //用户注册//通过电子邮件更新