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

Question

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

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

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

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

Answer 1

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

例如

<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/。通过“工作”，我看到所有消息，包括“电子邮件格式”消息，都正确来自验证插件。

jQuery Validate 插件动态地将 anovalidate="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/