The Modern Web

Client-side Form Validation

The new input types are really useful, but perhaps HTML5’s greatest gift to developers is native client-side error checking. Checking the contents of a form before it’s submitted is extremely important for security and usability, and until now, we haven’t had a simple way to do so, although many hundreds of JavaScript libraries have been written to work around this.

Now, with native form validation, many browsers will automatically warn you that the value you’ve entered into a field doesn’t match the input type. In Firefox, for example, if you type only numbers into an email input or omit the http:// protocol from the start of a URL in a url input, a glowing red rule around the input field warns you that the values ...