Skip to main content

Forms provide real-time inline validation feedback

ab-001755 · marketing-conversion.form-optimization.inline-validation
Severity: mediumactive

Why it matters

Submit-only validation forces users to complete an entire form before learning they made a mistake on field one. Each round-trip error adds friction, and friction causes abandonment — especially on signup forms where a single bad email format can discard everything the user typed. Inline validation (blur or change) catches errors at the field level the moment the user leaves it, cutting abandonment on multi-field forms. This is purely a UX and conversion concern; client-side feedback is bypassable and never substitutes for server-side validation.

Severity rationale

Medium because submit-only validation measurably increases form abandonment and degrades user experience, but does not expose a security vulnerability on its own.

Remediation

Switch react-hook-form's validation mode from 'onSubmit' (the default) to 'onBlur' so each field is checked when the user moves past it:

const form = useForm({
  resolver: zodResolver(signupSchema),
  mode: 'onBlur',
})

Pair this with a visible error state on each field — a red border and an error message rendered below the input — so the user can see exactly which field needs fixing without scrolling to a summary at the top of the form.

Detection

  • ID: marketing-conversion.form-optimization.inline-validation

  • Severity: medium

  • What to look for: Check whether form fields provide real-time feedback as the user types or on blur (when the field loses focus), rather than only on submit. Look for: (1) onChange or onBlur validation handlers in form component logic; (2) react-hook-form's mode: 'onChange' or mode: 'onBlur' configuration; (3) Visual state indicators on fields (green checkmark when valid, red border when invalid) that update before submit. This is distinct from the previous check — the previous check is about where errors appear; this check is about when they appear.

  • Pass criteria: Count all primary form fields (email, password, etc.) and check each for validation timing. At least 1 field (the email field or equivalent primary field) validates on blur or change with feedback before form submission. No more than 0 critical fields may lack pre-submit validation. Report: "X of Y primary fields validate before submission."

  • Fail criteria: Validation only occurs on form submission — fields show no state change while the user is filling them out.

  • Skip (N/A) when: No forms found, or forms have only a single field (e.g., a simple email-only newsletter signup — single-field real-time validation is optional).

  • Detail on fail: "SignupForm uses react-hook-form with mode: 'onSubmit' only — no field validation fires until the user clicks submit.".

  • Remediation: Validate on blur (when the user moves past a field) to catch errors early without interrupting typing:

    const form = useForm({
  resolver: zodResolver(signupSchema),
  mode: 'onBlur',  // Validate when field loses focus
})

    For email specifically, blur validation immediately tells the user if the format is wrong before they fill out the rest of the form.

Taxons

user-experience

History