jQuery 表单验证分配提交按钮

Question

所以，我有一个表单和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;
        }
    });
});

我是不是遗漏了什么？

谢谢

Answer 1

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

Answer 2

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

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>

jQuery 表单验证分配提交按钮

jQuery Form Validation Assign Submit Button

javascript

html

jquery

jquery-validate