禁用HTML5表单元素的验证禁用HTML5表单元素的验证(Disable validation of

在我的形式，我想使用新的HTML5形式类型，例如<input type="url" /> 更多关于这里的类型信息 ）。

问题是，Chrome的希望成为超级有益的和验证这些元素对我来说，除了它吮吸它。 如果失败了内置的验证，没有比元素获取焦点其它消息，或者指示。 我预先填入网址元素与"http://" ，所以我自己的自定义验证只是把这些值作为空字符串，但Chrome浏览器会拒绝。 如果我可以改变它的验证规则，将工作过。

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

那么， 有没有一种方法来关闭或定制自动验证？

Answer 1:

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

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

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

Answer 2:

我有规格的读取和Chrome浏览器做了一些测试，如果赶上“无效”事件并返回false，这似乎让表单提交。

我使用jquery，这个HTML。

 // suppress "invalid" events on URL inputs $('input[type="url"]').bind('invalid', function() { alert('invalid'); return false; }); document.forms[0].onsubmit = function () { alert('form submitted'); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="url" value="http://" /> <button type="submit">Submit</button> </form> 

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

Answer 3:

我只是想补充一点，在你的形式使用novalidate属性只会阻止浏览器发送的形式。 该浏览器仍然评估数据，并增加了：有效，：无效的伪类。

我发现了这一点，因为有效和无效的伪类是我一直在使用HTML5样板样式表的一部分。 我只是删除了相关的伪类在CSS文件中的条目。 如果有人发现了另一种解决方案，请让我知道。

Answer 4:

不要试图做围绕浏览器的验证运行结束了，你可以把http://作为占位符文本。 这是你链接的页面非常：

占位符文本

第一个改进HTML5带给Web表单是设置能力占位符文本输入字段中 。 只要该字段为空，而不是集中占位符的文本显示在输入栏里面。 只要你点击（或选项卡）输入字段，占位符文本消失。

你可能见过占位符文本。 例如，Mozilla Firefox浏览器3.5现在包括在地址栏中写着“搜索书签和历史记录”占位符文本：

当你点击（或选项卡）地址栏，占位符文本消失：

讽刺的是，火狐3.5不支持添加占位符文本到自己的网页形式。 这就是生活。

占位符支持

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

这里是你如何在你自己的网页表单占位符文本：

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

不支持浏览器placeholder属性将完全忽略它。 无伤害，无臭。 请参阅您的浏览器是否支持占位符文本 。

因为它不能提供“起点”的用户，但它的一半了，至少它不会是完全一样的。

Answer 5:

最好的解决办法是使用文字输入和添加属性INPUTMODE =“URL”提供的网址键盘设备。 HTML5规范被认为用于这一目的。 如果你保持TYPE =“网址”你的语法验证这是不是在任何情况下有用的（最好是检查它是否返回404错误，而不是这是相当宽容的，是有很大的帮助不是语法）。

您还可以覆盖与属性模式=默认模式的可能性“的https：//.+”例如更宽容。

把novalidate属性的形式是不正确的答案，问的问题，因为它消除了验证在表单中的所有字段，你可能想保留验证例如用于电子邮件字段。

使用jQuery禁用验证也是一个糟糕的解决方案，因为它应该绝对没有JavaScript工作。

就我而言，我把选择元素与2个选项（HTTP：//或https：//）的URL输入之前，因为我只需要网站（没有的ftp：//或其他东西）。 这样，我避免打字这个奇怪的前缀（蒂姆·伯纳斯 - 李的最大的遗憾，也许URL语法错误的主要来源）和我用INPUTMODE =“URL”占位符一个简单的文本输入（无HTTP）。 我使用jQuery和服务器端脚本来验证网站真实存在（没有404），并删除HTTP前缀，如果插入（我避免使用图案状的图案=“^（（？HTTP）。）* $”防止将前缀，因为我认为这是更好更宽松）

Answer 6:

我发现了一个解决方案适用于Chrome用CSS这以下的选择没有绕过谁是非常有用的本地核销单。

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

Answer 7:

只需使用的novalidate在表单中。

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

干杯！！！

Answer 8:

下面是我用它来防止Chrome和Opera从显示无效的输入使用NOVALIDATE对话框时甚至功能。

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;
});

Answer 9:

你可以安装简单的Chrome扩展程序，只是禁用验证在飞行https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

默认情况下，一切都将作为默认，但您将能够禁用与扩展图标，只需单击工具栏上的HTML5验证

文章来源: Disable validation of HTML5 form elements