jQuery表单验证分配提交按钮[重复]答案

【问题标题】：jQuery Form Validation Assign Submit Button [duplicate]jQuery表单验证分配提交按钮[重复]
【发布时间】：2020-07-18 19:25:33
【问题描述】：

所以，我有一个表单和 2 个按钮，1 个按钮仅用于验证电子邮件，而另一个按钮是表单提交按钮。我正在使用 jQuery 验证来验证表单。

我想要的是它应该只有SUBMIT按钮可以通过submitHandler提交表单并执行alert("success")，但是每当我点击VERIFY按钮时，它还通过submitHandler提交表单并执行alert("success")。

这是脚本：

index.html:

<form id="form_data">
    <div class="form-group">
        <label>Phone Number</label>
        <input id="phone_number" name="phone_number" required>
    </div>
    <div class="row">
        <div class="form-group col-9">
            <label>Email</label>
            <input id="email" name="email" required>
        </div>
        <div class="form-group col-3">
            <button id="btn_email">VERIFY</button>
        </div>
    </div>
    <div>
        <button id="form_data_submit" type="submit">SUBMIT</button>
    </div>
</form>

script.js

jQuery(document).ready(function () {
    var btnSubmitEl = $("#form_data_submit");
    var formEl = $("#form_data");

    formEl.validate({ // initialize jquery validation plugin
        rules: {
            phone_number: {
                required: true,
                number: true,
                minlength: 7,
                maxlength: 12
            },
            email: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
        },
        submitHandler: function (form) {
            alert("success")
            return false;
        }
    });
});

我错过了什么吗？

谢谢

【问题讨论】：

标签： javascript html jquery jquery-validate

【解决方案1】：

您应该在使用 HTML5 时为验证按钮显式设置 type=”button"。默认按钮行为提交表单。已经回复here

【讨论】：

一开始我以为这是jQuery验证库特有的问题。事实证明，在 HTML5 中，<button> 标签实际上是默认的“提交”按钮。哇，谢谢！

【解决方案2】：

您不需要 2 个按钮来验证表单，您可以仅使用一个按钮来验证表单并提交，如果出于某种原因您想使用 2 个按钮，则必须使用 2 个事件侦听器，一个用于验证按钮，一个用于对于提交按钮，以及验证按钮提交表单的原因是因为 formEl.validate 接受一个对象，在该对象内部有一个名为 submitHandler 的函数，它在验证后提交表单，因此您必须将其设置为返回假。我已经在下面的代码中实现了这一点

jQuery(document).ready(function () {
    var btnSubmitEl = $("#form_data_submit");
    var formEl = $("#form_data");
    var verifybtn=$("#btn_email");
    btnSubmitEl.on("click",()=>{
       formEl.submit()//
         alert("success")

    })
    verifybtn.on("click",()=>{
    formEl.validate({ // initialize jquery validation plugin
        rules: {
            phone_number: {
                required: true,
                number: true,
                minlength: 7,
                maxlength: 12
            },
            email: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
        },
        submitHandler: function () {
            return false;
        }
    });
});
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form_data">
    <div class="form-group">
        <label>Phone Number</label>
        <input id="phone_number" name="phone_number" required>
    </div>
    <div class="row">
        <div class="form-group col-9">
            <label>Email</label>
            <input id="email" name="email" required>
        </div>
        <div class="form-group col-3">
            <button id="btn_email">VERIFY</button>
        </div>
    </div>
    <div>
        <button id="form_data_submit" type="submit">SUBMIT</button>
    </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>

【讨论】：