Validation 禁用HTML5表单元素的验证

例如，在我的表单中，我想使用新的HTML5表单类型

问题是，Chrome想要超级有用，并为我验证这些元素，只是它太差劲了。如果未通过内置验证，则除了获取焦点的元素之外，没有其他消息或指示。我用http:///预先填充URL元素，因此我自己的自定义验证只将这些值视为空字符串，但Chrome拒绝这样做。如果我能改变它的验证规则，那也行

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

---

那么，有没有一种方法可以关闭或自定义自动验证？

您可以将http://作为占位符文本输入，而不是尝试围绕浏览器的验证进行结束运行。这是您链接的页面上的内容：

占位符文本 HTML5给web表单带来的第一个改进是设置的能力。只要输入字段为空且未聚焦，占位符文本就会显示在输入字段内。只要单击输入字段或选项卡，占位符文本就会消失

您可能以前见过占位符文本。例如，Mozilla Firefox 3.5现在在位置栏中包含占位符文本，内容为“搜索书签和历史记录”：

单击位置栏上的或选项卡时，占位符文本将消失：

具有讽刺意味的是，Firefox3.5不支持将占位符文本添加到您自己的web表单中。这就是生活

占位符支持 以下是如何在自己的web表单中包含占位符文本：

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

不支持占位符属性的浏览器将直接忽略它。没有伤害，就没有犯规

---

它不会完全相同，因为它不会为用户提供该起点，但至少已经达到了一半。

我阅读了规范并在Chrome中进行了一些测试，如果捕获到无效事件并返回false，则似乎允许表单提交

我正在使用jquery和这个HTML

//抑制URL输入上的无效事件 $'input[type=url]'。绑定'invalid'，函数{ 警报“无效”； 返回false； }; document.forms[0]。onsubmit=function{ 警报“表格已提交”； }; 提交

---

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

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

---

请参见

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

---

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

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

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

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

我在这页上找到了解决方案：

---

以下是我用来防止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;
});

---

最好的解决方案是使用文本输入并添加属性inputmode=url以提供url键盘功能。HTML5规范就是为了这个目的而设计的。如果您保持type=url，您将得到语法验证，这在任何情况下都不有用。最好检查它是否返回404错误，而不是语法，因为语法非常宽松，没有很大帮助

例如，您还可以使用pattern=https？：/。+属性覆盖默认模式，以获得更大的权限

将novalidate属性添加到表单中并不是问题的正确答案，因为它会删除表单中所有字段的验证，例如，您可能希望保留电子邮件字段的验证

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

在我的例子中，我在URL输入之前放置了一个带有两个选项http://或https://的select元素，因为我只需要网站，而不需要ftp://或其他东西。这样我就避免了输入这个奇怪的前缀，这是Tim Berners Lee最大的遗憾，也可能是URL语法错误的主要来源，我使用了一个简单的文本输入，输入模式为inputmode=URL，占位符不带HTTP。我使用jQuery和服务器端脚本来验证404号网站的真实存在性，并在插入时删除HTTP前缀。我避免使用pattern=^？HTTP.*$之类的模式来防止放置前缀，因为我认为更宽松一些更好，只需在表单中使用novalidate即可

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

干杯

yo 你可以添加一些javascript来克服那些讨厌的验证气泡，并添加你自己的验证程序

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

---

如果将表单元素标记为required=则novalidate=不起作用

---

---

规避所需验证的一种方法是对提示使用。

+1，但不幸的是，这对我来说不是一个解决方案。我仍然不想做任何验证，主要是因为它的用户体验太差了。太好了，我明天会试试，让你知道它是如何运行的。谢谢，哇！我真的很难找到我的提交活动去了哪里。谢谢你，先生！FireFox正在验证输入的更改。则不会触发“无效”事件。所以，对我来说没有解决办法。明天永远不会到来：不起作用。我把代码做成了一个片段。捕获无效事件并返回false不会让表单提交。novalidate=novalidate和novalidate=也是有效语法。@bassim有效语法但过于冗长为什么键入的内容比需要的多？@user1569050例如在CakePHP之类的框架中，在FormHelper:：create的$options数组中设置novalidate=>true时，它将使用novalidate=novalidate方法。感谢bassim提供的额外信息：@rybo111这是客户端验证，这有助于减少对服务器的请求数量。这不是简化服务器端验证的借口。@martti我指的是，如果我正在测试一些新的PHP验证，我可以快速禁用该表单的JavaScript验证，以避免必须正确填写整个表单。我应该写得更容易测试。这在chrome 29的最新版本中不起作用，我想知道是不是因为HTML 5.1草案规范提到了一个，如果我理解正确的话，它可以用于指定用户与字段交互时应提供给用户的键盘类型，也不意味着任何验证规则。在将来的某个时候，使用inputmode属性而不是type属性可能是这个问题的正确解决方案，但现在还不是。@MarkAmery，尽管现在获得未来并不太难：$'[inputmode]'.eachfunction{this.attr{type:this.attr'inputmode'，novalidate:true}@MarnenLaibow Koser虽然您所描述的方法很有效，但如果您只想按照提问者的指定关闭验证，那么它并不能获得与inputmode相同的结果。例如，按照自己的方式做事，您仍然无法将用户键入的非数值读取到number类型的输入框中。例如，尝试在中的文本框中键入非数字的内容，然后单击按钮。@MarkAmery interest。这是因为它根本不接受非数值吗？@MarnenLaibow-Koser我想是的。关于这个问题的公认答案包括一个链接到规范，回答者声称该规范要求这种行为。这些条目叫什么？哈哈-我不知道了，对不起。这是三年前的事了你的意思是：；如何禁用单个输入标记的验证？请提供一个简短的示例。你的回答似乎不完整。

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);