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 […]
In the last article in this series, we built a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, there are some browser gotchas. Not every browser supports every Validity State property. […]
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 […]
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!
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 […]
Simple $email = ‘email@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=”firstname.lastname@example.org”; if (isValidEmail($email)) […]
$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;
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 […]