JQuery验证+；重力形成冲突？

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

工作：

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

禁止工作：

• 通过单击带有空字段的submit按钮来触发客户端验证->触发验证->填充缺少的字段，然后再次单击submit按钮->严格来说什么也不发生

因此，我的理解是，一旦触发验证，即使稍后正确填写表单，也会阻止表单发送。有人说不需要提交者（），我也检查了其他帖子，但没有成功

然后我删除了提交者，但是表单仍然没有提交

-使用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;
    },

    });

};

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',
        }, 

    });

};

-没有提交者的代码：

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

    });

};

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>

联系方式
联系方式


名字*


电子邮件*


电话号码*


信息*

电话
此字段用于验证，应保持不变。

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

要清楚（即使之前已经很清楚）：验证正在工作，所以复制/粘贴我在JSFIDLE中给你的代码对我没有帮助（你的FIDLE也不会发送表单），显然它在工作，验证也在为我工作，我的问题是表单在验证之后没有发送，你已经完全删除了问题中的“重力表/字压”，因此你的答案不仅不完整，而且你在回答一个我没有问过的问题。除非您安装本地版本的wordpress，安装gravity表单，使用gravity创建相同的表单并进行测试，否则您将无法获得与我相同的结果。没有控制台错误，并且链接了jQuery和jQuery验证插件

那么现在，我为什么尝试使用提交处理程序呢？由于验证后的隐式“submit”不起作用，我希望显式方式（使用submit处理程序）能起作用。不幸的是，事实并非如此，我展示这两个版本的原因是为了避免人们回答：“尝试提交处理程序”

第一个问题是：是否有人对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();
    }
});

---

谢谢。

在您的情况下，您不需要

submitHandler

：它已经内置到插件中，并且您的逻辑是多余的。

submitHandler

仅在表单有效时触发，因此在表单中放入

.valid（）

没有任何意义，它可能会将某些内容抛出循环。

submitHandler

仅在您想要超越默认提交操作时才需要，例如在使用Ajax时。至于回答您的问题，您必须在这里做得更好。显示表单的相关HTML标记以及它所依赖的任何其他代码。我们需要看到足够的代码来制作一个演示。Sparky谢谢，我知道我不需要submitHandler，它清楚地写在我的帖子中，我知道为什么（是的，我链接到的帖子（）中清楚地解释了这一点，因此你是多余的）。如果你想复制/跳过我的整个html文档，你也许可以帮我。谢谢如果您已经知道了所有这些，那么就没有必要提及它或提供两个版本的代码了！我只是确认了一些事情，似乎你还很困惑。接下来，我将看看是否可以发现您的问题。您不需要

if（$（“.contact form”）.length）

，因为jQuery将自动忽略任何不存在的选择器；但你可能已经知道了。