Form Validation Part 3: A Validity State API Polyfill

In the last article in this series, we build 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. Internet Explorer is the main violator, though Edge does lack support for tooLong even though IE10+ support it. And Chrome, Firefox, and Safari got full support only recently.

Today, we’ll write a lightweight polyfill that extends our browser support all the way back to IE9, and adds missing properties to partially supporting browsers, without modifying any of the core code in our script.

Article Series:

  1. Constraint Validation in HTML
  2. The Constraint Validation API in JavaScript
  3. A Validity State API Polyfill (You are here!)
  4. Validating the MailChimp Subscribe Form (Coming Soon!)

Let’s get started.

Testing Support

The first thing we need to do is test the browser for Validity State support.

To do that, we’ll use document.createElement('input') to create a form input, and then check to see if the validity property exists on that element.

// Make sure that ValidityState is supported var supported = function () {     var input = document.createElement('input');     return ('validity' in input); };

The supported() function will return true in supporting browsers, and false in unsupported ones.

It’s not enough to just test for the validity property, though. We need to make sure the full range of Validity State properties exist as well.

Let’s extend our supported() function to test for all of them.

// Make sure that ValidityState is supported in full (all features) var supported = function () {     var input = document.createElement('input');     return ('validity' in input && 'badInput' in input.validity && 'patternMismatch' in input.validity && 'rangeOverflow' in input.validity && 'rangeUnderflow' in input.validity && 'stepMismatch' in input.validity && 'tooLong' in input.validity && 'tooShort' in input.validity && 'typeMismatch' in input.validity && 'valid' in input.validity && 'valueMissing' in input.validity); };

Browsers like IE11 and Edge will fail this test, even though they support many Validity State properties.

Check input validity

Next, we’ll write our own function to check the validity of a form field and return an object using the same structure as the Validity State API.

Setting up our checks

First, we’ll set up our function and pass in the field as an argument.

// Generate the field validity object var getValidityState = function (field) {     // Run our validity checks... };

Next, let’s setup some variables for a few things we’re going to need to use repeatedly in our validity tests.

// Generate the field validity object var getValidityState = function (field) {      // Variables     var type = field.getAttribute('type') || input.nodeName.toLowerCase(); // The field type     var isNum = type === 'number' || type === 'range'; // Is the field numeric     var length = field.value.length; // The field value length  };

Testing Validity

Now, we’ll create the object that will contain all of our validity tests.

// Generate the field validity object var getValidityState = function (field) {      // Variables     var type = field.getAttribute('type') || input.nodeName.toLowerCase();     var isNum = type === 'number' || type === 'range';     var length = field.value.length;      // Run validity checks     var checkValidity = {         badInput: false, // value does not conform to the pattern         rangeOverflow: false, // value of a number field is higher than the max attribute         rangeUnderflow: false, // value of a number field is lower than the min attribute         stepMismatch: false, // value of a number field does not conform to the stepattribute         tooLong: false, // the user has edited a too-long value in a field with maxlength         tooShort: false, // the user has edited a too-short value in a field with minlength         typeMismatch: false, // value of a email or URL field is not an email address or URL         valueMissing: false // required field without a value     };  };

You’ll notice that the valid property is missing from the checkValidity object. We can only know what it is after we’ve run our other tests.

We’ll loop through each one. If any of them are true, we’ll set our valid state to false. Otherwise, we’ll set it to true. Then, we’ll return the entire checkValidity.

// Generate the field validity object var getValidityState = function (field) {      // Variables     var type = field.getAttribute('type') || input.nodeName.toLowerCase();     var isNum = type === 'number' || type === 'range';     var length = field.value.length;      // Run validity checks     var checkValidity = {         badInput: false, // value does not conform to the pattern         rangeOverflow: false, // value of a number field is higher than the max attribute         rangeUnderflow: false, // value of a number field is lower than the min attribute         stepMismatch: false, // value of a number field does not conform to the stepattribute         tooLong: false, // the user has edited a too-long value in a field with maxlength         tooShort: false, // the user has edited a too-short value in a field with minlength         typeMismatch: false, // value of a email or URL field is not an email address or URL         valueMissing: false // required field without a value     };      // Check if any errors     var valid = true;     for (var key in checkValidity) {         if (checkValidity.hasOwnProperty(key)) {             // If there's an error, change valid value             if (checkValidity[key]) {                 valid = false;                 break;             }         }     }      // Add valid property to validity object     checkValidity.valid = valid;      // Return object     return checkValidity;  };

Writing the Tests

Now we need to write each of our tests. Most of these will involve using a regex pattern with the test() method against the field value.

badInput

For badInput, if the field is numeric, has at least one character, and at least one of the characters isn’t a number, we’ll return true.

badInput: (isNum && length > 0 && !/[-+]?[0-9]/.test(field.value))
patternMismatch

The patternMismatch property is one of the easier ones to test. This property is true if the field has a pattern attribute, has at least one character, and the field value doesn’t match the included pattern regex.

patternMismatch: (field.hasAttribute('pattern') && length > 0 && new RegExp(field.getAttribute('pattern')).test(field.value) === false)
rangeOverflow

The rangeOverflow property should return true if the field has a max attribute, is a numeric, and has at least one character that’s over the max value. We need to convert the string value of max to an integer using the parseInt() method.

rangeOverflow: (field.hasAttribute('max') && isNum && field.value > 1 && parseInt(field.value, 10) > parseInt(field.getAttribute('max'), 10))
rangeUnderflow

The rangeUnderflow property should return true if the field has a min attribute, is a numeric, and has at least one character that’s under the min value. Like with rangeOverflow, we need to convert the string value of min to an integer using the parseInt() method.

rangeUnderflow: (field.hasAttribute('min') && isNum && field.value > 1 && parseInt(field.value, 10) < parseInt(field.getAttribute('min'), 10))
stepMismatch

For the stepMismatch property, if the field is numeric, has the step attribute, and the attribute’s value isn’t any, we’ll use the remainder operator (%) to make sure that the field value divided by the step has no remainder. If there’s a remainder, we’ll return true.

stepMismatch: (field.hasAttribute('step') && field.getAttribute('step') !== 'any' && isNum && Number(field.value) % parseFloat(field.getAttribute('step')) !== 0)
tooLong

With tooLong, we’ll return true if the field has a maxLength attribute greater than 0, and the field value length is greater than the attribute value.

<tooLong: (field.hasAttribute('maxLength') && field.getAttribute('maxLength') > 0 && length > parseInt(field.getAttribute('maxLength'), 10))
tooShort

Conversely, with tooShort, we’ll return true if the field has a minLength attribute greater than 0, and the field value length is less than the attribute value.

tooShort: (field.hasAttribute('minLength') && field.getAttribute('minLength') > 0 && length > 0 && length < parseInt(field.getAttribute('minLength'), 10))
typeMismatch

The typeMismatch property is the most complicated to validate. We need to first make sure the field isn’t empty. Then we need to run one regex text if the field type is email, and another if it’s url. If it’s one of those values and the field value does not match our regex pattern, we’ll return true.

typeMismatch: (length > 0 && ((type === 'email' && !/^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$  /.test(field.value)) || (type === 'url' && !/^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*)(?::\d{2,5})?(?:[\/?#]\S*)?$  /.test(field.value))))
valueMissing

The valueMissing property is also a little complicated. First, we want to check if the field has the required attribute. If it does we need to run one of three few different tests, depending on the field type.

If it’s a checkbox or radio button, we want to make sure that it’s checked. If it’s a select menu, we need to make sure a value is selected. If it’s another type of input, we need to make sure it has a value.

valueMissing: (field.hasAttribute('required') && (((type === 'checkbox' || type === 'radio') && !field.checked) || (type === 'select' && field.options[field.selectedIndex].value < 1) || (type !=='checkbox' && type !== 'radio' && type !=='select' && length < 1)))

The complete set of tests

Here’s what the completed checkValidity object looks like with all of its tests.

// Run validity checks var checkValidity = {     badInput: (isNum && length > 0 && !/[-+]?[0-9]/.test(field.value)), // value of a number field is not a number     patternMismatch: (field.hasAttribute('pattern') && length > 0 && new RegExp(field.getAttribute('pattern')).test(field.value) === false), // value does not conform to the pattern     rangeOverflow: (field.hasAttribute('max') && isNum && field.value > 1 && parseInt(field.value, 10) > parseInt(field.getAttribute('max'), 10)), // value of a number field is higher than the max attribute     rangeUnderflow: (field.hasAttribute('min') && isNum && field.value > 1 && parseInt(field.value, 10) < parseInt(field.getAttribute('min'), 10)), // value of a number field is lower than the min attribute     stepMismatch: (field.hasAttribute('step') && field.getAttribute('step') !== 'any' && isNum && Number(field.value) % parseFloat(field.getAttribute('step')) !== 0), // value of a number field does not conform to the stepattribute     tooLong: (field.hasAttribute('maxLength') && field.getAttribute('maxLength') > 0 && length > parseInt(field.getAttribute('maxLength'), 10)), // the user has edited a too-long value in a field with maxlength     tooShort: (field.hasAttribute('minLength') && field.getAttribute('minLength') > 0 && length > 0 && length < parseInt(field.getAttribute('minLength'), 10)), // the user has edited a too-short value in a field with minlength     typeMismatch: (length > 0 && ((type === 'email' && !/^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$  /.test(field.value)) || (type === 'url' && !/^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*)(?::\d{2,5})?(?:[\/?#]\S*)?$  /.test(field.value)))), // value of a email or URL field is not an email address or URL     valueMissing: (field.hasAttribute('required') && (((type === 'checkbox' || type === 'radio') && !field.checked) || (type === 'select' && field.options[field.selectedIndex].value < 1) || (type !=='checkbox' && type !== 'radio' && type !=='select' && length < 1))) // required field without a value };

Special considerations for radio buttons

In supporting browsers, required will only fail on a radio button if no elements in the group have been checked. Our polyfill as it’s currently written will throw return valueMissing as true on an unchecked radio button even if another button in the group is checked.

To fix this, we need to get every button in the group. If one of them is checked, we’ll validate that radio button instead of the one that lost focus.

// Generate the field validity object var getValidityState = function (field) {          // Variables         var type = field.getAttribute('type') || input.nodeName.toLowerCase(); // The field type         var isNum = type === 'number' || type === 'range'; // Is the field numeric         var length = field.value.length; // The field value length          // If radio group, get selected field         if (field.type === 'radio' && field.name) {                 var group = document.getElementsByName(field.name);                 if (group.length > 0) {                         for (var i = 0; i < group.length; i++) {                                 if (group[i].form === field.form && field.checked) {                                         field = group[i];                                         break;                                 }                         }                 }         }          ...  };

Adding the validity property to form fields

Finally, if the Validity State API isn’t fully supported, we want to add or override the validity property. We’ll do this using the Object.defineProperty() method.

// If the full set of ValidityState features aren't supported, polyfill if (!supported()) {     Object.defineProperty(HTMLInputElement.prototype, 'validity', {         get: function ValidityState() {             return getValidityState(this);         },         configurable: true,     }); }

Putting it all together

Here’s the polyfill in its entirety. To keep our functions out of the global scope, I’ve wrapped it in an IIFE (immediately invoked function expression).

;(function (window, document, undefined) {      'use strict';      // Make sure that ValidityState is supported in full (all features)     var supported = function () {         var input = document.createElement('input');         return ('validity' in input && 'badInput' in input.validity && 'patternMismatch' in input.validity && 'rangeOverflow' in input.validity && 'rangeUnderflow' in input.validity && 'stepMismatch' in input.validity && 'tooLong' in input.validity && 'tooShort' in input.validity && 'typeMismatch' in input.validity && 'valid' in input.validity && 'valueMissing' in input.validity);     };      /**      * Generate the field validity object      * @param  {Node]} field The field to validate      * @return {Object}      The validity object      */     var getValidityState = function (field) {          // Variables         var type = field.getAttribute('type') || input.nodeName.toLowerCase();         var isNum = type === 'number' || type === 'range';         var length = field.value.length;         var valid = true;          // Run validity checks         var checkValidity = {             badInput: (isNum && length > 0 && !/[-+]?[0-9]/.test(field.value)), // value of a number field is not a number             patternMismatch: (field.hasAttribute('pattern') && length > 0 && new RegExp(field.getAttribute('pattern')).test(field.value) === false), // value does not conform to the pattern             rangeOverflow: (field.hasAttribute('max') && isNum && field.value > 1 && parseInt(field.value, 10) > parseInt(field.getAttribute('max'), 10)), // value of a number field is higher than the max attribute             rangeUnderflow: (field.hasAttribute('min') && isNum && field.value > 1 && parseInt(field.value, 10) < parseInt(field.getAttribute('min'), 10)), // value of a number field is lower than the min attribute             stepMismatch: (field.hasAttribute('step') && field.getAttribute('step') !== 'any' && isNum && Number(field.value) % parseFloat(field.getAttribute('step')) !== 0), // value of a number field does not conform to the stepattribute             tooLong: (field.hasAttribute('maxLength') && field.getAttribute('maxLength') > 0 && length > parseInt(field.getAttribute('maxLength'), 10)), // the user has edited a too-long value in a field with maxlength             tooShort: (field.hasAttribute('minLength') && field.getAttribute('minLength') > 0 && length > 0 && length < parseInt(field.getAttribute('minLength'), 10)), // the user has edited a too-short value in a field with minlength             typeMismatch: (length > 0 && ((type === 'email' && !/^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$  /.test(field.value)) || (type === 'url' && !/^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*)(?::\d{2,5})?(?:[\/?#]\S*)?$  /.test(field.value)))), // value of a email or URL field is not an email address or URL             valueMissing: (field.hasAttribute('required') && (((type === 'checkbox' || type === 'radio') && !field.checked) || (type === 'select' && field.options[field.selectedIndex].value < 1) || (type !=='checkbox' && type !== 'radio' && type !=='select' && length < 1))) // required field without a value         };          // Check if any errors         for (var key in checkValidity) {             if (checkValidity.hasOwnProperty(key)) {                 // If there's an error, change valid value                 if (checkValidity[key]) {                     valid = false;                     break;                 }             }         }          // Add valid property to validity object         checkValidity.valid = valid;          // Return object         return checkValidity;      };      // If the full set of ValidityState features aren't supported, polyfill     if (!supported()) {         Object.defineProperty(HTMLInputElement.prototype, 'validity', {             get: function ValidityState() {                 return getValidityState(this);             },             configurable: true,         });     }  })(window, document);

Adding this to your site will extend the Validity State API back to IE9, and add missing properties to partially supporting browsers. (You can download the polyfill on GitHub, too.)

The form validation script we wrote in the last article also made use of the classList API, which is supported in all modern browsers and IE10 and above. To truly get IE9+ support, we should also include the classList.js polyfill from Eli Grey.

Article Series:

  1. Constraint Validation in HTML
  2. The Constraint Validation API in JavaScript
  3. A Validity State API Polyfill (You are here!)
  4. Validating the MailChimp Subscribe Form (Coming Soon!)

Form Validation Part 3: A Validity State API Polyfill is a post from CSS-Tricks

CSS-Tricks

Add a Comment

Your email address will not be published. Required fields are marked *

21