Bad value for attribute autofocus

Question

We are using grunt-html-angular-validate package for HTML lints. It uses W3C online validator tool under-the-hood and, so far, it did a great job in validating our angular templates.

Today, it failed while checking the latest changes pulled from the repository with the following error:

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

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

Here are the related lines where it fails:

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

This is basically a field for entering a registration code for the two-factor authentication. regCodeRequired is a boolean variable that is set to true once the user passed the first login/password authentication step.

And I see the input appearing with a focus on it (using chrome 39) - it is working.

Question:

I'm pretty sure there is a reason for the validation tool to complain, but I'm not sure how to proceed. Are we using autofocus attribute incorrectly? How should we fix the validation error?

I've looked through the W3C validator errors trying to find an explanation, but there is nothing about autofocus there. Also, nothing inside the w3cjs github repository.

---

Here is the grunt configuration for 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"
    ]
}

Would appreciate any pointers.

Answer 1

According to the specs, the autofocus attribute is a 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.

The last paragraph pretty much explains why the validator is complaining.

In other words, you can replace

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

with:

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

---

You might be interested in ng-autofocus plugin.