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, Fauna
Article

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

Article

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!

Article

Why Use a Third-Party Form Validation Library?

We’ve just wrapped up a great series of posts from Chris Ferdinandi on modern form validation. It starts here. These days, browsers have quite a few built-in tools for handling form validation including HTML attributes that can do quite a bit on their own, and a JavaScript API that can do even more. Chris even […]

Almanac

:required

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

Snippet

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

Snippet

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;

Video

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