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从novalidate元素中删除<form>属性。请在致电.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插件正确集成，而不是一些复杂的条件mash-up HTML 5和jQuery。

DEMO：http://jsfiddle.net/2DUX2/3/

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

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

使用带有jQuery Validate插件的HTML 5验证消息

1 个答案: