Html5 Validation Tips - Patterns Phone, Email... etc

Here are some of my favorite HTML5 validation scripts...  They are simple quick references.  Feel free to use or expand on them.

Of course, using a blog, I will be using to wrap the html tags with a "[" instead of the LessThan and GreaterThan signs... so it shows up properly...  But you can figure it out from there...

We use the "pattern" to do validation RegEx validation.

The "title" is quite handy... it is used in any validation... showing that name in the error message.

PHONE:
[input  type="tel" name="phone" id="phone" maxlength="25"  required="required" title="Phone" pattern=".{5,15}" /]

EMAIL:
[input  type="email" name="email" maxlength="50" required="required" title="Email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" /]

DATE:
[input  type="date" name="court_date" title="Court Date" min="2013-06-01" max="2099-12-30"  step="1" required="required" /]
Note: you don't need a pattern on the date one.  Normally input is in local format... like dd mm yyyy   However, it tends to send using yyyy-mm-dd.   Just pick it up and parse as a date object with the server and you will be fine.

DATA LISTS - Auto Suggest
 [input  type="text" name="ticketfor" maxlength="50"  required="required" list="commonviolations" title="Violation" /]
                [datalist id="commonviolations"]                
                    [option value="speeding" /]
                    [option value="running a red light" /]
                    [option value="not signaling" /]
                   [option value="crossing the median" /]
                    [option value="driving in car pool lane" /]
                [/datalist>


AUDIO / VIDEO
Good samples here:  http://www.w3schools.com/html/html5_audio.asp

Do we still need other javascript validation? Server side validation?

My answer is yes to both.  This is just one more layer of validation.  Standard JavaScript form validation is a good tool to ensure correct input - especially for older browsers which don't handle the html5 very well.  Server side validation is a good security idea - for users who turn off JavaScript and bad robots who often don't use it.

One tip... the Date is only implemented in a few browsers.  I love the one that shows up in my Android phone.  However, this is taking longer to get accepted. The standard JavaScript will help bridge this.  Normally, if you do the standard javascript on submit... it will occur after any recognized HTML5 validation has passed.

Other Misc:

Telephone Link:  [a href="tel:+18055551212"](805) 555-1212[/a]
This is useful for mobile phones...


Good HTML5 Resources

http://www.w3schools.com/html/html5_form_input_types.asp

http://www.techrepublic.com/blog/10things/10-new-html5-tags-you-need-to-know-about/3219