Html 必需属性 HTML5
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3004703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Required attribute HTML5
提问by Joop
Within my web application I am using some custom validation for my form fields. Within the same form I have two buttons: one to actually submit the form and the other to cancel/reset the form.
在我的 Web 应用程序中，我对表单字段使用了一些自定义验证。在同一个表单中，我有两个按钮：一个用于实际提交表单，另一个用于取消/重置表单。
Mostly I use Safari as my default browser. Now Safari 5 is out and suddenly my cancel/reset button didn't work anymore. Every time I did hit the reset button the first field in my form did get the focus. However this is the same behavior as my custom form validation. When trying it with another browser everything just worked fine. I had to be a Safari 5 problem.
大多数情况下，我使用 Safari 作为我的默认浏览器。现在 Safari 5 出来了，突然我的取消/重置按钮不再起作用了。每次我按下重置按钮时，表单中的第一个字段都会获得焦点。但是，这与我的自定义表单验证行为相同。使用其他浏览器尝试时，一切正常。我必须是 Safari 5 的问题。
I changed a bit in my Javascript code and I found out that the following line was causing the problem:
我对我的 Javascript 代码进行了一些更改，我发现以下行导致了问题：
document.getElementById("somefield").required = true;
To be sure that would be really the problem I created a test scenario:
为了确保这真的是我创建的测试场景的问题：
<!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>
What I expected would happen did happen. The first field "name" did get the focus automatically.
我预期会发生的事情确实发生了。第一个字段“名称”确实自动获得了焦点。
Anyone else stumbled into this?
还有其他人偶然发现了吗？
采纳答案by Darrik Spaude
I just ran into this issue with Safari 5 and it has been an issue with Opera 10 for some time, but I never spent time to fix it. Now I need to fix it and saw your post but no solution yet on how to cancel the form. After much searching I finally found something:
我刚刚在 Safari 5 上遇到了这个问题，并且在 Opera 10 上已经有一段时间了，但我从来没有花时间去解决它。现在我需要修复它并看到您的帖子，但还没有关于如何取消表单的解决方案。经过大量搜索，我终于找到了一些东西：
http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate
http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate
<input type=submit formnovalidate name=cancel value="Cancel">
Works on Safari 5 and Opera 10.
适用于 Safari 5 和 Opera 10。
回答by Ms2ger
Note that
注意
<input type="text" id="car" required="true" />
is wrong, it should be one of
错了，应该是其中之一
<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' />
This is because the truevalue suggests that the falsevalue will make the form control optional, which is not the case.
这是因为该true值表明该false值将使表单控件成为可选的，但事实并非如此。
回答by David Foster
If I understand your question correctly, is it the fact that the requiredattribute appears to have default behaviour in Safari that's confusing you? If so, see: http://w3c.github.io/html/sec-forms.html#the-required-attribute
如果我正确理解了您的问题，那么该required属性在 Safari 中似乎具有默认行为这一事实是否让您感到困惑？如果是这样，请参阅：http: //w3c.github.io/html/sec-forms.html#the-required-attribute
requiredis not a custom attribute in HTML 5. It's defined in the spec, and is used in precisely the way you're presently using it.
required不是 HTML 5 中的自定义属性。它在规范中定义，并以您目前使用它的方式使用。
EDIT: Well, not precisely. As ms2ger has pointed out, the requiredattribute is a boolean attribute, and here's what the HTML 5 spec has to say about those:
编辑：嗯，不完全是。正如 ms2ger 所指出的，该required属性是一个布尔属性，以下是 HTML 5 规范对这些内容的说明：
Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
注意：布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。
See: http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes
请参阅：http: //w3c.github.io/html/infrastructure.html#sec-boolean-attributes
回答by Evalds Urtans
Safari 7.0.5 still does not support notification for validation of input fields.
Safari 7.0.5 仍然不支持输入字段验证的通知。
To overcome it is possible to write fallback script like this: http://codepen.io/ashblue/pen/KyvmA
为了克服它可以像这样编写回退脚本：http: //codepen.io/ashblue/pen/KyvmA
To see what HTML5 / CSS3 features are supported by browsers check: http://caniuse.com/form-validation
要查看浏览器支持哪些 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:
SASS/更少：
input, select, textarea {
@include appearance(none);
border-radius: 0px;
&.invalid {
border-color: red !important;
}
}
回答by Ludder
A small note on custom attributes: HTML5 allows all kind of custom attributes, as long as they are prefixed with the particle data-, i.e. data-my-attribute="true".
关于自定义属性的一个小说明：HTML5 允许所有类型的自定义属性，只要它们以粒子为前缀data-，即data-my-attribute="true".
回答by Joop
Okay. The same time I was writing down my question one of my colleagues made me aware this is actually HTML5 behavior. See http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
好的。在我写下我的问题的同时，我的一位同事让我意识到这实际上是 HTML5 行为。见http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
Seems in HTML5 there is a new attribute "required". And Safari 5 already has an implementation for this attribute.
似乎在 HTML5 中有一个新属性“必需”。Safari 5 已经有这个属性的实现。
回答by emotality
Just put the following below your form. Make sure your input fields are required.
只需将以下内容放在您的表格下方。确保您的输入字段是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>
