HTML5 Email Validation

Question

It is said  With HTML5  we need no more js or a server side code to check if the user s input is a valid email or url address   How can I validate email after a user enter  and without JS how to display a message if the user enter a wrong form of his her email address    lt input type  email  pattern                 placeholder  Enter your email  gt   lt input type  submit  value  Submit  gt

User · Answer

According to MDN  this RegExp is ok to validate emails  as emails that meet specifications should match it      a-zA-Z0-9      amp               -    a-zA-Z0-9     a-zA-Z0-9-  0 61     a-zA-Z0-9         a-zA-Z0-9     a-zA-Z0-9-  0 61  a-zA-Z0-9

User · Answer

The input type email page of the www w3 org site notes that an email address is any string which matches the following regular expression      a-zA-Z0-9      amp                -    a-zA-Z0-9-        a-zA-Z0-9-         Use the required attribute and a pattern attribute to require the value to match the regex pattern    lt input     type  text      pattern     a-zA-Z0-9      amp                -    a-zA-Z0-9-        a-zA-Z0-9-            required  gt

User · Answer

You can follow this pattern also   lt form action   action page php  gt    E-mail   lt input type  email  name  email  pattern   a-z0-9    -    a-z0-9 -     a-z  2     gt     lt input type  submit  gt   lt  form gt    Ref   In W3Schools

User · Answer

Here is the example I use for all of my form email inputs  This example is ASP NET  but applies to any     lt asp TextBox runat  server  class  form-control  placeholder  Contact s email       name  contact email  ID  contact email  title  Contact s email  format  xxx xxx xxx        type  email  TextMode  Email  validate  required true      pattern   a-zA-Z0-9     amp                -    a-zA-Z0-9-      a-zA-Z0-9-       gt   lt  asp TextBox gt    HTML5 still validates using the pattern when not required  Haven t found one yet that was a false positive    This renders as the following HTML    lt input class  form-control  placeholder  Contact s email       name  contact email  id  contact email  type  email       title  Contact s email  format  xxx xxx xxx        pattern   a-zA-Z0-9     amp amp                -    a-zA-Z0-9-      a-zA-Z0-9-      gt

User · Answer

A bit late for the party  but this regular expression helped me to validate email type input in the client side  Though  we should always do verification in server side also    lt input type  email  pattern     a-zA-Z0-9  -           0-9  1 3    0-9  1 3    0-9  1 3        a-zA-Z0-9 -          a-zA-Z  2 4   0-9  1 3          gt    You can find more regex of all kinds here

User · Answer

TL DR  The only 100  correct method is to check for  -sign somewhere in the entered email address and then posting a validation message to given email address  If they can follow validation instructions in the email message  the inputted email address is correct  Long answer  David Gilbertson wrote about this years ago   There are two questions we need to ask   Did the user understand that they were supposed to type an email address into this field  Did the user correctly type their own email address into this field   If you have a well laid-out form with a label that says    email     and the user enters an         symbol somewhere  then it   s safe to say they understood that they were supposed to be entering an email address  Easy  Next  we want to do some validation to ascertain if they correctly entered their email address  Not possible        Any mistype will definitely result in an incorrect email address  but only maybe result in an invalid email address        There is no point in trying to work out if an email address is    valid     A user is far more likely to enter a wrong and valid email address than they are to enter an invalid one   In other words  it s important to notice that any kind of string based validation can only check if the syntax is invalid  It cannot check if the user can actually see the email  e g  because the user already lost credentials  typed address of somebody else or typed work email instead of personal email address for a given use case   How often the question you re really after is  quot is this email syntactically valid quot  instead of  quot can I communicate with the user using given email address quot   If you validate the string more than  quot does it contain   quot   you re trying to answer the former question  Personally  I m always interested about the latter question only  In addition  some email addresses that may be syntactically or politically invalid  do work  For example  postmaster ai does technically work even though TLDs should not have MX records  Also see discussion about email validation on the WHATWG mailing list  where HTML5 is designed in the first place

User · Answer

document getElementById  email   validity valid   seems to be true when field is either empty or valid  This also has some other interesting flags     Tested in Chrome

User · Answer

I know you are not after the Javascript solution however there are some things such as the customized validation message that  from my experience  can only be done using JS   Also  by using JS  you can dynamically add the validation to all input fields of type email within your site instead of having to modify every single input field   var validations        email       a-zA-Z0-9   -        a-zA-Z0-9-         a-zA-Z0-9  2 4        Please enter a valid email address        document  ready function           Check all the input fields of type email  This function will handle all the email addresses validations        input type email    change  function               Set the regular expression to validate the email          validation   new RegExp validations  email   0               validate the email value against the regular expression         if   validation test this value                   If the validation fails then we show the custom error message             this setCustomValidity validations  email   1                return false            else                  This is really important  If the validation is successful you need to reset the custom error message             this setCustomValidity

User · Answer

Using HTML 5 Just make the input email like      x000D   x000D   lt input type  email   gt  x000D   x000D   x000D    When the user hovers over the input box  they will a tooltip instructing them to enter a valid email  However  Bootstrap forms have a much better Tooltip message to tell the user to enter an email address and it pops up the moment the value entered does not match a valid email

User · Answer

It is very difficult to validate Email correctly simply using HTML5 attribute  pattern    If you do not use a  pattern  someone  will be processed  which is NOT valid email   Using pattern   a-zA-Z  3    a-zA-Z  3      1  a-zA-Z  2      1  a-zA-Z  2    will require the format to be someone email com however if the sender has a format like someone email net au  or similar  will not be validated to fix this you could put pattern   a-zA-Z  3    a-zA-Z  3      1  a-zA-Z  2      1  a-zA-Z  2      1  a-zA-Z  2    this will validate   com au or  net au or alike     However using this  it will not permit someone email com to validate   So as far as simply using HTML5 to validate email addresses is still not totally with us  To Complete this you would use something like this    lt form gt   lt input id  email  type  text  name  email  pattern   a-zA-Z  3    a-zA-Z  3      1  a-zA-Z  2      1  a-zA-Z  2    required placeholder  Enter you Email  gt   lt br gt   lt input type  submit  value  Submit The Form  gt   lt  form gt    or    lt form gt   lt input id  email  type  text  name  email  pattern   a-zA-Z  3    a-zA-Z  3      1  a-zA-Z  2      1  a-zA-Z  2      1  a-zA-Z  2    required placeholder  Enter you Email  gt   lt br gt   lt input type  submit  value  Submit The Form  gt   lt  form gt    However  I do not know how to validate both or all versions of email addresses using HTML5 pattern attribute

User · Answer

Using  a-zA-Z0-9 -   1    a-zA-Z -  2      1  a-zA-Z  2   for somemail email com   somemail email com vn

User · Answer

In HTML5 you can do like this    lt form gt   lt input type  email  placeholder  Enter your email  gt   lt input type  submit  value  Submit  gt   lt  form gt    And when the user press submit  it automatically shows an error message like

[html] HTML5 Email Validation

Examples related to html

Examples related to email