禁用HTML5表单元素的验证

Question

在我的表单中,我想使用新的HTML5表单类型,例如<input type="url" />(有关这里类型的更多信息).

The problem is that Chrome wants to be super helpful and validate these elements for me, except that it sucks at it. If it fails the built-in validation, there's no message or indication other than the element getting focus. I prefill URL elements with "http://", and so my own custom validation just treats those values as empty strings, however Chrome rejects that. If I could change its validation rules, that would work too.

I know I could just revert back to using type="text" but I want the nice enhancements using these new types offers (eg: it automatically switches to a custom keyboard layout on mobile devices):

So, is there a way to switch off or customise the automatic validation?

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属性只会阻止浏览器发送表单.浏览器仍会评估数据并添加:valid和:invalid伪类.

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

Answer 4

最好的解决方案是使用文本输入并添加属性inputmode ="url"以提供URL键盘功能.HTML5规范被认为是出于此目的.如果你保持TYPE ="网址"你的语法验证这是不是在任何情况下有用的(最好是检查它是否返回404错误,而不是这是相当宽容的,是有很大的帮助不是语法).

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

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

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

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

Answer 5

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

占位符文本

HTML5为Web表单带来的第一个改进是能够在输入字段中设置占位符文本.只要字段为空且未聚焦,占位符文本就会显示在输入字段内.单击(或Tab键)到输入字段后,占位符文本就会消失.

您之前可能已经看过占位符文本了.例如,Mozilla Firefox 3.5现在在位置栏中包含占位符文本,其中显示"搜索书签和历史记录":

单击(或选项卡到)位置栏时,占位符文本将消失:

具有讽刺意味的是,Firefox 3.5不支持将占位符文本添加到您自己的Web表单中.这就是生活.

占位符支持

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

以下是您可以在自己的Web表单中包含占位符文本的方法:

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

不支持该placeholder属性的浏览器将忽略它.没有伤害,没有犯规.查看您的浏览器是否支持占位符文本.

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

Answer 6

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

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

在 JSX（JavaScript、React、Angular、Vue 等）中，您需要在表单中添加noValidate（需要大写的驼峰命名法）：V

<form onSubmit={handleSubmit(data)} noValidate>

正如Jakob S所说，在纯 HTML 情况下，添加novalidate到表单元素：

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