JQuery验证+重力形式冲突？

Question

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

工作：

• 在点击提交按钮之前填写所有字段然后点击提交按钮 - ＆gt;表格正在发送

没有工作：

• 点击带有空字段的提交按钮触发客户端验证 - ＆gt;验证被触发 - ＆gt;填写缺少的字段然后再次单击提交按钮 - ＆gt;严格来说没有任何反应。

所以我理解的是，一旦触发验证，如果表格在以后正确填写，它将阻止表格发送EVEN。有人说不需要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',
        }, 

    });

};

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

谢谢。

////编辑

我觉得这是因为所有s ***都添加到Gravity表单创建的提交按钮中：

<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]); }">

因为如果我通过控制台提交表单，那就可以了。

以下是Gravity Form生成的表单：

<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>

Answer 1

Sparky我会解释你为什么我展示了2个代码（使用提交处理程序而没有提交处理程序），但首先，请停止回答你还没有完全阅读的问题。

要明确（即使之前已经很清楚）：验证工作正常，所以复制/粘贴我在JSFiddle中给你的代码不会帮助我（你的小提琴不发送表格）或者，显然它正在工作，验证也对我有用，我的问题是表单在验证后没有发送，你已经完全删除了＆＃34; Gravity Form / Wordpress＆＃34 ;从这个问题来看，你的答案不仅不完整，而且你正在回答一个我无法提出的问题。除非你安装了wordpress的本地版本，安装重力表格，用重力创建相同的表格，并测试它，你将无法获得与我相同的结果。没有控制台错误和YES jQuery和jQuery验证插件是链接的。

现在，为什么我尝试使用提交处理程序？作为隐含的＆＃34;提交＆＃34;在验证不起作用之后，我期望显式方式（使用提交处理程序）可以工作。不幸的是，它并没有，我展示这两个版本的原因是为了避免让人回答：＆＃34;尝试使用提交处理程序＆＃34;。

第一个问题是：有人遇到与JQuery验证和重力形式和重力形式和重力形式相同的问题吗？

顺便说一下，我找到了一种解决方法，肮脏的解决方法，多余的解决方法，但它在我的案例中工作：

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();
    }
});

谢谢。