Regular expression for validating first name
The best thing about HTML5 attributes is that they have no effect whatsoever on unsupported browsers, so older versions of Internet Explorer will act as if they are not present and just run the Java Script validation as before.
At this stage both Firefox and Opera enforce HTML5 validation attributes in the browser while Safari only lets you use them with Java Script or for CSS effects.
Because the input type obscures the text typed, you should let the user confirm that they haven't made a mistake.
Here are some simple steps to make the process more secure.
Remember that, as Java Script isn't available in all browsers, you should also use server-side scripting to validate all data before recording it in a database or elsewhere.
You might also want to spice up your forms using HTML5 Form Validation as we've done further down the page.
The red/green markers have been implemented using CSS: In this example it should be clear to the user that the form can only be submitted once all three green ticks appear.
In any case browsers such as Firefox and Opera will enforce the HTML5 validation rules and present messages as shown here: Presumably the browser messages will change according to the users language - something that would never be possible using only Java Script.