通过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验证。

该插件通过向form添加novalidate属性来动态禁用所有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中，并阻止浏览器的本机消息，这是我不想要的。”

是的，因为您已经安装了jQuery插件来处理验证，所以可以确定阻止浏览器的HTML 5错误消息。 如果您希望获得HTML 5验证消息，则不应使用jQuery Validation插件。 而且，如果您确实不希望进行DOM操作，则不应使用jQuery，因为这是其主要目的之一。 这大致类似于说您不想用电，但您仍然以某种方式希望您的电灯泡点亮。

---

如果您只是想使错误消息更具吸引力，那么我建议您将一个Tooltipster或qTip2之类的jQuery插件正确地与jQuery Validate插件集成在一起，而不是将HTML 5和jQuery进行一些复杂的有条件混搭。

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

如何在Tooltipster工具提示中显示来自jQuery Validate插件的消息？

---

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