Form Validation: Harder Than It Looks

Form validation isn’t as simple as it seems. There are several challenges that can make or break the user experience:

? Bad UX can cost you leads – A poorly designed validation process can frustrate users and drive them away.

? The worst-case scenario? A broken form – If users can’t complete the buying process, you lose customers.

?? Security risks and performance issues – Weak validation can expose vulnerabilities and slow down your app.

Native HTML Validation: A Good Start but Not Enough

HTML provides built-in validation with error highlights and basic messages. But it often falls short.

?? Have you ever tried switching fields in a form, only to be blocked by an error message popping up everywhere? Users should be able to fill out forms in their own way without being overwhelmed by errors.

?? Real-time error messages while typing? Annoying! Users believe they are filling out the form correctly, so validation should be smart enough not to distract them.

Security Matters

You probably don’t want to expose the entire password pattern on the client side—it makes it easier for attackers to generate brute-force attempts. A better approach is to use commonly accepted filters for XSS attacks in your pattern validation (e.g., ^[^<>\x22\x27\\/]{8,}$) and enforce reasonable length limits (8-255 characters). While this won’t prevent users from sending malicious requests, it helps mitigate accidental leaks and social engineering attacks.

UX Pitfalls to Avoid

?? Fields jumping around while typing – A form shouldn’t behave unpredictably just because multiple patterns can be applied to a field. Example:

?? X-X (valid)

? X-XX (invalid)

?? X-XXX (valid)

?? Performance bottlenecks – If every keystroke triggers validation for all fields, it can freeze the entire form. This is a common issue with libraries like Formik, where updates create a chain reaction.

?? Dependent field validation complexity – When one field relies on another, validation logic gets tricky. Should you validate only the changed field or recheck both?

?? Losing user focus – Sometimes, error messages appear out of view—at the top, bottom, or even off-screen. The user keeps pressing a disabled submit button, not realizing what’s wrong.

?? Pre-filled form dilemma – If a form is partly filled on page load, should we validate it immediately or wait for the user to trigger validation manually? And if so, what should that trigger be? Editing a field? Simply hovering over the form?

My Experiment

I wanted to tackle all these issues in one go. Here’s an example of my approach: Form validation sucks

What’s your biggest frustration with form validation? Let’s discuss! ??