任何浏览器是否还支持HTML5的checkValidity（）方法？

HTML5规范定义了一些非常有趣的验证组件，包括pattern（用于验证Regexp）和required（用于将字段标记为要求）。然而，尽我所知，没有浏览器实际上根据这些属性进行任何验证。任何浏览器是否还支持HTML5的checkValidity（）方法？

我发现了一个comparison of HTML5 support across engines，但没有关于验证的信息。在我尝试过的浏览器（Firefox 3.5.8和Safari 4.0.4）中，没有任何对象具有checkValidity()方法，所以即使可以定义它们，我也无法运行验证。

有没有这个功能的支持，所以我可以试验？

来源

2010-03-10 James A. Rosen

我测试了谷歌Chrome以下内容：

<!DOCTYPE html> 
<html> 
    <body> 
    <style> 
     .valid { color: #0d0; } 
     .invalid { color: #d00; } 
    </style> 
    <div id="output"></div> 
    <script> 
     function check(input) { 
     var out = document.getElementById('output'); 
     if (input.validity) { 
      if (input.validity.valid === true) { 
      out.innerHTML = "<span class='valid'>" + input.id + 
          " is valid</span>"; 
      } else { 
      out.innerHTML = "<span class='invalid'>" + input.id + 
          " is not valid</span>"; 
      } 
     } 
     console.log(input.checkValidity()); 
     }; 
    </script> 
    <form id="testform" onsubmit="return false;"> 
     <label>Required: 
     <input oninput="check(this)" id="required_input" 
       required /> 
     </label><br> 
     <label>Pattern ([0-9][A-Z]{3}): 
     <input oninput="check(this)" id="pattern_input" 
       pattern="[0-9][A-Z]{3}"/> 
     </label><br> 
     <label>Min (4): 
     <input oninput="check(this)" id="min_input" 
       type=number min=4 /> 
     </label><br> 
    </form> 
    </body> 
</html>

Stangely，该<element>.validity.valid属性似乎正常工作，但调用<element>.checkValidity()总是返回true，所以它看起来像是一个尚未实现。

来源

2010-03-10 23:12:50

你需要调用checkValidity的形式，而不是投入上 – miketaylr 2010-03-11 01:25:26

你在哪里看到的HTTP。。。？ //dev.w3.org/html5/spec/Overview.html说checkValidity是HTMLObjectElement上的一个成员函数，并且：“当调用checkValidity（）方法时，如果该元素是约束验证的候选者......用户代理必须激发一个名为invalid的简单事件，该事件可以在元素处取消...并返回false。 “ 相同规范将”约束验证的候选对象“定义为”列出的与表单关联的元素是约束验证的候选对象，除非条件禁止约束验证中的元素。“ 似乎应用了输入。 – 2010-03-11 07:02:51

我的理解是在表单上调用checkValidity（）将简单地依次委托给它的每个'input's（和'select's'和'textarea's），但我不能说我真的有一个参考 – 2010-03-11 14:11:04

根据Dive into HTML5：

当Opera的用户尝试提交表单与场，歌剧院自动提供符合RFC的电子邮件验证，即使禁用脚本。 Opera还提供对输入字段的网址和字段中的数字进行验证。数字验证甚至考虑到最小和最大属性，所以如果您输入的数字太大，Opera不会让您提交表单。

（所引用的一段是关于过去的文章。）

到目前为止我所知 - 和铭记我没有使用Opera 10测试，我要带他们的话因为它没有其他浏览器自动验证表单。

来源

2010-03-10 22:47:03

Opera 10有一些HTML5表单验证http://dev.opera.com/articles/view/improve-your-forms-using-html5/。但是，我不认为它有checkValidation（）。

来源

2010-03-10 22:52:34 Adam

当然。歌剧和铬。但是你可以检验一下自己：

function supportsValidity(){ 
    var i = document.createElement('input'); 
    return typeof i.validity === 'object' 
}

下面是沙盒，你可以看到Opera和Chrome浏览器中操作的链接： http://jsfiddle.net/vaZDn/light/

来源

2010-03-11 01:19:46 miketaylr

也适用于firefox 4.0 .1 – 2011-05-08 18:34:36

也可以在IE 10中工作 – Johannes 2013-08-07 20:33:56

如果你的意思checkValidity（），那么，是的，Opera支持它。

信息披露thang：我为Opera工作。

来源

2011-11-23 14:57:25 bruce

既然你在那里工作......任何机会你都可以在上面的评论线索中看到一些东西......是否它应该在父表单上工作？ http://stackoverflow.com/questions/2421218/do-any-browsers-yet-support-html5s-checkvalidity-method#comment2405975_2421394 – 2012-01-31 16:37:12

checkValidity（）支持在表单上作为整体或独立输入。

“此外，checkValidity（）方法可以在单个字段或整个表单上执行，并返回true或false。执行该方法还将以编程方式触发所有无效字段的无效事件，或者if仅在单个字段上执行，仅适用于该元素。“
从除了列表采取

- http://www.alistapart.com/articles/forward-thinking-form-validation/

“的形式。checkValidity（）如果表单的控件全部有效，则返回true;否则返回错误“ http://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validation

”valid = element。 checkValidity（）如果元素的值没有有效性问题，则返回true;否则为假。在后一种情况下的元素触发一个无效事件“ http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#client-side-form-validation

W3C - 工作草案

来源

2012-10-12 15:22:15 cpi

任何浏览器是否还支持HTML5的checkValidity（）方法？

回答

相关问题