darcher darcher - 1 year ago 60
HTML Question

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

HTML5 email type & patterns

Are there any issues, conflict or otherwise, between using both the new HTML5
values (e.g. email, tel, etc.) in conjunction with the

I'm not referring to HTML5 browser compatibility—only the direct effect the new values for these attributes have when used in conjunction with the

I'll put a few examples in for clarity using

A. Type attribute only.

<input type="email">

B. Only pattern attribute

<input type="text" pattern="[email regex]">

C. Email & Pattern attributes used together

<input type="email" pattern="[email regex]">

I feel like you gain more semantic value with the new HTML5 type values; however, regex is much more controllable as email@localhost is valid via only the email value being used.

If their's a duplicate, my apologies, I looked around but didn't see this particular question


I found a mention of possible negative effects when using both in conjunction with each other. However, I'm unsure how credible the source is.

As both ways of validating email addresses has their pros and cons it is up to you to decide which one to use. You should not try to use them both at the same time as this might induce a clash in browsers that support both features. Using type=”email” has the advantage that it is semantically correct both using the pattern attribute has the advantage that there are several easy-to-use polyfills on the web which ensures support for a greater range of audience.


Just be sure to test thoroughly if both are used in unison. I'll update the question if I find any negative side effects.

Answer Source


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.


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download