属性自动对焦的错误值

Question

我们正在使用 grunt-html-angular-validate package for HTML lints. It uses W3C online validator tool 底层，到目前为止，它在验证我们的 angular 模板方面做得很好。

今天，它在检查从存储库中提取的最新更改时失败，并出现以下错误：

Validating src/login/login.html ...ERROR [L37:C108]

Bad value {{regCodeRequired}} for attribute autofocus on element input.

以下是失败的相关行：

<div class="auth-reg-code-block" ng-if="regCodeRequired">
    <input class="form-control" type="text" name="regCode" 
           id="regCode" ng-model="user.regCode" autofocus="{{regCodeRequired}}" 
           placeholder="Registration Code" required>
</div>

这基本上是一个用于输入双因素身份验证注册码的字段。 regCodeRequired 是一个布尔变量，在用户通过第一个 login/password 身份验证步骤后设置为 true。

而且我看到输入出现在它上面（使用 chrome 39）- 它正在工作。

问题：

我很确定验证工具抱怨是有原因的，但我不确定如何继续。我们是否错误地使用了 autofocus 属性？我们应该如何修复验证错误？

我浏览了 W3C validator errors trying to find an explanation, but there is nothing about autofocus there. Also, nothing inside the w3cjs github repository。

这是 htmlangular 的 grunt 配置：

htmlangular: {
    options: {
        relaxerror: [
            'Element head is missing a required instance of child element title.',
            'Attribute href without an explicit value seen.',
            '& did not start a character reference.',
            'not allowed on element form at this point.',
            'not allowed as child of element',
            'Element img is missing required attribute src.'
        ],
        reportpath: null
    },
    all: [
        "<%= app.src %>/*.html",
        "<%= app.src %>/**/*.html"
    ]
}

不胜感激。

Answer 1

尝试在您的配置中将 angular 选项明确设置为 true（这应该启用 angular 绑定 {{}} 和 {{regCodeRequired}} 的过程（摘要）应该是在验证 html):

之前替换变量 regCodeRequired 的值

htmlangular: {
    options: {
        angular: true, //per documentation: Turns on ignoring of validation errors that are caused by AngularJS.
        relaxerror: [
            'Element head is missing a required instance of child element title.',
            'Attribute href without an explicit value seen.',
            '& did not start a character reference.',
            'not allowed on element form at this point.',
            'not allowed as child of element',
            'Element img is missing required attribute src.'
        ],
        reportpath: null
    },
    all: [
        "<%= app.src %>/*.html",
        "<%= app.src %>/**/*.html"
    ]
}

如果这不起作用，那么您需要将此参数视为自定义指令：

 options: {
        customattrs: ['autofocus']
     //...
 }

根据文档：https://www.npmjs.com/package/grunt-html-angular-validate

options.customattrs

类型：数组默认值：[]

在此处列出您通过指令和其他方式创建的所有自定义属性。验证器将忽略有关这些属性的警告。

您可以使用 * 通配符，例如：'custom-attrs-*'

Answer 2

根据规范，autofocus 属性是 boolean attribute:

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

最后一段几乎解释了验证者抱怨的原因。

换句话说，你可以替换

<div class="auth-reg-code-block" ng-if="regCodeRequired">
    <input class="form-control" type="text" name="regCode" 
           id="regCode" ng-model="user.regCode" autofocus="{{regCodeRequired}}" 
           placeholder="Registration Code" required>
</div>

与：

<div class="auth-reg-code-block" ng-if="regCodeRequired">
    <input class="form-control" type="text" name="regCode" 
           id="regCode" ng-model="user.regCode" autofocus
           placeholder="Registration Code" required>
</div>

您可能对 ng-autofocus plugin 感兴趣。

属性自动对焦的错误值

Bad value for attribute autofocus

javascript

html

angularjs

autofocus

angular-template