Skip to main content
Guide Collection

Form Validation

Forms. They collection information. Sometimes what is entered isn’t in the format we need. How do we validate that? There is a lot we can do right in the browser.

Monthly Sponsor
Thanks, Frontend Masters!

Form Validation Part 1: Constraint Validation in HTML

Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some custom MailChimp code. In fact, that setup is what inspired this new series about modern form validation. […]


Form Validation Part 2: The Constraint Validation API (JavaScript)

In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example, <input type=”email”/>) and validation attributes (such as required and pattern). While incredibly easy and super lightweight, this approach does have a few shortcomings. You can style fields that have errors on them […]


Form Validation – Part 4: Validating the MailChimp Subscribe Form

Over the last few articles in this series, we’ve learned how to use a handful of input types and validation attributes to natively validate forms. We’ve learned how to use the Constraint Validation API to enhance the native browser validation process for a better overall user experience. And we wrote a polyfill to extend support […]



The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted, but allows the user to avoid the wait incurred by having the server be the sole validator of the […]


Email Address Validation

Simple $email = ‘[email protected]’; $validation = filter_var($email, FILTER_VALIDATE_EMAIL); if ( $validation ) $output = ‘proper email address’; else $output = ‘wrong email address’; echo $output; Advanced This function doesn’t only check if the format of the given email address is correct, it also performs a test if the host is existing. <?php $email=”[email protected]”; if (isValidEmail($email)) […]


URL Validation

$url = ‘’; $validation = filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED); if ( $validation ) $output = ‘proper URL’; else $output = ‘wrong URL’; echo $output;


#62: Advanced Form Styling & Functionality

This screencast walks through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling, one for validation, and one for the serializing of the inputs and AJAX submission. We then use PHP to optionally save […]