【问题标题】:Use default browser messages when validating form with jquery使用 jquery 验证表单时使用默认浏览器消息
【发布时间】:2019-07-05 18:59:54
【问题描述】:

我正在尝试使用消息进行 jquery 表单验证,但我希望错误消息显示在浏览器的默认工具提示中,例如当您使用电子邮件类型或添加所需的输入时:

<input type="email" class="email" id='email' name='email' placeholder="EMAIL" required>

我不想安装第三方工具提示库,我只想使用默认浏览器的系统。

这是铬:

这是相同表单的 Safari:

这些消息不是由 jquery 创建的,而是由浏览器创建的。有没有办法可以将验证消息重定向到浏览器使用的系统?这是我的jQuery:

$(document).ready(function(){
    $('#login-form').validate({
        rules: {
            login_email: {
                required: true,
                minlength: 7
            },
            login_password: {
                required: true,
                minlength: 8
            }
        },
        messages: {
            login_email: {
                required: "Email is required to login",
                minlength: "Email must contain at least {0} characters"
            },
            login_password: {
                required: "A password is required to login",
                minlength: "Password must contain at least {0} characters"
            }

        }
    });
});

【问题讨论】:

  • 我在电子邮件元素中添加了 title='you need to do this',但它什么也没做。
  • 看看html5表单验证,特别是“自定义错误消息”部分developer.mozilla.org/en-US/docs/Learn/HTML/Forms/…
  • @freedomn-m 我在那个 jsfiddle 看到的只是一个输入。我从来没有在任何地方看到“做它”。
  • @freedomn-m mac osx mojave Chrome 最新版本。另一种是野生动物园。只有第 3 方是来自 code.jquery cdn 的 jquery。正确,它不会一直显示,只有在您为下一个字段输入时才会显示。我想在使用 jquery validate 提交时解雇他们。我现在要放弃这个了,我将使用 jquery 的默认值并使用 errorLabelContainer。
  • 感谢您的更新,我将删除我的 cmets,因为他们没有帮助 - 希望其他人会接受它。

标签: javascript jquery html jquery-validate


【解决方案1】:

我正在尝试使用消息进行 jquery 表单验证,但我希望错误消息显示在浏览器的默认工具提示中...

不可能

使用 jQuery Validate 插件时,浏览器的 HTML5 验证被禁用,原因很明显。

我不想安装第三方工具提示库,我只想使用默认浏览器的系统。

你不能

jQuery Validate 自动禁用 HTML5 验证。您可以通过自己的代码或插件使用带有或不带有弹出工具提示的 jQuery Validate,或者使用浏览器提供的 HTML5 验证。你不能两者都做。

【讨论】:

  • 最终这就是我发现的。我最终使用了 jquery Validate 并将错误消息放在我想要的位置。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-12-13
  • 1970-01-01
  • 1970-01-01
  • 2015-04-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多