Question

我们正在使用grunt-html-angular-validate包来获取HTML lints。它在引擎盖下使用W3C online validator tool，到目前为止，它在验证我们的角度模板方面做得很好。

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

验证src / login / login.html ...错误[L37：C108]

价值不佳   {{regCodeRequired}}用于元素输入的属性自动对焦。

以下是失败的相关行：

<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是一个布尔变量，一旦用户通过了第一个登录/密码验证步骤，就会设置为true。

我看到输入出现了一个焦点（使用chrome 39） - 它正在工作。

问题：

我很确定验证工具有理由抱怨，但我不确定如何继续。我们错误地使用autofocus属性了吗？我们该如何修复验证错误？

我查看W3C validator errors试图找到解释，但那里没有autofocus。此外，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

根据规范，autofocus属性为boolean attribute：

许多属性是布尔属性。存在的   元素上的boolean属性表示真值，而   缺少属性表示错误值。

如果属性存在，则其值必须为空字符串   或者是属性的ASCII不区分大小写匹配的值   规范名称，没有前导或尾随空格。

布尔属性不允许使用值“true”和“false”。   要表示false值，必须省略该属性   共

最后一段几乎解释了为什么验证者在抱怨。

换句话说，您可以替换

<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感兴趣。

Answer 2

尝试在配置中将angular选项显式地设置为true（这应该允许角度绑定{{}}的进程（摘要）和{{regCodeRequired}}应该替换之前的变量regCodeRequired的值。验证html）：

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

类型：数组默认值：[]

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

您可以使用*通配符，例如：＆＃39; custom-attrs - *＆＃39;

属性自动对焦的值不正确

2 个答案: