Плохое значение для атрибута автофокус

Мы используем grunt-html-angular-validate пакет для HTML линтов. Он использует W3Conline validator tool under-the-hood и до сих пор проделал большую работу по проверке наших угловых шаблонов.

Сегодня он потерпел неудачу при проверке последних изменений, извлеченных из репозитория, со следующей ошибкой:

Проверка 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, пытаясь найти объяснение, но там ничего нет о autofocus. Кроме того, внутри ничего нет.w3cjs репозиторий github .

Вот конфигурация ворчания для htmlangular: 

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"
    ]
}

Был бы признателен за любые указания.

2 3
javascript angularjs html angular-template autofocus

2 ответа:

Согласно спецификации, атрибут autofocus является булевым атрибутом :

Ряд атрибутов являются логическими атрибутами. Наличие а логический атрибут элемента представляет собой истинное значение, а отсутствие атрибута представляет собой ложное значение.

Если атрибут присутствует, его значение должно быть либо пустой строкой или значение, которое является совпадением ASCII без учета регистра для атрибута. каноническое имя, без начала и конца пробел.

Значения "true" и "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.

4

Попробуйте явно установить параметр 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

Варианты.customattrs

Тип: массив значение по умолчанию: []

Перечислите здесь все пользовательские атрибуты, созданные с помощью директив и других средств. Валидатор будет игнорировать предупреждения об этих атрибутах.

Можно использовать подстановочный знак*, например: 'custom-attrs -*'

1