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


jQuery + Gravity Forms: Perform jQuery on bad validation

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

我很好奇我怎么能交换出$(document).ready(function() {的东西,将调用我的jQuery一旦字段重新加载坏验证。

我试过$("#gform_submit_button_1").click(function() {然而,那太快了。它需要在新字段从ajax返回时发生。

实际上这里提供了一个钩子: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/

由于某些原因,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匹配。

重力表单确实提供了一个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/

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

$('#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时才会工作。