Bad value for attribute autofocus
We are using a grunt-html-angular-validate
package for HTML strings. It uses the W3C online validation tool under the hood and so far it has done a great job validating our angular templates.
Today he was unable to check out the latest changes checked out from the repository with the following error:
Checking src / login / login.html ... ERROR [L37: C108]
Poor {{regCodeRequired}} cost for autofocusing an attribute on element input.
Here are the related lines where it doesn't work:
<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 the field for entering the registration code for two-factor authentication. regCodeRequired
is a boolean variable that is set to true
after the user has gone through the first login / password authentication step.
And I see the input focused on it (using chrome 39) - it works.
Question:
I'm sure there is a reason why the validation tool might be complaining, but I'm not sure how to proceed. Are we autofocus
misusing the attribute ? How do I fix the validation error?
I looked at the W3C validator errors trying to find an explanation, but there is nothing there autofocus
. Also, nothing inside w3cjs
the github repository .
Here is the grunt config 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.
source to share
According to the specifications, the attribute autofocus
is a boolean attribute :
Several attributes are boolean attributes. The presence of a boolean attribute on an element represents a true value, and the absence of an attribute represents a false value.
If the attribute is present, its value must be an empty string, or a value that is an ASCII case-insensitive match for the attribute canonical name, without leading or trailing spaces.
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute must be omitted altogether.
The last paragraph explains pretty much 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>
from:
<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 may be interested in the ng-autofocus plugin .
source to share
Try to explicitly set the angular parameter to true in your configuration (this should allow you to replace the process (digest) of the angular {{}} and {{regCodeRequired}} bindings with the value of the regCodeRequired variable before html validation):
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"
]
}
If that doesn't work, you will need to treat this setting as a custom directive:
options: {
customattrs: ['autofocus']
//...
}
In the documentation: https://www.npmjs.com/package/grunt-html-angular-validate
options.customattrs
Type: Array Default: []
List all the custom attributes you've created through directives and other means here. The validator will ignore warnings about these attributes.
You can use wildcard *, for example: 'custom-attrs- *'
source to share