darcher darcher - 1 month ago 6
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
type
values (e.g. email, tel, etc.) in conjunction with the
pattern
attribute.

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


I'll put a few examples in for clarity using
type="email"


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

EDIT



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.


Source

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

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.