Customizing HTML Form Validation

By  on  

Form validation has always been my least favorite part of web development. You need to duplicate validation on both client and server sides, handle loads of events, and worry about form element styling. To aid form validation, the HTML spec added some new form attributes like required and pattern to act as very basic validation. Did you know, however, that you can control native form validation using JavaScript?

validity

Each form element (input, for example) provides a validity property which represents a ValidityState. ValidityState looks something like this:

// input.validity
{
  badInput: false,
  customError: true,
  patternMismatch: false,
  rangeOverflow: false,
  rangeUnderflow: false,
  stepMismatch: false,
  tooLong: false,
  tooShort: false,
  typeMismatch: false,
  valid: false,
  valueMissing: true
}

Each property in the ValidityState can roughly match a specific validation issue: valueMissing would match the required attribute, tooLong and tooShort match minLength and maxLength, etc.

Checking Validity and Setting a Custom Validation Message

Each form field provides a default error message for each error type, but setting a more custom message per your application is likely better. You can use the form field's setCustomValidity to create your own message:

// Check validity
input.checkValidity();

if(input.validity.valueMissing) {
  input.setCustomValidity('This is required, bro!  How did you forget?');
} else {
  // Clear any previous error
  input.setCustomValidity('');
}

Simply setting the message by setCustomValidity doesn't show the message, however.

reportValidity

To get the error to display to the user, use the form element's reportValidity method:

// Show the error!
input.reportValidity();

The error tooltip will immediately display on the screen. The following example displays the error every five seconds:

See the Pen Untitled by David Walsh (@darkwing) on CodePen.

Having hooks into the native form validation system is so valuable and I wish developers used it more. Every website has its own client side validation styling, event handling, etc. Let's use what we've been provided!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

  • By
    Create WordPress Page Templates with Custom Queries

    One of my main goals with the redesign was to make it easier for visitors to find the information that was most popular on my site. Not to my surprise, posts about MooTools, jQuery, and CSS were at the top of the list. What...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!