FormValidationInline [rule] v1.0.0

Form fields MUST be validated and feedback rendered at field blur (or after the user has clearly committed to a value), NOT only on submit. Submit-only validation forces the user to fix N errors at once and re-scan the entire form, increasing abandonment.

Checks

• @community/check-form-validation-inline

Applies To

@community/type-html-artifact

Severity

high

Severity Combination

submit-only validation (no field-level feedback) → BLOCK
blur validation but feedback only at submit      → WARN
blur validation + inline feedback                → PASS

Failure Mode

Users complete the entire form, hit Submit, and are bounced back to a wall of red errors. They re-read fields they thought were correct, lose state, and abandon at higher rates. This is Nielsen heuristic #5 (Error Prevention) and #9 (Help recognize errors).

Remediation

• Use HTML5 :invalid + :user-invalid (Chrome/Firefox 2024+) to apply error styles only after the user has interacted.
• Bind validation to onBlur; render an error message via aria-describedby on the field.
• Do NOT validate on keydown — the user is mid-input. Reserve for password-strength meters where progressive feedback helps.
• On submit, focus the first invalid field; do not just scroll.
• See @impeccable/template-form-validation for the canonical scaffold.

Exceptions

• • Case: Single-field forms
  • Allowed When: A login / search / single-input form has only one field; submit-time validation is acceptable.
• • Case: Server-only validation
  • Allowed When: A check that requires a server round-trip (uniqueness, fraud) cannot be inline — but client-side preconditions still must be inline.

FormValidationInline [rule] v1.0.0

Form fields MUST be validated and feedback rendered at field blur (or after the user has clearly committed to a value), NOT only on submit. Submit-only validation forces the user to fix N errors at once and re-scan the entire form, increasing abandonment.

Checks

• @community/check-form-validation-inline

Applies To

@community/type-html-artifact

Severity

high

Severity Combination

submit-only validation (no field-level feedback) → BLOCK
blur validation but feedback only at submit      → WARN
blur validation + inline feedback                → PASS

Failure Mode

Users complete the entire form, hit Submit, and are bounced back to a wall of red errors. They re-read fields they thought were correct, lose state, and abandon at higher rates. This is Nielsen heuristic #5 (Error Prevention) and #9 (Help recognize errors).

Remediation

• Use HTML5 :invalid + :user-invalid (Chrome/Firefox 2024+) to apply error styles only after the user has interacted.
• Bind validation to onBlur; render an error message via aria-describedby on the field.
• Do NOT validate on keydown — the user is mid-input. Reserve for password-strength meters where progressive feedback helps.
• On submit, focus the first invalid field; do not just scroll.
• See @impeccable/template-form-validation for the canonical scaffold.

Exceptions

• • Case: Single-field forms
  • Allowed When: A login / search / single-input form has only one field; submit-time validation is acceptable.
• • Case: Server-only validation
  • Allowed When: A check that requires a server round-trip (uniqueness, fraud) cannot be inline — but client-side preconditions still must be inline.

Applies To

@community/type-html-artifact

Severity

high

Validates With

• @community/fact-error-prevention
• @nielsen/taxonomy-10-heuristics

Severity Combination

submit-only validation (no field-level feedback) → BLOCK
blur validation but feedback only at submit      → WARN
blur validation + inline feedback                → PASS

Failure Mode

Users complete the entire form, hit Submit, and are bounced back to a wall of red errors. They re-read fields they thought were correct, lose state, and abandon at higher rates. This is Nielsen heuristic #5 (Error Prevention) and #9 (Help recognize errors).

Remediation

• Use HTML5 :invalid + :user-invalid (Chrome/Firefox 2024+) to apply error styles only after the user has interacted.
• Bind validation to onBlur; render an error message via aria-describedby on the field.
• Do NOT validate on keydown — the user is mid-input. Reserve for password-strength meters where progressive feedback helps.
• On submit, focus the first invalid field; do not just scroll.
• See @impeccable/template-form-validation for the canonical scaffold.

Exceptions

• • Case: Single-field forms
  • Allowed When: A login / search / single-input form has only one field; submit-time validation is acceptable.
• • Case: Server-only validation
  • Allowed When: A check that requires a server round-trip (uniqueness, fraud) cannot be inline — but client-side preconditions still must be inline.

See Also

• @community/check-form-validation-inline