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 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 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 Posts …powered by Jetpack! The Jetpack WordPress plugin runs on this site, powering not just the […]

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 Posts …powered by Jetpack! The Jetpack WordPress plugin runs on this site, powering not just the related posts below, but […]

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

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 Posts …powered by Jetpack! The Jetpack WordPress plugin runs on this site, powering not just the related posts below, but security and backups, Markdown support, site search, comment form, social network […]

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

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag