While it would be great to see something like this in every browser, for now you probably need to stick with the ubiquitous Java Script plugins. Arjen, You're correct: and it's not just the plus sign ( ), although I have to admit, I've never seen that used in an email address before.While the code we're using is slightly more complicated, this should get you started: Some of the articles below, particularly the first two, provide other style/scripting options and solutions for supporting older browsers. Wikipedia has a list of potentially valid email formats here: en.wikipedia.org/wiki/Email_address#Valid_email_addresses Most browsers accept [email protected] as valid for email input as it can be technically correct in some situations - on an intranet for example. How do you only show the fields as 'invalid' after the user leaves (blurs? It's ugly to have ready icons displayed when the page loads.In other web browsers they can be used in combination with the .Obviously neither example is very limiting, but it will prevent people from entering completely wrong values, such as phone number, strings with multiple '@'s or spaces.
Using a service such as Spritebaker or other techniques, the above style settings become: The above code can now be copied directly to your CSS style sheet. :[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f] | \[\x01-\x09\x0b\x0c\x0e-\x7f])*") @ (? The fallback for the placeholder attribute in this article is far from accurate.We have a separate article with details on validating passwords using HTML5, including Java Script code for customising the browser generated alert messages. You just need to pick one and then remove the portion that detects the protocol (xxx://).Other HTML5 input types include: -related options do have an effect at least in Opera, with pop-up calendars and other devices appearing to assist with input. But as you see, lots of strange looking URLs are actually valid.For a more detailed introduction to HTML5 form validation you can find some great articles linked under References below.In this article we intend to present only a number of simple examples to get you started, covering the basic form elements.