Validate Email Addresses with HTML5
To have users' browsers validate email addresses as they enter them in your HTML web form:
- Make sure you use HTML5.
- You can do that by using <!DOCTYPE html>.
- Specify the email address form input element as type "email". (See below for an example.)
Browsers that do not recognize type="email" should (and, as far as one can tell, all will) treat the input field like an ordinary type="text" field.
HTML5 Email Address Validation Caveats
Note that HTML email address validation will only work in browsers that support HTML5 and validate form element input. For other browsers and backup, you can still validate email addresses using PHP, for example.
Browsers that support HTML5 email address validation include Safari 5+, Google Chrome 6+, Mozilla Firefox 4+ and Opera 10+. Safari 5 and Google Chrome 6-8 will not accept invalid email address input but, unlike the other browsers, will not help the user correct the error.
HTML5 Email Address Validation Example
To engage users' browsers to validate email addresses with HTML5, use the following code, for instance:
<!DOCTYPE html> <html lang="en"> <head> <title><input type="email"></title> </head> <body> <form> <input type="email" placeholder="firstname.lastname@example.org"> <input type="submit"> </form> </body> </html>