Forms provide real-time inline validation feedback
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.
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Conversion Optimization Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from marketing-conversion·automated