必需属性HTML5

81

在我的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>

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

还有其他人偶然发现吗？

html

— 乔普
source

2

现在无需将required属性设置为true。例如：<input type =“ text” id =“ name” required =“ true” />和<input type =“ text” id =“ name” required />相同

— RSK 2014年

是的，当我习惯于用XHTML编写代码时，这是我的一个坏习惯。但是所有现代浏览器都支持不带=“ required”的标记吗？我相信Safari不会...

— Loic Cara 2014年

实际和预期的行为是什么？

— Ciro Santilli郝海东冠状病六四事件法轮功

根据blog.grayghostvisuals.com/html/using-html-required-attribute的规定， “如果存在该属性，则其值必须为空字符串或该属性的规范名称不区分大小写的值，不包含前导或尾随空格。” 的“布尔值”属性，因此应该不是required =“ true”，而是应该是required =“ required”或只是必需

— George Birbilis

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。

— 达里克·斯佩德（Darrik Spaude）
source

8

您还可以novalidate在form标记上使用它来对整个表单执行此操作。

— Michael Mior

我打包了一个小的Chrome扩展程序，将该属性添加到当前选项卡中的所有表单中，谢谢！chrome.google.com/webstore/detail/html5-form-validation-rem/…–

— Damien

对我来说很重要，也formnovalidate可以使用按钮类型Submit <button type="submit" formnovalidate>Submit</button>。

— Mayeenul Islam

256

注意

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

— Ms2ger
source

7

这个答案是正确的，但我认为这不是我们这里遇到的问题。

— PhoneixS

使用安全吗？...我的意思是我应该使用它还是只坚持javascript验证？安全地说，这个解决方案会在不同的浏览器/设备上产生异常吗？

— kebyang 2013年

8

我想指出的是，原始代码不是“错误的”，它只是意味着您可以使用false它来使字段可选（不是必需的），事实并非如此。您必须了解的是，required属性的存在使该字段成为必需字段。使字段可选的唯一方法是删除属性。而服务器端验证就是所有问题（对不起，大声尖叫）。

— Ryan Wheale

@RyanWheale我认为客户端验证（虽然本身不足）也很重要

— jinglesthula 2013年

1

@jinglesthula-客户端验证不过是给用户带来的便利（节省了往返服务器的时间，从而带来了更好的UX）。我在前面的评论中提到“可以在所有浏览器中使用这样安全吗” -答案是，只要您的服务器端验证有效（例如，较旧的浏览器无法识别HTML5格式），它就没有关系验证并提交带有空值的“必填”字段）。

— Ryan Wheale 2013年

19

如果我正确理解了您的问题，是因为该required属性在Safari中似乎具有默认行为，这会让您感到困惑吗？如果是这样，请参阅：http : //w3c.github.io/html/sec-forms.html#the-required-attribute

required 在HTML 5中不是自定义属性。它是在规范中定义的，并以与您当前使用方式完全相同的方式使用。

编辑：嗯，不完全是。正如ms2ger指出的那样，该required属性是boolean属性，这是HTML 5规范必须说明的内容：

注意：布尔属性上不允许使用值“ true”和“ false”。为了表示一个假值，必须完全省略该属性。

请参阅：http : //w3c.github.io/html/infrastructure.html#sec-boolean-attributes

— 大卫·福斯特
source

2

这就是为什么我们不应该在标准对象上组成自定义属性或属性的原因。

— 昆汀2010年

有什么想法如何针对特定页面的Chrome和Safari关闭此功能吗？

— Restuta 2010年

@Restuta转到about：flags在Chrome中禁用此功能。Firefox，我不确定。

— therealklanni 2011年

8

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

少/少

input, select, textarea {
    @include appearance(none);
    border-radius: 0px;

    &.invalid {
        border-color: red !important;
    }
}

— 评估乌尔坦人
source

谢谢。这对我很有帮助。

— theGreenCabbage

是普通CSS还是更少？

— James A Mohler 2015年

我拥有一台iPod touch，在我生命中，当标记为必填项的输入不起作用并找到此问与答时，它仍会启动。这个答案是唯一对我有用的答案。只是以为我会分享。

— Funk Forty Niner 2016年

7

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

— 路德
source

1

而在旧的浏览器，这些做工精细的（除非你需要自己的代码来访问它们的值，而不是新的API），所以他们比你自己填写的属性更好的选择（因为他们将不与任何冲突官方属性）。

— Paul D. Waite，

1

实际上，自定义属性实际上可以是任何东西。element.dataset但是，以“ data-”为前缀的那些将出现在对象中，还有其他优点（例如，jQuery将能够使用该.data()方法自动获取任何以“ data-”为前缀的自定义属性的.data("myAttribute")值，即= value of data-my-attribute）。使用较短的自定义属性有时对于创建自定义CSS3选择器很有用。

— therealklanni

3

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

在HTML5中似乎有一个新属性“ required”。Safari 5已经具有此属性的实现。

— 乔普
source

该死，在我发布相同答案的几秒钟内，您回答了自己的问题！

— David Foster 2010年

的确感谢我的一位同事。我想这对其他人可能很有趣？

— 乔普

绝对！我很高兴看到最终的HTML5规范将在表单方面提供。

— David Foster 2010年

2

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

— 情绪化
source