Input type, enterkeyhint and novalidate on forms

What the browser gives you for free

A typed input brings a matching mobile keyboard and a validation pass with it. type="email" shows the at sign, type="tel" shows a keypad, type="url" shows a slash. type="text" shows the full QWERTY layout and nothing else.

enterkeyhint relabels the return key on that keyboard, so it reads Next through a form and Send or Done at the end. And novalidate turns off the browser’s constraint validation for a whole form, which is the right call only when your own code has taken the job over.

What squirrel checks

Three checks, at rule severity warning.

input-types compares each field’s type against the purpose inferred from its name, id, label and placeholder.

• Fail when a digit-string field such as a postal code, phone number or card number uses type="number". Report message: N digit-string field(s) use type="number", extended with , M other field(s) use the wrong type when both problems appear. Items read postal code field uses type="number", which strips leading zeros and drops non-numeric input.
• Warn when a field is type="text" where a specific type is correct. Report message: N field(s) use type="text" where a specific type is correct, with items reading type="text" where type="email" is correct. An inputmode that delivers the same keyboard is accepted instead: email, tel and url for their matching types, and numeric or decimal for number.
• Pass with N field(s) use the correct input type, or skip with No inputs with an evident type found.

enterkeyhint looks at forms with three or more data fields.

• Warn when no field in such a form sets enterkeyhint. Report message: N multi-field form(s) set no enterkeyhint, with items reading 5-field form, no field sets enterkeyhint.
• Pass with N multi-field form(s) set enterkeyhint, or skip with No forms with 3 or more fields found.

form-novalidate looks at forms carrying the novalidate attribute.

• Warn when such a form still declares constraints and ships nothing of its own to replace them. Constraints means any of required, pattern, min, max, minlength, maxlength or step, or a self-validating type: email, url, number, date, time, month or week. Report message: N form(s) set novalidate but still rely on browser constraints.
• Pass with N form(s) set novalidate deliberately, or skip with No forms set novalidate.

A replacement counts when the form has onsubmit or oninvalid, when it contains an element matching [oninvalid], [aria-invalid], [aria-errormessage], [role="alert"], [aria-live], [data-error], [data-validate], [data-val] or [data-rules], or when the page’s inline scripts mention checkValidity, reportValidity, setCustomValidity, react-hook-form, Formik, jQuery Validate, Parsley or just-validate.

How to fix it

<input type="email" name="email" autocomplete="email" enterkeyhint="next" required>
<input type="text" inputmode="numeric" name="postcode"
       autocomplete="postal-code" enterkeyhint="done" required>

Use type="number" only for quantities you would do arithmetic on. For a digit string, keep type="text" and add inputmode="numeric": that gives the keypad without stripping leading zeros or discarding anything that is not a valid float.

The novalidate check is about intent, not about the attribute. A form that validates in JavaScript and shows its own messages passes, because one of the custom-validation signals is present.

Enable / disable

Disable this rule

[rules]
disable = ["a11y/input-types"]

Disable all Accessibility rules

[rules]
disable = ["a11y/*"]

Enable only this rule

[rules]
enable = ["a11y/input-types"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• a11y/autocomplete-tokens: the autofill token that belongs on the same fields.
• a11y/form-labels: inputs, textareas and selects with no <label>, aria-label or title.
• a11y/paste-inputs: the other way forms make typing harder than it needs to be.
• mobile/font-size: text size on the same screens these keyboards appear on.

Accessibility findings ship in every audit next to the SEO, performance and agent experience rules. See Website security scan with AI for how an agent works through a report.

Glossary: Form labels.

References

• inputmode, MDN
• enterkeyhint, MDN
• Constraint validation, MDN

Check your site

Run squirrel audit https://example.com and open the Accessibility section of the report. The three checks are reported separately, so you can act on one without the others. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.