在提交前验证表单的jQuery方法

Question

我有一个HTML表单。我正在使用jquery.validate.js验证我的表单，它可以在提交事件时工作。我希望在提交之前对此表单进行验证。

根据我的研究，我尝试过：

$('#my-form').on('before-submit',function(){
   alert('Before submit performed');
});

在触发提交事件之前，我想要验证表单。如何做到？

- Amit Kumar

---

插件已经完成了所有这些功能。请更好地解释一下发生了什么，让你觉得需要另一个事件。请提供您的验证代码以及重现问题所需的其他代码。 - Sparky

OP 表示他们想在提交之前验证表单，而验证插件只在提交时进行验证。 - ProfK

Answer 1

您可以模仿 jQuery 插件的默认行为，方法如下：

测试 form 是否有效；如果无效，则使用 preventDefault() 阻止默认操作。

$(document)
.on('click', 'form button[type=submit]', function(e) {
    var isValid = $(e.target).parents('form').isValid();
    if(!isValid) {
      e.preventDefault(); //prevent the default action
    }
});

编辑：如果您想要对验证测试进行微调，即有条件地验证某些控件，则此功能非常有用。

- roland

---

原帖作者表示他正在使用jQuery验证插件。该插件默认情况下已经自动处理了这个问题。 - Sparky

Answer 2

First validate and then use submit handler


 <script>
    $().ready(function() {
        $('#addNew').validate({
            rules: {
                patient_first_name: "required",
                patient_last_name: "required"
            },
            messages: {
                patient_first_name: "Please enter first name",
                patient_last_name: "Please enter last name"
    
            },
            submitHandler: function(form) {
                form.submit();
            }
    
            // any other options and/or rules
        });
    });
    </script>

- Farhat Aziz

---

它正在使用jQuery验证，不是吗？ - Ray Coder

是的，它正在使用Jquery验证。 - Farhat Aziz

Answer 3

这是我在jQuery提交之前处理验证的方法

<button onclick="$('#your_form').submit(
                     function(e){ e.target.reportValidity(); });
                ">

感谢这个帖子

- Nam G VU