必需的属性 HTML5答案

【问题标题】：Required attribute HTML5必需的属性 HTML5
【发布时间】：2011-03-01 14:06:33
【问题描述】：

在我的 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>&nbsp;<input type="text" id="name" required="true" /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required="true" /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>

我预期会发生的事情确实发生了。第一个字段“名称”确实自动获得焦点。

还有其他人偶然发现这个吗？

【问题讨论】：

现在不需要将 required 属性设置为 true。例如：和是一样的
没错，这是我的一个坏习惯，当我习惯用 XHTML 编写代码时......但是所有现代浏览器都支持这个标签而没有 ="required" 吗？我相信 Safari 不会...
实际和预期的行为是什么？
根据blog.grayghostvisuals.com/html/using-html-required-attribute "如果该属性存在，它的值必须是空字符串或与属性的规范名称不区分大小写的匹配值，没有前导或尾随空格。”对于“boolean”属性，因此 required="true" 应该有 required="required" 或只是 required

标签： html

【解决方案1】：

好的。在我写下我的问题的同时，我的一位同事让我意识到这实际上是 HTML5 行为。见http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

似乎在 HTML5 中有一个新属性“必需”。并且 Safari 5 已经实现了这个属性。

【讨论】：

该死，你在我发布相同答案的几秒钟内就回答了你自己的问题！
感谢我的一位同事。我想这对其他人来说可能很有趣？
绝对！我很高兴看到最终的 HTML5 规范必须在表单前端提供什么。

【解决方案2】：

如果我正确理解您的问题，是不是 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

【讨论】：

这就是为什么我们不应该在标准对象上构建自定义属性或属性。
任何想法如何为特定页面的 Chrome 和 Safari 关闭此功能？
@Restuta 转到 about:flags 以在 Chrome 中禁用此功能。火狐，我不确定。

【解决方案3】：

注意

<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 值将使表单控件成为可选控件，但事实并非如此。

【讨论】：

这个答案是对的，但我认为这不是我们这里的问题。
使用安全吗？ ...我的意思是我应该使用这个还是坚持使用 javascript 验证？我的意思是安全的，这个解决方案是否会在不同的浏览器/设备上产生异常...
我想指出原始代码没有“错误”，它只是暗示您可以使用false 来使字段成为可选（不是必需的） - 这不是案子。您必须了解的是，required 属性的存在使该字段成为必需字段。使该字段可选的唯一方法是删除该属性。服务器端验证才是最重要的（抱歉尖叫）。
@RyanWheale 我认为客户端验证（虽然本身不够）也很重要
@jinglesthula - 客户端验证只是为用户提供便利（节省到服务器的往返行程，从而获得更好的用户体验）。我正在解决之前的评论“[跨浏览器]使用是否安全” - 答案是只要您的服务器端验证正常工作（例如，旧的浏览器将无法识别 HTML5 表单验证，并将提交一个带有空值的“必填”字段）。

【解决方案4】：

我刚刚在 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。

【讨论】：

您也可以在表单标签上使用novalidate 对整个表单执行此操作。
我已经打包了一个小的 Chrome 扩展，将这个属性添加到当前选项卡中的所有表单中，谢谢你的提示！ chrome.google.com/webstore/detail/html5-form-validation-rem/…
对我来说很重要，formnovalidate 也适用于按钮类型提交：<button type="submit" formnovalidate>Submit</button>。

【解决方案5】：

关于自定义属性的一个小说明：HTML5 允许所有类型的自定义属性，只要它们以粒子data- 为前缀，即data-my-attribute="true"。

【讨论】：

和these work fine in older browsers （除非您需要自己的代码来访问它们的值，而不是新的 API），因此它们是比编写自己的属性更好的选择（因为他们赢了'不与将来添加的任何官方属性冲突）。
实际上，自定义属性可以是任何东西。那些以“data-”为前缀的对象将出现在element.dataset 对象中，但是还有其他优点（例如，jQuery 将能够使用.data() 自动获取任何以“data-”为前缀的自定义属性的值方法，即.data("myAttribute") = data-my-attribute 的值）。使用较短的自定义属性有时对制作自定义 CSS3 选择器很有用。

【解决方案6】：

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;
    }
}

【讨论】：

谢谢。这对我帮助很大。
是纯 CSS 还是更少？
我有一台 iPod touch，在我的一生中，当标记为必需的输入不起作用并找到此问答时，它仍然会启动。这个答案是唯一对我有用的答案。只是想我会分享。

【解决方案7】：

只需将以下内容放在您的表单下方。确保您的输入字段为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>

【讨论】：