Validating on blur is the more stable moment
Aliases: on blur · validate on exit · field-level validation
What it is
Validation on blur runs the rule when the field loses focus. Tab, a click on the next field, or a click on empty space is a declaration that “I am done with this one.” Format and required errors show then, so mid-states are not treated as final. It is more stable than per-key errors, and earlier than speaking only at whole-form submit. This entry is about when the first judgment happens. It does not explain why per-key hurts, and it does not decide whether a field already in red should go quiet the instant a fix is typed. Where focus goes after a failed submit, and whether a top summary counts, are location and aggregation problems, not blur itself.
Why it happens
Leaving focus is a completion signal the person gives. The validator then sees something close to a final state: an email should contain @, a date should be a whole span. Binding judgment to that signal aims the error at a value the person thinks they have handed over, not at the prefix they are still typing. A second layer is rhythm. Filling is write → switch item → write. Blur inserts feedback on the switch beat, not the keystroke beat, so the motor program can finish. Validating only at submit piles every error at the end, and people have to walk back through the whole form. Stability comes from “completion signal × in-place feedback,” not from the DOM blur event as such. If the system fires blur before autocomplete finishes, or if mobile “Next” never fires web blur, the signal was never sent.
Studying it
Compare three moments for the first error: per key, blur, submit only. Include values pasted across fields (email from a password manager, then Tab).
Independent variables: event that first shows an error (input / blur / submit), whether mobile uses “Next” instead of blur, whether autofill completes before validation. Dependent variables: invalid mid-state errors on that field, time from error appearance to correction, errors never seen before submit, false alarms (judged wrong before the value was finished).
In the lab, clicking the next field with a mouse makes blur clean. Touch and keyboard leave by different paths and must be measured separately. Faster completion in a blur group is not automatically timing—if that group also moved copy, the variables are tangled.
Where it stops holding
The last field is often submitted with Enter or the primary button; focus may never leave it, so blur validation never runs. Submit validation has to be the backstop, or the last field is a blind spot. Custom dropdowns and date panels may blur and focus repeatedly during choice, turning the act of choosing into several “completions.” Forms with JavaScript off, or validation only on the server, have no blur layer. Cross-field rules (two passwords, start and end dates) cannot be settled on the first blur, because the other half does not exist yet.
Applying it
- Bind the first field-level format and required message to a real completion signal: blur, “Next” on a mobile keyboard toolbar, or confirm in a picker—not every character.
- Run the same rules again on whole-form submit, covering the last field that never blurred and controls whose scripts never received blur.
- For dates and dropdowns that blur several times inside a panel, wait until the panel closes or the option is confirmed; do not flag “required” the instant the panel opens.
- Verify by filling only through the last field and submitting: that field’s error must still appear. Tab through an email on a keyboard: the error must appear after leaving, not on the first character. On a real device, tap “Next” on the keyboard toolbar and confirm validation ran. After autofill writes a whole email, the error must not flash before the value is complete.
Related
- Within the group: H1.04.1 Validating during typing flags errors before the value is complete · H1.04.3 A field already in error should clear as soon as it is fixed
- Adjacent: H1.06 Error summaries · E2.22 Autofocus and focus stealing · H1.11 Keyboard experience in forms
- Search terms:
validation on blur·field-level validation·complete signal