Question

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

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

其他人偶然发现了这个？

Answer 1

请注意

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

Answer 2

我刚刚使用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。

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

只需在表单下方添加以下内容即可。确保您的输入字段为$vendedor = Vendedor::with('produtos')->find( $idVendedor ); foreach ( $vendedor->produtos as $produto ) { $produto->pivot->estado = $novoEstado; };。

required

Answer 8

您是否尝试过使用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>

必需属性HTML5

8 个答案: