必填属性HTML5
在我的Web应用程序中，我正在使用一些自定义validation的表单字段。 在同一个表单中，我有两个button：一个实际提交表单，另一个取消/重置表单。
大多数情况下我使用Safari作为我的默认浏览器。 现在Safari 5出来了，突然我的取消/重置button不起作用了。 每次我点击重置button，我的表单中的第一个字段确实得到了重点。 但是，这是我的自定义表单validation相同的行为。 当尝试与另一个浏览器一切工作正常。 我必须成为一个Safari 5的问题。
我改变了一下在我的Javascript代码，我发现下面的行导致了这个问题：
document.getElementById("somefield").required = true; 为了确定这将是我创buildtesting场景的真正问题：
<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <form id="someform"> <label>Name:</label> <input type="text" id="name" required="true" /><br/> <label>Car:</label> <input type="text" id="car" required="true" /><br/> <br/> <input type="submit" id="btnsubmit" value="Submit!" /> </form> </body> </html>
我的预期会发生。 第一个字段“名称”自动获得焦点。
任何人都偶然发现了这个？
我刚刚遇到了Safari 5的这个问题，Opera 10已经有一段时间了，但我从来没有花时间去修复它。 现在我需要修复它，看到你的文章，但没有解决scheme，但如何取消表格。 经过多次的search，
http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate
<input type=submit formnovalidate name=cancel value="Cancel">
适用于Safari 5和Opera 10。
注意
<input type="text" id="car" required="true" />
是错的，应该是其中之一
<input type="text" id="car" required /> <input type="text" id="car" required="" /> <input type="text" id="car" required='' /> <input type="text" id="car" required=required /> <input type="text" id="car" required="required" /> <input type="text" id="car" required='required' />
这是因为true价值表明， false价值将使窗体控制可选，而不是这样的情况。
如果我正确理解你的问题，那么这个required属性是否在Safari中具有默认行为，这让你感到困惑？ 如果是这样，请参阅： http : //dev.w3.org/html5/spec/Overview.html#the-required-attribute
required的不是HTML 5中的自定义属性。它是在规范中定义的，并且正如现在使用它的方式一样。
编辑 ：好吧，不完全 。 正如ms2ger所指出的那样， required属性是一个布尔属性 ，下面是HTML 5规范对这些属性的描述：
注意：布尔属性不允许使用“true”和“false”值。 为了表示一个错误的值，这个属性必须被完全省略。
请参阅： http : //dev.w3.org/html5/spec/Overview.html#boolean-attribute
自定义属性小记：HTML5允许所有types的自定义属性，只要它们以粒子data-为前缀，即data-my-attribute="true" 。
Safari 7.0.5仍然不支持通知validationinput字段。
为了克服这个问题，可以这样编写回退脚本： http : //codepen.io/ashblue/pen/KyvmA
要查看浏览器支持的HTML5 / CSS3function，请检查： http : //caniuse.com/form-validation
function hasHtml5Validation () { //Check if validation supported && not safari return (typeof document.createElement('input').checkValidity === 'function') && !(navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0); } $('form').submit(function(){ if(!hasHtml5Validation()) { var isValid = true; var $inputs = $(this).find('[required]'); $inputs.each(function(){ var $input = $(this); $input.removeClass('invalid'); if(!$.trim($input.val()).length) { isValid = false; $input.addClass('invalid'); } }); if(!isValid) { return false; } } });
SASS / LESS：
input, select, textarea { @include appearance(none); border-radius: 0px; &.invalid { border-color: red !important; } }
好的。 同时我写下我的问题，其中一位同事让我意识到这实际上是HTML5的行为。 请参阅http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
似乎在HTML5中有一个新的属性“必需”。 Safari 5已经有了这个属性的实现。
只需将下面的表单放在下面。 确保您的input字段是required 。
<script> var forms = document.getElementsByTagName('form'); for (var i = 0; i < forms.length; i++) { forms[i].noValidate = true; forms[i].addEventListener('submit', function(event) { if (!event.target.checkValidity()) { event.preventDefault(); alert("Please complete all fields and accept the terms."); } }, false); } </script>
您是否尝试过使用HTML5的必需属性（ http://www.w3.org/TR/html5/forms.html#the-required-attribute ）？
<body> <form id="someform"> <label>Name:</label> <input type="text" id="name" required /><br/> <label>Car:</label> <input type="text" id="car" required /><br/> <br/> <input type="submit" id="btnsubmit" value="Submit!" /> </form> </body> </html>
