Contact forms are one of the most common sources of user input. Filling out one of these things is fairly straightforward (right?); just type your full name (since when does your name contain numbers?) in this box here, your email address over there, and look, a place to write nothing but great comments about the websites author (yes, I mean you!).
We all dream of the perfect user; a user who just happens to know what you want, at any given time and is impervious to human error! And then suddenly, reality sinks in, you wake up, fall out of bed and knock your head against the night table. You realize that a little client side validation (as tedious as it may seem) might be beneficial to you as well as your visitors.
For now, Web Developers write their own scripts but in the future, HTML 5 may be the go-to guy for a little form validation. Take a look at the following code:
When the user tries to submit the form the user agent checks if all conditions are being met and if that's the case it submits the form otherwise it shows an error message to the user. The required attribute ensures that the field is not left blank and will prompt the user if they don't enter a value. However, required does not take into account white spaces. In addition to input types such as password and text, HTML 5 introduces 13 new input types: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, and color. As seen in the above example, the Email type checks to see whether the input is a valid email address while url makes sure that it is a well formed url.
Here are a few more attributes to pique your interest:
- pattern - Allows you to validate input using a regular expression.
- min and max - Used to indicate the allowed range of values.
- placeholder - For placing default field text.
For more on the input type and other attributes, check out W3.org for a complete list.
