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

Question

我有一个带有 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." });
    });
});

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

Answer 1

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

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