通过 jQuery Validate 插件使用 HTML 5 验证消息

Question

我有一个相对简单的表单，我需要有条件地提交，并在 HTML5 验证未通过时显示验证消息。

我正在使用 jQuery Validate，这看起来不错，但我想要的只是

if( $('#myForm').valid()) {...}

jQuery Validate 似乎决心将错误消息放入 DOM 并阻止浏览器的本机消息，这是我不想要的。我不知道我是瞎还是傻（可能两者兼而有之），但我不知道如何阻止它这样做。

这就是我现在拥有的：

// call validate to set the form up for validation
$(this).closest('form').validate();

if ($(this).closest('form').valid()) {
    // do some stuff
} else {
    // show error messages via the browser (need to pretend to click a button for this)
    $(this).closest('form').find(':submit').click();
}

Answer 1

没有任何人应该在使用 jQuery Validation 插件的同时进行 HTML 5 验证。

该插件通过将novalidate 属性添加到form 来动态禁用所有HTML 5 验证，如果不修改源代码，您将无能为力。

我想您可以利用 jQuery 从 <form> 元素中删除 novalidate 属性。请务必在致电.validate() 后执行此操作。

$('#myform').removeAttr('novalidate');

但是，插件与错误消息没有任何联系，HTML 5 消息的行为将独立于插件。

您还可以使用errorPlacement 选项来覆盖默认的消息放置行为，这样可以保持插件正常运行，但会完全抑制错误消息。

$('#myform').validate({
    errorPlacement: function() {
        return false;
    }
});

您无法克服的最后一个障碍是 jQuery Validate 插件，一旦初始化，就不能被禁用或打开/关闭。

---

引用OP：

“但我想要的只是if( $('#myForm').valid()) 的功能......”

如您所知，.valid() 方法是 jQuery Validate 插件的一部分。因此，如果不使用 jQuery Validate 插件，您将无法使用它。换句话说，您不能使用此方法来测试 HTML 5 验证。 AFAIK，没有可用的 JavaScript 方法来手动触发或测试带有 HTML 5 验证的表单。 HTML 5 验证简单地内置在浏览器中，并通过 HTML 5 属性进行控制……它非常简单，而且不是 JavaScript。通常，如果您需要比浏览器提供的更复杂的客户端控制，您会使用 JavaScript。因此，在这种情况下，您只需使用 jQuery Validate。无论你不喜欢它在做什么，你都需要使用 jQuery 技术来克服它，而不是 HTML 5。

引用OP：

“jQuery Validate 似乎决定将错误消息放入 DOM，并阻止浏览器的原生消息，这是我不想要的。”

是的，它决定阻止浏览器的 HTML 5 错误消息，因为您安装了一个 jQuery 插件来处理验证。如果您希望有 HTML 5 验证消息，那么您不应该使用 jQuery Validation 插件。如果你真的不想要 DOM 操作，那么你不应该使用 jQuery，因为这是它的主要目的之一。这大致类似于说你不想用电，但你仍然希望你的电灯泡亮起来。

---

如果您只是想让错误消息更具吸引力，那么我会建议使用 jQuery 插件，如 Tooltipster 或 qTip2 与 jQuery Validate 插件正确集成，而不是一些复杂的条件混搭HTML 5 和 jQuery。

演示：http://jsfiddle.net/2DUX2/3/

How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

---

请记住，与 HTML 5 验证相比，jQuery Validate 在更多浏览器版本中都能正常工作且更加一致，这完全取决于每个浏览器如何处理/设置其 HTML 5 验证消息的样式。