在我的Web应用程序中,我正在为表单字段使用一些自定义验证.在同一表格中,我有两个按钮:一个用于实际提交表单,另一个用于取消/重置表单.
大多数情况下,我使用Safari作为默认浏览器.现在Safari 5出来了,突然我的取消/重置按钮不再起作用了.每次我点击重置按钮时,我表单中的第一个字段确实得到了焦点.但是,这与我的自定义表单验证相同.当用另一个浏览器尝试时,一切都运行良好.我不得不成为Safari 5的问题.
我在我的Javascript代码中改变了一点,我发现以下行导致了问题:
document.getElementById("somefield").required = true;
为了确保这确实是问题,我创建了一个测试场景:
<!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>
我预期会发生什么事.第一个字段"名称"确实自动获得焦点.
其他人偶然发现了这个？
Ms2*_*ger 255
注意
<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值将使表单控件可选,但实际情况并非如此.
小智 49
我刚刚使用Safari 5遇到了这个问题,它已经成为Opera 10的一个问题了一段时间,但我从未花时间修复它.现在我需要修复它并看到你的帖子但还没有关于如何取消表单的解决方案.经过多次搜索,我终于发现了一些东
http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate
<input type=submit formnovalidate name=cancel value="Cancel">
适用于Safari 5和Opera 10.
Dav*_*ter 19
如果我正确地理解了您的问题,那么该required属性在Safari中是否会出现默认行为,这让您感到困惑？如果是这样,请参阅:http://w3c.github.io/html/sec-forms.html#the-required-attribute
required 不是HTML 5中的自定义属性.它在规范中定义,并且以您目前使用它的方式使用.
编辑:嗯,不准确.正如ms2ger所指出的那样,该required属性是一个布尔属性,这就是HTML 5规范对这些属性的说法:
注意:布尔属性不允许使用值"true"和"false".要表示错误值,必须完全省略该属性.
请参阅:http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes
Safari 7.0.5仍不支持输入字段验证通知.
要克服它,可以编写这样的回退脚本:http: //codepen.io/ashblue/pen/KyvmA
要查看浏览器支持的HTML5/CSS3功能,请访问: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;
}
}