禁用HTML5表单元素的验证


Disable validation of HTML5 form elements

在我的表单中，我想使用新的HTML5表单类型，例如(有关这里类型的更多信息)。

问题是Chrome希望对我有所帮助，并为我验证这些元素，除了它很糟糕。 如果内置验证失败，除了获得焦点的元素之外，没有任何消息或指示。 我使用"http://"预填充网址元素，因此我自己的自定义验证只会将这些值视为空字符串，但Chrome会拒绝这些。 如果我可以更改其验证规则，那也可以。

我知道我可以恢复使用type="text"，但我希望使用这些新类型提供很好的增强功能(例如：它会自动切换到移动设备上的自定义键盘布局)：

> </p> <p> 那么，有没有办法关闭或自定义自动验证？ </p> <div class=

相关讨论

如果要在HTML5中禁用表单的客户端验证，请向表单元素添加novalidate属性。例如：

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

请参阅https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

相关讨论

我已经阅读了规范并在Chrome中进行了一些测试，如果你发现"无效"事件并返回false似乎允许表单提交。

我正在使用jquery，这个HTML。

1
2
3
4
5
6
7
8
9
// suppress"invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};
1
2
3
4
5
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

我没有在任何其他浏览器中测试过这个。

相关讨论

我只是想补充一点，在表单中使用novalidate属性只会阻止浏览器发送表单。浏览器仍会评估数据并添加：valid和：invalid伪类。

我发现了这一点，因为有效和无效的伪类是我一直使用的HTML5样板样式表的一部分。我刚刚删除了CSS文件中与伪类相关的条目。如果有人找到其他解决方案，请告诉我。

相关讨论

最好的解决方案是使用文本输入并添加属性inputmode ="url"以提供URL键盘功能。 HTML5规范被认为是出于此目的。如果你保持type ="url"你得到的语法验证在每种情况下都没用(最好检查它是否返回404错误而不是语法，这是非常宽容的，并没有很大的帮助)。

您还可以使用属性pattern ="https？：//。+"覆盖默认模式，例如更宽松。

将novalidate属性放入表单不是问题的正确答案，因为它删除了表单中所有字段的验证，您可能希望继续验证电子邮件字段。

使用jQuery禁用验证也是一个糟糕的解决方案，因为它绝对可以在没有JavaScript的情况下运行。

在我的例子中，我在URL输入之前放了一个带有2个选项(http：//或https：//)的select元素，因为我只需要网站(而且没有ftp：//或其他东西)。这样我就避免输入这个奇怪的前缀(Tim Berners-Lee最大的遗憾，也许是URL语法错误的主要来源)，我使用带有占位符(没有HTTP)的inputmode ="url"的简单文本输入。我使用jQuery和服务器端脚本来验证网站的真实存在(没有404)，并在插入时删除HTTP前缀(我避免使用模式如pattern ="^((？http)。)* $"防止添加前缀，因为我觉得更宽松更好

您可以将http://作为占位符文本放入，而不是尝试结束浏览器的验证。这是您链接的页面：

Placeholder Text

The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.

You’ve probably seen placeholder text before. For example, Mozilla Firefox 3.5 now includes placeholder text in the location bar that reads"Search Bookmarks and History":

enter image description here

When you click on (or tab to) the location bar, the placeholder text disappears:

enter image description here

Ironically, Firefox 3.5 does not support adding placeholder text to your own web forms. C’est la vie.

Placeholder Support

1
2
IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

Here’s how you can include placeholder text in your own web forms:

1
2
3
4
<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

Browsers that don’t support the placeholder attribute will simply ignore it. No harm, no foul. See whether your browser supports placeholder text.

它不会完全相同，因为它不会为用户提供"起点"，但它至少在那里。

相关讨论

我找到了一个带有CSS的Chrome解决方案，这个选择器没有绕过可能非常有用的本机验证表单。

1
2
3
4
5
form input::-webkit-validation-bubble-message,
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
}

通过这种方式，您还可以自定义您的消息...

我在这个页面上得到了解决方案：
http://trac.webkit.org/wiki/Styling%20Form%20Controls

相关讨论

只需在表单中使用novalidate即可。

1
<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

干杯！！！

这是我用来防止chrome和opera显示无效输入对话框的功能，即使使用novalidate也是如此。

1
2
3
4
5
6
7
8
9
10
window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

您可以安装简单的Chrome扩展程序，只需动态禁用验证即可
https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

默认情况下，一切都将作为默认设置使用，但您只需单击工具栏上的扩展图标即可禁用html5验证

相关讨论