代码之家 › 专栏 › 技术社区 › Joop

必需属性html5

html5

Joop · 技术社区 · 15 年前

在我的Web应用程序中,我正在对表单域使用一些自定义验证。在同一个表单中,我有两个按钮:一个用于实际提交表单,另一个用于取消/重置表单。

大多数情况下,我使用Safari作为默认浏览器。现在Safari 5已退出,突然我的取消/重置按钮不再工作。每次我按下重置按钮,窗体中的第一个字段都会获得焦点。但是,这与我的自定义表单验证的行为相同。当用另一个浏览器尝试时,一切都正常。我必须是一个游猎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>

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

还有人偶然发现这个吗?

8 回复 | 直到 6 年前

Darrik Spaude 15 年前

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

254

Ms2ger 15 年前

注意

<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 值将使窗体控件成为可选的,但实际情况并非如此。

Md_Zubair Ahmed Joe Clay 6 年前

如果我正确理解你的问题,是不是事实上 required 属性在Safari中似乎有让您困惑的默认行为?如果是,请参阅: http://w3c.github.io/html/sec-forms.html#the-required-attribute

必修的 不是HTML 5中的自定义属性。它在规范中定义,并以您当前使用它的方式使用。

编辑嗯,不是 精确地 . 正如ms2ger指出的那样, 必修的 属性是 布尔属性 下面是HTML5规范对这些问题的看法:

注意:布尔属性中不允许使用值“true”和“false”。要表示一个假值,必须完全忽略该属性。

见: http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes

Evalds Urtans 10 年前

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/少:

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

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

Ludder 14 年前

关于自定义属性的一个小提示:HTML5允许所有类型的自定义属性,只要它们以粒子为前缀 data- ,即 data-my-attribute="true" .

Joop 15 年前

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

似乎在HTML5中有一个新的属性“必选”。Safari5已经有了这个属性的实现。

emotality 9 年前

把下面的内容放在你的表格下面。确保输入字段为 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>

-3

DominicRoyDomingo 12 年前

您是否尝试过使用HTML5的必需属性?( http://www.w3.org/TR/html5/forms.html#the-required-attribute )?

<body>
    <form id="someform">
        <label>Name:</label>&nbsp;<input type="text" id="name" required /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>