禁用HTML5表单元素的验证

如果要在HTML5中禁用表单的客户端验证,请向表单元素添加novalidate属性。前任:

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

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

我已经阅读了规范,并在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>

我没有在其他浏览器中测试过。

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

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

您可以将 http://code>in作为占位符文本,而不是尝试围绕浏览器的验证进行结束运行。这是从你链接的网页上:

<form>
<input name=“q”placeholder=“搜索书签和历史”>
<input type=“submit”value=“搜索”>
&表格/表格;
< /代码> 

不支持placeholderattribute的浏览器只会忽略它。没有伤害,没有犯规。查看您的浏览器是否支持placeholder文本。

< /块引用>

它不会完全相同,因为它不会为用户提供“起点”,但它至少在那里的一半。

D提出http://作为占位符文本。这是您链接的页面:


占位符文本

HTML5对Web表单的第一个改进是设置placeholder text in an input field. 只要输入字段为空且未聚焦,就会在输入字段中显示占位符文本。只要单击(或选项卡)输入字段,占位符文本就会消失。

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



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



具有讽刺意味的是,火狐3.5不支持将占位符文本添加到您自己的Web表单中。C_E st la vie.

占位符支持

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属性将忽略它。没有伤害,没有犯规。See whether your browser supports placeholder text.


它不会完全相同,因为它不会为用户提供那个“起点”,但它至少在那里的一半。

最好的解决方案是使用文本输入并添加属性inputmode=“url”以提供URL键盘功能。HTML5规范就是为此目的而设计的。如果您保留type=“url”,则会得到语法验证,这在每种情况下都不有用(最好检查它是否返回404错误,而不是非常允许的语法,这对您没有很大帮助)。

您还可以使用attribute pattern=“https”覆盖默认模式。://.+“例如更为宽松。

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

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

在我的例子中,我在URL输入之前放置了一个带有两个选项(http://或https://)的select元素,因为我只需要网站(而不需要ftp://或其他东西)。这样我就避免了输入这个奇怪的前缀(TimBerners-Lee最大的遗憾,可能是URL语法错误的主要来源),并且我使用了一个简单的文本输入,输入时带有带占位符(不带HTTP)的inputmode=“url”。我使用jquery和服务器端脚本来验证网站的真实存在性(第404号),并在插入时删除HTTP前缀(我避免使用模式,如pattern=“^(?)HTTP)。)*$”以防止添加前缀,因为我认为更宽容一点更好)

我找到了一个使用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

只使用 未验证 以你的形式。

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

干杯!!!!

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

您可以安装简单的chrome扩展,然后立即禁用验证 https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

默认情况下,一切都将作为默认值工作,但您可以通过单击工具栏上的扩展图标禁用HTML5验证。