Our Guide To

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.

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 UX in HTML and CSS

You can do and impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors. But it does require some CSS trickery to get everything just right! Related

Updated: The Current State of HTML5 Forms

It’s been about a year, so I redesigned and updated all the support information here. Added Android. Lots more green, but we’re still quite a ways off from using features like validation without fallbacks. Related


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 = ‘mail@example.com’; $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=”test@geemail.com”; if (isValidEmail($email)) […]

URL Validation

$url = ‘http://example.com’; $validation = filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED); if ( $validation ) $output = ‘proper URL’; else $output = ‘wrong URL’; echo $output; Related

#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 […]