jquery - 仅在没有验证错误时提交表单

Question

我目前正在对包含电子邮件的输入字段进行验证。单击提交时，如果电子邮件字段未验证，则显示错误覆盖。

我现在的问题是，无论是否验证，表单都提交。我如何使它仅在一切都验证后才提交（在我的示例中为电子邮件字段）

var clicked = $("button");

clicked.click(function() {
    var email = $("input[type='email']").val();
    if (!validateEmail(email)) {
        //Show validation error
    } else {
        //Dont show validation error
    }
});

在这里摆弄我的设置

Answer 1

将事件传递给 click 函数，preventDefault如果验证失败，则调用该事件。 preventDefault 将阻止事件的默认操作发生。

var clicked = $("button");

clicked.click(function(e) {
    var email = $("input[type='email']").val();
    if (!validateEmail(email)) {
        e.preventDefault();
    } else {
        //Dont show validation error
    }
});

工作示例：http: //jsfiddle.net/2FfQw/1/

Answer 2

有几种方法可以做到这一点。我最喜欢的是连接到表单提交事件，如果验证失败则返回 false：

$('#form-id').submit(function() {
  // do validation

  if (!valid)
    return false;

  // if it's valid it will submit, no need to return true
}

如果您想使用 ajax 进行提交，它也是一个很好的钩子。