Question

我正在使用jquery.validate.js来管理表单中的验证。在我的表格中，我有这一行：

<input type="email" name="email" id="email" value="" />

在这一行中，我有[type="email"]。因此，当我尝试在此字段中输入错误的电子邮件时，会显示默认验证消息（在弹出窗口中）。所有其他消息都以jquery.validate.js方式显示。

如何解决？我做错了什么？

Answer 1

您可以通过向表单标记添加“novalidate”属性来禁用新HTML5表单字段（包括type = email）的浏览器验证。

e.g

<form method="post" action="" novalidate>...</form>

Answer 2

将type=email更改为type=text。甚至连提交都没有被触发，因为浏览器因type=email要求而阻止它。

Answer 3

您的代码：

<input type="email" name="email" id="email" value="" />

它在我的桌面浏览器中工作：http://jsfiddle.net/WhH8a/。通过＆＃34;工作＆＃34;，我看到所有消息，包括＆＃34;电子邮件格式＆＃34;消息，正确来自验证插件。

jQuery Validate插件动态地将novalidate="novalidate"插入<form>元素，该元素应该禁用HTML 5表单验证。但是，也许有一些原因导致它无法在您的移动浏览器中运行。

由于Validate插件禁用HTML 5验证，并且您希望使用插件支持HTML 5验证，因此您也可以将其从标记中删除...

...将type="email"更改为type="text"。

如果您想使用email规则，请执行以下操作。

<强> HTML ：

<input type="text" name="email" id="email" value="" />

<强>的jQuery ：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // other options,
        rules: {
            email: {
                required: true,
                email: true
            },
            // other rules
        }
    });

});

工作演示：http://jsfiddle.net/TxN48/

或者，可以在class属性中内联指定这两个规则：

<强> HTML ：

<input type="text" name="email" id="email" class="required email" value="" />

<强>的jQuery ：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // other rules & options
    });

});

工作演示：http://jsfiddle.net/TxN48/1/

jQuery移动表单验证与默认消息混合

3 个答案: