JQuery validate + Gravity 表单冲突？答案

【问题标题】：JQuery validate + Gravity form conflict?JQuery validate + Gravity 表单冲突？
【发布时间】：2017-11-01 07:02:29
【问题描述】：

由于 Gravity 表单没有客户端验证，我正在使用 JQuery Validate 插件。但是即使正确填写了表单也没有提交。

工作：

在点击提交按钮之前填写所有字段然后点击提交按钮->表单正在发送

没有工作：

通过单击带有空字段的提交按钮触发客户端验证 -> 触发验证 -> 填充缺失的字段然后再次单击提交按钮 -> 严格来说没有任何反应。

所以我的理解是，一旦触发了验证，即使稍后正确填写表单，它也会阻止表单发送。有人说不需要submitHandler（Gravity Form is not submitting after client side validations），我也查了其他帖子都没有成功。

然后我删除了 submitHandler，但表单仍然没有提交。

-带有 submitHandler 的代码：

if($(".contact-form").length){

    $(".contact-form").validate({
    rules: {
        input_5: {
            required: true,
        },
        input_2: {
            required: true,
            email: true
        },
        input_3: {
            required: true,
        },
        input_4: {
            required: true,
        },
    },
    messages: {
        input_5: 'Please enter your name',
        input_2: {
            required: 'Please enter your Email address',
            email: 'Please enter a valid Email address'
        },
        input_3: 'Please enter your Telephone Number',
        input_4: 'Please enter your Message',
    }, 
    submitHandler: function(form) {  
        if ($(form).valid())
           {
               form.submit(); 
           }
        return true;
    },

    });

};

-没有 submitHandler 的代码：

if($(".contact-form").length){

    $(".contact-form").validate({
        rules: {
            input_5: {
                required: true,
            },
            input_2: {
                required: true,
                email: true
            },
            input_3: {
                required: true,
            },
            input_4: {
                required: true,
            },
        },
        messages: {
            input_5: 'Please enter your name',
            input_2: {
                required: 'Please enter your Email address',
                email: 'Please enter a valid Email address'
            },
            input_3: 'Please enter your Telephone Number',
            input_4: 'Please enter your Message',
        }, 

    });

};

两个代码都阻止发送表单。

谢谢。

//// 编辑

我感觉是因为Gravity表单创建的提交按钮上加了s***：

<input type="submit" id="gform_submit_button_1" class="gform_button button" value="Send" tabindex="5" onclick="if(window[&quot;gf_submitting_1&quot;]){return false;}  window[&quot;gf_submitting_1&quot;]=true;  " onkeypress="if( event.keyCode == 13 ){ if(window[&quot;gf_submitting_1&quot;]){return false;} window[&quot;gf_submitting_1&quot;]=true;  jQuery(&quot;#gform_1&quot;).trigger(&quot;submit&quot;,[true]); }">

因为如果我通过控制台提交表单，它就可以工作。

这是重力形式生成的表格：

<div class="gf_browser_chrome gform_wrapper contact-form_wrapper container_wrapper" id="gform_wrapper_1">
    <form method="post" enctype="multipart/form-data" id="gform_1" class="contact-form container" action="/contact/" novalidate="novalidate">
        <div class="gform_heading">
            <h3 class="gform_title">Contact Form</h3>
            <span class="gform_description">Contact Form</span>
        </div>
        <div class="gform_body">
            <ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below">
                <li id="field_1_5" class="gfield form__single-input gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
                    <label class="gfield_label" for="input_1_5">Name<span class="gfield_required">*</span></label>
                    <div class="ginput_container ginput_container_text">
                        <input name="input_5" id="input_1_5" type="text" value="" class="medium" tabindex="1" placeholder="Name*" aria-required="true" aria-invalid="false">
                    </div>
                </li>
                <li id="field_1_2" class="gfield form__single-input gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
                    <label class="gfield_label" for="input_1_2">Email<span class="gfield_required">*</span></label>
                    <div class="ginput_container ginput_container_email">
                        <input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2" placeholder="Email*" aria-required="true" aria-invalid="false">
                    </div>
                </li>
                <li id="field_1_3" class="gfield form__single-input gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
                    <label class="gfield_label" for="input_1_3">Telephone Number<span class="gfield_required">*</span></label>
                    <div class="ginput_container ginput_container_text">
                        <input name="input_3" id="input_1_3" type="text" value="" class="medium" tabindex="3" placeholder="Telephone Number*" aria-required="true" aria-invalid="false">
                    </div>
                </li>
                <li id="field_1_4" class="gfield form__textarea gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
                    <label class="gfield_label" for="input_1_4">Message<span class="gfield_required">*</span></label>
                    <div class="ginput_container ginput_container_textarea"><textarea name="input_4" id="input_1_4" class="textarea medium" tabindex="4" placeholder="Message*" aria-required="true" aria-invalid="false" rows="10" cols="50"></textarea>
                    </div>
                </li>
                <li id="field_1_6" class="gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_"><label class="gfield_label" for="input_1_6">Phone</label>
                    <div class="ginput_container"><input name="input_6" id="input_1_6" type="text" value=""></div>
                    <div class="gfield_description">This field is for validation purposes and should be left unchanged.</div>
                </li>
            </ul>
        </div>
        <div class='gform_footer top_label'>

            <input type='submit' id='gform_submit_button_1' class='gform_button button' value='Send' tabindex='5' onclick='if(window["gf_submitting_1"]){return false;}  window["gf_submitting_1"]=true;  ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true;  jQuery("#gform_1").trigger("submit",[true]); }' /> 
            <input type='hidden' class='gform_hidden' name='is_submit_1' value='1' />
            <input type='hidden' class='gform_hidden' name='gform_submit' value='1' />

            <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' />
            <input type='hidden' class='gform_hidden' name='state_1' value='WyJbXSIsIjA3ZWZlNTFlNzIwYTFjNDVjNGEzMjExMmZjMTIxMDQ2Il0=' />
            <input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' />
            <input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' />
            <input type='hidden' name='gform_field_values' value='' />

        </div>
    </form>
</div>

【问题讨论】：

在你的情况下你不需要submitHandler：它已经内置在插件中，你的逻辑是多余的。 submitHandler 仅在表单有效时触发，因此将 .valid() 放入其中没有任何意义，并且可能会将某些内容放入循环中。 submitHandler 仅在您想要覆盖默认提交操作时才需要，例如在使用 Ajax 时。
就回答您的问题而言，您将不得不在这里做得更好。显示表单的相关 HTML 标记以及它所依赖的任何其他代码。我们需要看到足够多的代码来做一个演示。
Sparky 谢谢，我知道我不需要 submitHandler，它在我的帖子中清楚地写了，我知道为什么（是的，在我链接到的帖子中清楚地解释了（@987654322 @)，因此你是多余的）。要尝试复制/粘贴我的整个 html 文档，您也许可以帮助我。谢谢
如果您已经知道这一切，那么您甚至无需提及或提供您的代码的两个版本！我只是在确认一些看起来你还很困惑的事情。继续，我看看能不能发现你的问题。
你不需要if($(".contact-form").length)，因为jQuery会自动忽略任何不存在的选择器；但你可能已经知道了。

标签： jquery wordpress forms jquery-validate gravity-forms-plugin

【解决方案1】：

Sparky 我将向您解释为什么我展示了这 2 个代码（带有提交处理程序和没有提交处理程序），但首先，请停止回答您尚未完全阅读的问题。

要明确（即使之前已经很清楚）：验证正在工作，所以复制/粘贴我在 JSFiddle 中给你的代码对我没有帮助（你的小提琴也不发送表单），显然它正在工作，并且验证也对我有用，我遇到的问题是验证后表单没有发送，您已从问题中完全删除了“重力表单/Wordpress”，因此您的答案不仅不完整，但你正在回答一个我没有问过的问题。除非你安装本地版的wordpress，安装gravity form，用gravity创建同一个form，然后测试一下，是无法得到和我一样的结果的。 NO 控制台错误和 YES jQuery 和 jQuery 验证插件链接。

那么现在，为什么我尝试使用提交处理程序？由于验证后的隐式“提交”不起作用，我期待显式方式（使用提交处理程序）会起作用。不幸的是它没有，我展示这两个版本的原因是为了避免人们回答：“尝试使用提交处理程序”。

第一个问题是：有人对 JQuery validate AND Gravity Form AND Gravity Form AND Gravity form 有同样的问题吗？

顺便说一句，我找到了一种解决方法，肮脏的解决方法，冗余的解决方法，但它在我的情况下有效：

var $form = $(".contact-form");

$form.validate({
    rules: {
        input_5: {
            required: true,
        },
        input_2: {
            required: true,
            email: true
        },
        input_3: {
            required: true,
        },
        input_4: {
            required: true,
        },
    },
    messages: {
        input_5: 'Please enter your name',
        input_2: {
            required: 'Please enter your Email address',
            email: 'Please enter a valid Email address'
        },
        input_3: 'Please enter your Telephone Number',
        input_4: 'Please enter your Message',
    }, 
});


$form.on('click', function(){
    if($form.valid()){
        $form.submit();
    }
});

谢谢。

【讨论】：