Modern browsers support built-in form validation.

Looks nice, right? But, many web developers don't use this built-in form validation.

Here are 3 reasons why…

Problem 1: UX designers typically want *custom* error message styling that *displays the same across browsers*. That’s not supported…unless you use web components.

So if you're using a JS framework (and most of us are), you have to build in 2 totally different technologies. 👎

Problem 2: Inferior API. See the attached image.

https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation#examples.

I can more easily implement validation using React/Vue/etc. Then my app uses the same APIs for *all* components, instead of a totally different component API for inputs that need validated.

Problem 3: I like to declare validation logic via a JS function. I use Node on the server, so I reuse my validation on client and server. 👍

With built-in form validation, the logic is in HTML attributes like "required", "pattern", so I can't easily share validation code. 👎

In summary, native client-side validation is a nice idea. But unfortunately, it isn’t very attractive in real-world use cases where people are using JS frameworks.

So for now, I’ll keep writing custom validation in JavaScript, based on each of my client’s unique requirements.

Follow-up poll: Is your team using built-in form validation?

View original on X