禁用HTML5表单元素的validation
在我的表单中，我想使用新的HTML5表单types，例如<input type="url" /> （ 关于这里的types的更多信息 ）。
问题是，Chrome想要超级有用，并为我validation这些元素，除了它吸了它。 如果内置validation失败，除了获得焦点的元素之外，没有任何消息或指示。 我使用"http://"预填URL元素，因此我自己的自定义validation只是将这些值视为空string，但Chrome会拒绝这些值。 如果我能改变它的validation规则，那也可以。
我知道我可以恢复使用type="text"但是我希望使用这些新的types提供很好的增强function（例如：它会自动切换到移动设备上的自定义键盘布局）：
那么， 有没有办法closures或自定义自动validation？
如果要禁用HTML5中的表单的客户端validation，请在表单元素中添加novalidate属性。 例如：
<form method="post" action="/foo" novalidate>...</form>
我有一个阅读的规范，并在Chrome中做了一些testing，如果你赶上“无效”的事件，并返回假，似乎允许表单提交。
我正在使用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>
我只是想补充一点，在表单中使用novalidate属性只会阻止浏览器发送表单。 浏览器仍然评估数据并添加：valid和：invalid伪类。
我发现这是因为有效和无效的伪类是我一直使用的HTML5样板表的一部分。 我刚刚删除了与伪类相关的CSS文件中的条目。 如果有人发现另一个解决scheme，请让我知道。
而不是尝试围绕浏览器的validation做最后的运行，你可以把http://作为占位符文本。 这是从你链接的页面：
占位符文本
HTML5为Web表单带来的第一个改进就是可以在input字段中设置占位符文本 。 占位符文本显示在input字段内，只要该字段为空且不重点。 只要您点击（或选项卡）input字段，占位符文本消失。
你以前可能看过占位符文字。 例如，Mozilla Firefox 3.5现在在位置栏中包含占位符文本，该位置栏显示“search书签和历史logging”：
当您单击（或选项卡）位置栏时，占位符文本消失：
具有讽刺意味的是，Firefox 3.5不支持将占位符文本添加到自己的Web表单中。 这就是生活。
占位符支持
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属性的浏览器将会忽略它。 没有伤害，没有犯规。 查看您的浏览器是否支持占位符文本 。
这不会是完全一样的，因为它不会为用户提供“起点”，但至less在一半。
最好的解决scheme是使用文本input并添加属性inputmode =“url”来提供URL键盘function。 HTML5规范就是为此而devise的。 如果你保留type =“url”，你会得到在每种情况下都没有用的语法validation（最好是检查它是否返回一个404错误，而不是相当宽容的语法，而且帮助不大）。
例如，您也可以使用属性pattern =“https？：//.+”覆盖默认模式，使其更加宽容。
将novalidate属性放在表单中并不是问题的正确答案，因为它将删除表单中所有字段的validation，例如，您可能需要对电子邮件字段进行validation。
使用jQuery禁用validation也是一个不好的解决scheme，因为它应该绝对没有JavaScript的工作。
在我的情况下，我在URLinput之前放置了一个带有2个选项（http：//或https：//）的select元素，因为我只需要网站（并且不需要ftp：//或其他东西）。 这样我就可以避免input这个奇怪的前缀（Tim Berners-Lee最大的遗憾，也许是URL语法错误的主要来源），我使用带有占位符（无HTTP）的inputmode =“url”的简单文本input。 我使用jQuery和服务器端脚本来validation网站的真实存在（没有404），并删除HTTP前缀，如果插入（我避免使用模式，如pattern =“^（（？http）。）* $”为防止放置前缀，因为我认为更好的是更宽容）
我find了一个Chrome浏览器的CSS解决scheme，不用绕过本地validation表单，这个方法非常有用。
form input::-webkit-validation-bubble-message, form select::-webkit-validation-bubble-message, form textarea::-webkit-validation-bubble-message { display:none; }
通过这种方式，你也可以自定义你的消息…
我在这个页面上获得解决scheme： http : //trac.webkit.org/wiki/Styling%20Form%20Controls
这里是我用来防止铬和歌剧显示无效的input对话框，甚至当使用novalidate的function。
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扩展程序，并立即停用validationhttps://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related
默认情况下，一切都将默认工作，但您将能够禁用HTML5validation只需单击工具栏上的扩展名图标
只需在表单中使用novalidate 。
<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">
干杯！！！
