UX Design and Development course

HTML forms validation

HTML5 validation has come a long way, but it still has a long way to go. One of my personal issues with using HTML5 validation is, when you designate a field to be required it's state is invalid until an action is present. This means, if you use any CSS or JavaScript to test the state of the field, it will return invalid until the user interacts with the field.

I don't care for this UX because in essence, you are telling the user that they have done something wrong before they had a chance to do anything right.

Another issue with HTML5 validation is it's poor support on mobile. The default experiences that appear in desktop browsers are not always, if at all, present on mobile browsers.

Following are some examples as how to use HTML5 forms, some with validation:

Required URL / URL keypad

<label for="url">enter a URL:</label>
<input required="required" id="url" type="url" placeholder="please enter a URL" title="Please enter a valid http:// URL into the field"/>

Required number / Number Keypad

<label for="qty">enter a number</label>
<input required="required" type="number" id="qty" min="0" max="100" step="1" placeholder="Gimmie a number from 1 to 100" title="enter a number"/>

Email keypad

<label for="email">enter your email</label>
<input type="email" id="email" placeholder="john.doe@mail.com"/>

Text keypad

<label for="name">enter your name</label>
<input id="name" type="text" placeholder="full name"/>

Required number / number keypad

<label for="partNumber">Enter your part number</label>
<input type="number" id="partNumber" required title="Please enter 3 characters [A-Z] and 4 numbers [0-9]" pattern="[A-Z]{3}[0-9]{4}" />

Phone keypad (text hack w/pattern)

<label for="tabNumber">Enter your tab number</label>
<input id="tabNumber" type="text" pattern="[0-9]*">

Completed JSBin

JS Bin

More reading resources