HTML5 Email Validation

In HTML5 you can do like this:

<form> <input type="email" placeholder="Enter your email"> <input type="submit" value="Submit"> </form> 

And when the user press submit, it automatically shows an error message like:

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.!#$%&’*+/=?^_`{|}~-]+@[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.

<input type="text" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required > 

Using [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,} for [email protected] / [email protected]

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.

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.

<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})(\]?)$"> 

You can find more regex of all kinds here.

TL;DR: The only 100% correct method is to simply check for @-sign somewhere in the entered email address and then send a validation message to given email address. If the end user can follow validation instructions in that email message, the entered email address is correct.

Long answer:

David Gilbertson wrote about this years ago:

There are two questions we need to ask:

1. Did the user understand that they were supposed to type an email address into this field?
2. 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 accidentally typed work email address instead of their personal email address for the given use case). How often the question you're really after is "is this email syntactically valid" instead of "can I communicate with the user using given email address"? If you validate the string more than "does it contain @", you're trying to answer the former question. Personally, I'm always interested about the latter question only, namely can the recipient actually read the message?

For example, if I accidentally type [email protected] as my email address, do you think you can truly validate that string without trying to send me an email message? That's obviously syntactically valid email address but I cannot read any message sent to that address. Was that the type of email address you were actually trying to collect?

In addition, some email addresses that may be syntactically or politically invalid, do work. For example, postmaster@ai does work in practice even though TLDs should not have MX records so this is syntactically invalid address. Also see discussion about email validation on the WHATWG mailing list (where HTML5 is designed in the first place).

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(''); } }); }) 

Here is the example I use for all of my form email inputs. This example is ASP.NET, but applies to any:

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" name="contact_email" ID="contact_email" title="Contact's email (format: [email protected])" type="email" TextMode="Email" validate="required:true" pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" > </asp:TextBox> 

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:

<input class="form-control" placeholder="Contact's email" name="contact_email" id="contact_email" type="email" title="Contact's email (format: [email protected])" pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*"> 

You can follow this pattern also

<form action="/action_page.php"> E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"> <input type="submit"> </form> 

Ref : In W3Schools

According to MDN, this RegExp is ok to validate emails, as emails that meet specifications should match it.

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[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])?)*$/ 

Using HTML 5,Just make the input email like :

<input type="email"/>

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.

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 [email protected] however if the sender has a format like [email protected] (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 [email protected] 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:

<form> <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"> <br> <input type="submit" value="Submit The Form"> </form> 

or:

<form> <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"> <br> <input type="submit" value="Submit The Form"> </form> 

However, I do not know how to validate both or all versions of email addresses using HTML5 pattern attribute.

<input type="email"> is quite enough (to catch preemptively errors on the frontend) if, additionally, you have a backend email validation in place.

Otherwise, if you just want to check quickly for a string is a valid email, trusting the embedded browser's email validation rule:

• create an in-memory INPUT type="email" Element and check its validity property
• since (for some reasons (at least in Chromium) the validator ignores the URL host domain) you want to make sure the domain .[a-z] exists, you can additionally test it with a really small regex like /\.[a-z]+$/i

Example:

const isValidEmail = value => Object.assign(document.createElement("input"), {type: "email", value }).validity.valid && /\.[a-z]+$/i.test(value); console.log(isValidEmail("josephsemail.com")); // false console.log(isValidEmail("[email protected]")); // true console.log(isValidEmail("[email protected]")); // true console.log(isValidEmail("sandra+tag@gmail")); // false thanks to the /\.[a-z]+$/i check