HTML5 Email input pattern attribute

I’m trying to make a html5 form that contains one email input, one check box input, and one submit input. I'm trying to use the pattern attribute for the email input but I don't know what to place in this attribute. I do know that I'm supposed to use a regular expression that must match the JavaScript Pattern production but I don't know how to do this.

What I'm trying to get this attribute to do is to check to make sure that the email contains one @ and at least one or more dot and if possible check to see if the address after the @ is a real address. If I can't do this through this attribute then I'll consider using JavaScript but for checking for one @ and one or more dot I do want to use the pattern attribute for sure.

The pattern attribute needs to check for:

1. Only one @
2. One or more dot
3. And if possible check to see if the address after the @ is a valid address

An alternative to this one is to use a JavaScript but for all the other conditions I do not want to use a JavaScript.

I had this exact problem with HTML5s email input, using Alwin Keslers answer above I added the regex to the HTML5 email input so the user must have .something at the end.

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

This is a dual problem (as many in the world wide web world).

You need to evaluate if the browser supports html5 (I use Modernizr to do it). In this case if you have a normal form the browser will do the job for you, but if you need ajax/json (as many of everyday case) you need to perform manual verification anyway.

.. so, my suggestion is to use a regular expression to evaluate anytime before submit. The expression I use is the following:

var email = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

This one is taken from http://www.regular-expressions.info/ . This is a hard world to understand and master, so I suggest you to read this page carefully.

Unfortunately, all suggestions except from B-Money are invalid for most cases.

Here is a lot of valid emails like:

• gü[email protected] (German umlaut)
• антон@россия.рф (Russian, рф is a valid domain)
• chinese and many other languages (see for example International email and linked specs).

Because of complexity to get validation right, I propose a very generic solution:

<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />

It checks if email contains at least one character (also number or whatever except another "@" or whitespace) before "@", at least two characters (or whatever except another "@" or whitespace) after "@" and one dot in between. This pattern does not accept addresses like lol@company, sometimes used in internal networks. But this one could be used, if required:

<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />

Both patterns accepts also less valid emails, for example emails with vertical tab. But for me it's good enough. Stronger checks like trying to connect to mail-server or ping domain should happen anyway on the server side.

BTW, I just wrote angular directive (not well tested yet) for email validation with novalidate and without based on pattern above to support DRY-principle:

.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
	var EMAIL_PATTERN = '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$';
	var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, 'i');
	return {
		require: 'ngModel',
		link: function(scope, elem, attrs, ngModel){
			function validate(value) {
				var valid = angular.isUndefined(value)
					|| value.length === 0
					|| EMAIL_REGEXP.test(value);
				ngModel.$setValidity('email', valid);
				return valid ? value : undefined;
			}
			ngModel.$formatters.unshift(validate);
			ngModel.$parsers.unshift(validate);
			elem.attr('pattern', EMAIL_PATTERN);
			elem.attr('title', 'Invalid email address');
		}
	};
}])

Usage:

<input type="text" is-email />

For B-Money's pattern is "@" just enough. But it decline two or more "@" and all spaces.

In HTML5 you can use the new 'email' type: http://www.w3.org/TR/html-markup/input.email.html

For example:

<input type="email" id="email" />

If the browser implements HTML5 it will make sure that the user has entered a valid email address in the field. Note that if the browser doesn't implement HTML5, it will be treated like a 'text' type, ie:

<input type="text" id="email" />

<input name="email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="form-control" placeholder="Email*" id="email" required="">

This is modified version of above solution which accept capital letter as well.

This is the approach I'm using and you can modify it based on your needs:

^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

Explanation:

1. We want to make sure that the e-mail address always starts with a word:

   ^[\w]

A word is any character, digit or underscore. You can use [a-zA-Z0-9_] pattern, but it will give you the same result and it's longer.

2. Next, we want to make sure that there is at least one such character:

   ^[\w]{1,}

3. Next, we want to allow any word, digit or special characters in the name. This way, we can be sure that the e-mail won't start with the dot, but can contain the dot on other than the first position:

   ^[\w]{1,}[\w.+-]

4. And of course, there doesn't have to be any of such character because e-mail address can have only one letter followed by @:

   ^[\w]{1,}[\w.+-]{0,}

5. Next, we need the @ character which is mandatory, but there can be only one in the whole e-mail:

   ^[\w]{1,}[\w.+-]{0,}@

6. Right behind the @ character, we want the domain name. Here, you can define how many characters you want as minimum and from which range of characters. I'd go for all word characters including the hyphen [\w-] and I want at least two of them {2,}. If you want to allow domains like t.co, you would have to allow one character from this range {1,}:

   ^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}

7. Next, we need to deal with two cases. Either there's just the domain name followed by the domain extension, or there's subdomain name followed by the domain name followed by the extension, for example, abc.com versus abc.co.uk. To make this work, we need to use the (a|b) token where a stands for the first case, b stands for the second case and | stands for logical OR. In the first case, we will deal with just the domain extension, but since it will be always there no matter the case, we can safely add it to both cases:

   ^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][a-zA-Z]{2,})

This pattern says that we need exactly one dot character followed by letters, no digits, and we want at least two of them, in both cases.

8. For the second case, we will add the domain name in front of the domain extension, thus making the original domain name a subdomain:

   ^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})

The domain name can consist of word characters including the hyphen and again, we want at least two characters here.

9. Finally, we need to mark the end of the whole pattern:

   ^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

10. Go here and test if your e-mail matches the pattern: https://regex101.com/r/374XLJ/1

If you don't want to write a whitepaper about Email-Standards, then use my following example which just introduce a well known CSS-attribute (text-transform: lowercase) to solve the problem:

If you do want the data not to reach the server side as lower case value, then you should go this way:

<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" style="text-transform: lowercase" placeholder="enter email here ..." required />

---

If you do want the data to reach the server side as lower case value, then you should go this way:

  const emailElmtRegex = new RegExp('[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}');
document.getElementById("entered").innerHTML = "";
document.getElementById("send").innerHTML = ""

function lower() {
    let emailElmt = document.getElementById("email");
    document.getElementById("entered").innerHTML = "Entered: " + emailElmt.value;
    emailElmt.value = emailElmt.value.toLowerCase();

    if (emailElmtRegex.test(emailElmt.value)) {
        document.getElementById("send").innerHTML = "Send: " + emailElmt.value;
    } else {
        document.getElementById("send").innerHTML = ""
    }
}

input[type=email]#email {
   "text-transform: lowercase
}

<!DOCTYPE html>
<html>
<body>
<h3>Client Side to Server Side - Simple Email validation!</h3>
<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" placeholder="enter email here ..." required oninput="lower()" />

<p id="entered">Entered:</p>
<p id="send">Send:</p>

</body>
</html>

<input type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,6}$">

Demo - Test the email input

You probably want something like this. Notice the attributes:

• required
• type=email
• autofocus
• pattern

<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="[email protected]" autofocus required pattern="[^ @]*@[^ @]*" />

I used following Regex to satisfy for following emails.

[email protected] # Minimum three characters
[email protected] # Accepts Caps as well.
[email protected] # Accepts . before @

Code

<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />

One more solution that is built on top of w3org specification.
Original regex is taken from w3org.
The last "* Lazy quantifier" in this regex was replaced with "+ One or more quantifier".
Such a pattern fully complies with the specification, with one exception: it does not allow top level domain addresses such as "foo@com"

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

<input type="email" name="email" id="email" value="" placeholder="Email" required />

documentation http://www.w3.org/TR/html-markup/input.email.html

A simple good answer can be an input like this:

2021 UPDATED & Support IE10+

^(?![_.-])((?![_.-][_.-])[a-zA-Z\d_.-]){0,63}[a-zA-Z\d]@((?!-)((?!--)[a-zA-Z\d-]){0,63}[a-zA-Z\d]\.){1,2}([a-zA-Z]{2,14}\.)?[a-zA-Z]{2,14}$

input:not(:placeholder-shown):invalid{
  background-color:pink;
  box-shadow:0 0 0 2px red;
}
/* :not(:placeholder-shown) = when it is empty, do not take as invalid */
/* :not(:-ms-placeholder-shown) use for IE11 */
/* :invalid = it is not followed pattern or maxlength and also if required and not filled */
/* Note: When autocomplete is on, it is possible the browser force CSS to change the input background and font color, so i used box-shadow for second option*/

Type your Email:
<input 
  type="email"
  name="email"
  lang="en"
  maxlength="254"
  value=""
  placeholder="[email protected]"
  autocapitalize="off" spellcheck="false" autocorrect="off"
  autocomplete="on"
  required=""
  inputmode="email"
  pattern="(?![_.-])((?![_.-][_.-])[a-zA-Z\d_.-]){0,63}[a-zA-Z\d]@((?!-)((?!--)[a-zA-Z\d-]){0,63}[a-zA-Z\d]\.){1,2}([a-zA-Z]{2,14}\.)?[a-zA-Z]{2,14}">

According to the following:

• Resources about standard Email format: https://stackoverflow.com/questions/2049502/what-characters-are-allowed-in-an-email-address
• Resources about standard HTML Email input attributes:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email

• Maximum length of domain in URL (254 Character)
• Longest possible Subdomain(Maybe =0-64 character), Domain (=0-64 character), First Level Extension(=2-14 character), Second Level Extension(Maybe =2-14 character) as @Brad motioned.
• Avoiding of not usual but allowed characters in Email name and just accepting usual characters that famous free email services like Outlook, Yahoo, Gmail etc. will just accept them. It means accepting just : dot (.), dash (-), underscore (_) just in between a-z (lowercase) or A-Z (uppercase - just because it is common - thanks to Badri Paudel) and numbers and also not accepting double of them next to each other and maximum 64 characters.

Note: Right now, longer address and even Unicode characters are possible in URL and also a user can send email to local or an IP, but i think still it is better to not accepting unusual things if the target page is public.

Explain of the regex:

1. (?![_.-]) not started with these: _ . -
2. ((?!--)[a-zA-Z\d-]) accept a till z and A till Z and numbers and - (dash) but not --
3. ((?![_.-][_.-])[a-zA-Z\d_.-]) from a till z lowercase and A till Z uppercase and numbers and also _ . - accepted but not any kind of double of them.
4. {0,63} Length from zero till 63 (the second group [a-zA-Z\d] will fill the +1 but just do not let the character be _ . -)
5. @ The at sign
6. (rule){1,2} this rule should exist 1 or 2 times. (for Subdomain & Domain)
7. (rule)? or ((rule)|) not exist or if exist should follow the rule. (for Second Level Extension)
8. \. Dot

Note: For being more strict about uppercase you can remove all A-Z from the pattern.

Note: For being not strict about Persian/Arabic numbers ٠١٢٣٤٥٦٧٨٩ ۰۱۲۳۴۵۶۷۸۹ you can add \u0660-\u0669\u06f0-\u06f9 next to all \d in the pattern.

Try the RegEx: https://regexr.com/64kjf

Note: Using ^...$ is not necessary in input pattern, but for general RegEx testing will be needed. It means start / end of the string should be same as the rule, not just a part.

Explaining of attributes:

type="email" or type="text" (email In modern browsers will help for the validation also it don't care spaces in start or end for the validation or getting value)

name="email" autocomplete="on" To browser remember easy last filled input for auto completing

lang="en" Helping for default input be English

inputmode="email" Will help to touch keyboards be more compatible

maxlength="254" Setting the maximum length of the input

autocapitalize="off" spellcheck="false" autocorrect="off" Turning off possible wrong auto correctors in browser

required="" This field is required to if it was empty or invalid, form be not submitted

pattern="..." The regex inside will check the validation

---

\w=a-zA-Z\d_ so:

Lightest version
(?![_.-])((?![_.-][_.-])[\w.-]){0,63}[a-zA-Z\d]@((?!-)((?!--)[a-zA-Z\d-]){0,63}[a-zA-Z\d]\.){1,2}([a-zA-Z]{2,14}\.)?[a-zA-Z]{2,14}

Updated 2018 Answer

Go here http://emailregex.com/

Javascript:

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

The following regex pattern should work with most emails, including russian emails.

[^@]+@[^\.]+\..+

I have tested the following regex which gives the same result as Chrome Html email input validation.

[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*

You can test it out on this website: regex101

^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$

Email Validation Regex using Html5 with angular as below

<div class="item">
      <p>Email Address<span class="required">*</span></p>
      <input type="email" name="to" id="to" placeholder="Email address" tabindex="6" required
        [(ngModel)]="pancard.email" #to="ngModel" pattern="[a-zA-Z0-9._-]*@[a-zA-Z]*\.[a-zA-Z]{2,3}" />
        <div class="alertField" *ngIf="to.invalid && (to.dirty || to.touched)">
          <div *ngIf="to.errors?.['required']">Email is required </div>
          <div *ngIf="to.errors?.['pattern']">Invalid Email Id.</div>
        </div>
    </div>

It is working example..

pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}"

<input type="email"  class="form-control" id="driver_email" placeholder="Enter Driver Email" name="driver_email" pattern="[a-z0-9._%+-]{1,40}[@]{1}[a-z]{1,10}[.]{1}[a-z]{3}" required="">

Try this

pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"