使用带有jQueryValidate插件的HTML5验证消息

Use HTML 5 validation messages with jQuery Validate plugin

本文关键字：HTML5 验证 消息 插件 jQueryValidate      更新时间：2023-09-26

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

我正在使用jQueryValidate，这看起来很好，但我想要的只是的功能

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

jQueryValidate似乎决心将错误消息放在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();
}

任何人都没有理由在使用jQuery validation插件的同时进行HTML5验证。

该插件通过向form添加novalidate属性来动态禁用所有HTML5验证，并且在不修改源代码的情况下无法对此执行任何操作。

我想您可以利用jQuery从<form>元素中删除novalidate属性。只需确保在呼叫.validate()之后执行此操作。

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

然而，插件将不会与错误消息有任何连接，HTML 5消息的行为将独立于插件

您还可以使用errorPlacement选项来超越默认的消息放置行为，这可以保持插件的可操作性，但会完全抑制错误消息。

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

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

报价OP：

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

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

报价OP：

"jQueryValidate似乎决心将错误消息放在DOM中，并阻止浏览器的本地消息，这是我不想要的。"

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

如果你只是想让错误消息更具吸引力，那么我建议使用像Tooltipster或qTip2这样的jQuery插件与jQuery Validate插件进行适当集成，而不是HTML 5和jQuery的复杂条件混合。

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

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

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

相关文章：