Html5 Email Input Pattern Attribute

HTML5 Email input pattern attribute

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.

Html5 pattern attribute not matching for email(user@gmail.com)

this should be correct pattern

[^@]+@[^@]+\.[a-zA-Z]{2,6}

yes you forgot to consider lower case.

you can refer this document for more details

html5-form-validation-with-regex

Is both pattern and type= email used in conjunction an issue?

Necessity

The pattern attribute shouldn't be necessary on any browser which fully conforms to the HTML5 specification on how the various type states are implemented.

For example, this is how the type=email input element should be implemented:

If the multiple attribute isn't specified...

While the value of the element is neither the empty string nor a single valid e-mail address, the element is suffering from a type mismatch.

If the multiple attribute is specified...

The value attribute, if specified, must have a value that is a valid e-mail address list.

— HTML5 Specification's Email State (type=email)

In really basic terms this means that the element's value will return empty if an empty string nor valid email address has been entered into it. This means that the browser should attempt to validate the email address where no pattern attribute is present. If the pattern attribute is present, both the browser and the specified regular expression would be taken into account.

Usefulness

Despite not being necessary, you may still want to use the pattern attribute to only catch certain varieties of input. For instance, admin@mailserver1 is a valid email address (according to Wikipedia), and you may want to explicitly only allow email addresses which have a TLD. The same applies to region-specific phone numbers.

HTML5 Email validation should not allow email without . example aaa@aaa

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

pattern attribute does not work well in e-mail type field

To validate international email addresses. I'd suggest using a text field instead, with pattern.

An answer from a a similar question suggest using a more generic solution and I agree.

<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.

How can i add specific email validation for html

The only way is RegExp

1. If you are using a framework (angular/react/vue) they have there own(compatible third party) libraries to handle form validation.
2. If you are using plain JS you can add onchange event with your input and test the input with desired regex or before submitting the form you can test the input.

Regex you will need

/^[a-z][a-z0-9_.]*@(gmail|yahoo).com$/gm

More about Regex with Javascript:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Invalid regular expression in HTML5 input pattern in email input

You need to remove unnecessary escaping backslashes and wrong | inside character classs, and just redundant constructs:

pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(\.?[A-Za-z0-9]){2}\.(com?|net|org)+(\.[A-Za-z0-9]{2,4})?"

See a demo below:

input:valid {  color: green;}input:invalid {  color: red;}

<form name="form1">  <input pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(\.?[A-Za-z0-9]){2}\.(com?|net|org)+(\.[A-Za-z0-9]{2,4})?" title="Wrong email!"/> <input type="Submit"/> </form>