HTML5 Form Validation

Learn how to validate form data using built-in HTML attributes — required, minlength, pattern, and more — plus CSS pseudo-classes for styling valid/invalid fields.

Step 1 of 7

Why validate form data?

Form validation is the process of checking that user input meets certain requirements before it is submitted. Without validation, users can submit incomplete, incorrectly formatted, or nonsensical data — leading to errors, confusion, and wasted time.

Consider a registration form that requires an email address. Without validation, a user might type "hello" instead of "hello@example.com". The form submits, the server tries to send a confirmation email to "hello", it fails, and the user never knows why they didn't receive their account verification. Validation catches this mistake immediately and tells the user: "Please enter a valid email address."

HTML5 introduced built-in validation attributes that work without any JavaScript. The browser itself checks the data and shows error messages when requirements aren't met. This is called client-side validation — it happens in the user's browser before any data is sent to the server.

HTML5 validation provides instant feedback (the user doesn't have to wait for a server response), reduces server load (invalid submissions are caught before they're sent), and improves user experience (clear, immediate error messages).

But there's a critical caveat: client-side validation is a convenience, not a security measure. A knowledgeable user can bypass it by modifying the HTML in their browser's developer tools. Server-side validation is always required for security.

Think of it this way: Think of form validation like a bouncer at a concert venue. The bouncer checks your ticket at the door before you enter. If your ticket is expired, the wrong date, or clearly fake, the bouncer catches it immediately and turns you away — you don't have to walk all the way inside only to be escorted out by security later. Client-side validation is the bouncer at the door (quick, convenient). Server-side validation is security inside the venue (the real protection). You need both.

Web Standard

Client-side validation should never replace server-side validation. HTML validation attributes can be removed or modified by anyone using browser developer tools. Always validate data on the server as well. Think of client-side validation as a helpful user experience enhancement, not a security mechanism.

Learn more on MDN

HTMLMDN: Client-side form validation