jQuery验证 重力形式冲突

Question

作为重力表单没有客户端验证，我正在使用jQuery validate插件。但是，即使表格已正确填写，表格也不会提交。

工作：

• 在单击提交按钮之前填写所有字段，然后单击"提交"按钮 ->表格发送

无工作：

• 通过单击带有空字段的提交按钮来触发客户端验证 ->触发验证 ->填充缺失字段，然后再次单击"提交"按钮 ->严格什么也没发生。

因此，我了解的是，即使以后正确填充表单，验证验证后也将阻止表格发送。有人说不需要subsithandler(在客户端验证后没有提交重力表格(，我还检查了其他帖子而没有成功。

我然后删除了subsithandler，但该表格仍未提交。

- 用subsithandler编码：

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

- 没有subsithandler的代码：

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 ***添加到由重力形式创建的提交按钮中：

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

Answer 1

Sparky我要解释您为什么显示了两个代码(使用提交处理程序，没有提交处理程序(，但首先，请停止回答您尚未完全阅读的问题。

要清楚(即使以前已经很清楚(：验证正在起作用，因此请复制/粘贴我在JSFiddle中给您的代码不会帮助我(您的小提琴也没有发送表格(，显然它正在工作，并且验证也对我有用，我遇到的问题是，该表格在验证后没有发送，您已经从问题中完全删除了"重力表格/wordpress"，因此您的答案不仅不完整，而且但是您正在回答我没有问的问题。除非您安装本地版本的WordPress，否则请安装重力表格，用重力创建相同的形式并进行测试，您将无法与我相同的结果。没有控制台错误，是的jQuery和jQuery Validate插件已链接。

现在，为什么我尝试使用提交处理程序？由于验证不起作用后隐含的"提交"，我期望明确的方法(使用提交处理程序(可以正常工作。不幸的是，这不是，我展示的两个版本的原因是避免回答："尝试使用提交处理程序"。

第一个问题是：某人是否有同样的问题，即略带验证，重力形式和重力形式和重力形式？

顺便说一句，我找到了解决方法，肮脏的解决方法，多余的解决方法，但在我的情况下它正在起作用：

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

谢谢。