jquery - 拦截点击提交按钮并检查表单jQuery的有效性

Question

我想在单击提交按钮时检查表单的有效性。如果它是有效的形式应该提交否则什么都不做。我尝试禁用提交按钮并单击检查有效性并启用它。但我发现这种方法有两个问题。1：在禁用按钮上未检测到点击 2：即使我设法检测到点击，我也可能最终陷入无限循环。启用按钮后的第二次单击将再次触发有效性检查，依此类推。

Answer 1

你应该使用event.preventDefault(). 阅读：http ://api.jquery.com/event.preventDefault/

粗略的示例代码草案：

$('your-submit-button').click(function(event){
    if (! validate() ) {
        event.preventDefault();
        showErrors();
    }
})

您的验证功能在哪里validate()，如果验证失败，则返回 false。

编辑：
示例处理程序绑定到click事件，因为你想要

在单击提交按钮时检查表单的有效性

更好的做法是使用.submit()而不是.click(), 对任何类型的表单提交进行验证。我们的样本几乎保持不变：

$('#your-form-id').submit(function(event){
    if (! validate() ) {
        event.preventDefault();
        showErrors();
    }
})