Jquery 验证触发但不阻止表单提交

Posted 2023-05-09

【中文标题】Jquery 验证触发但不阻止表单提交

【英文标题】：Jquery validation triggers but doesn't prevent the form submitting

【发布时间】：2016-11-13 07:40:40

【问题描述】：

我有一个带有 Knockout 的 MVC 项目。

我正在尝试使用 jQuery 验证来验证我的注册视图。

这是注册视图：

<form data-bind="submit: register" id="formRegister">
    <label>Email</label>
    <input id="registerEmail" name="registerEmail" class="required email form-control" 
           type="text" data-bind="value: registerEmail" />

    <label>Password</label>
    <input id="registerPassword" name="registerPassword" class="required form-control" 
           type="password" data-bind="value: registerPassword" />

    <label>Confirm Password</label>
    <input id="registerPassword2" name="registerPassword2" class="required form-control" 
           type="password" data-bind="value: registerPassword2" />

    <button type="submit" class="btn btn-default">Register</button>
</form>

还有 jquery：

$(function () 
    $(document).ready(function () 
        $("#formRegister").validate();
        $.extend($.validator.messages,  required: "*", email: "Invalid email address." );
    );
);

当我提交表单时，会触发验证，但表单也在提交中。

【问题讨论】：

需要返回false来阻止正常的浏览器表单处理。尝试通过点击绑定捕获按钮提交，并返回 false

@brianlmerritt，谢谢，成功了！

【参考方案1】：

如果表单无效，您必须返回 false。

$(document).on("submit", "#formRegister", function(evt) 
      if(!$(evt.target).valid())  return false; 
 );