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

Question

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

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

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

jQuery Validate 似乎决定将错误消息放入 DOM 中并阻止浏览器 native 消息，这是我不希望的。我不知道我是瞎了还是傻了(可能两者都是)，但我不知道如何阻止它这样做。

这就是我现在拥有的:

// 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 验证插件的同时进行 HTML 5 验证。

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

我想你可以利用 jQuery 删除 novalidate来自 <form> 的属性元素。请务必在调用 .validate() 后执行此操作。

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

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

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

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

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

<小时/>

引用OP:

"but all I want is the functionality of 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 seems determined to put error messages in the DOM though and block the browsers native messages, which I don't want."

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

<小时/>

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

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

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

<小时/>

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