禁用HTML5表单元素的验证

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

问题在于，Chrome想要为我提供超级帮助并验证这些元素，只不过它很糟糕。 如果内置验证失败，除了获得焦点的元素外没有任何消息或指示。 我使用"http://"预填URL元素，因此我自己的自定义验证只是将这些值视为空字符串，但Chrome会拒绝这些值。 如果我可以改变它的验证规则，那也可以。

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

那么， 有没有办法关闭或自定义自动验证？

---

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

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

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

---

我阅读了规范并在Chrome中进行了一些测试，并且如果您捕捉到“无效”事件并返回似乎允许表单提交的错误。

我用这个HTML使用jquery。

// 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文件中的条目。 如果有人发现另一个解决方案，请让我知道。

链接地址: http://www.djcxy.com/p/29261.html

上一篇: Disable validation of HTML5 form elements

下一篇: How to decompile with correct line numbers using fernflower?