Are both pattern and type = "email" used together?
HTML5 type and templates
Are there any problems, conflicts or not, between using both new HTML5 values type
(like email, tel, etc.) in combination with the attribute pattern
.
I don't mean HTML5 browser compatibility - just the direct effect the new values for these attributes have when used in conjunction with the attribute pattern
.
I will give some examples for clarity using type="email"
and. Attribute type.
<input type="email">
B. Template attribute only
<input type="text" pattern="[email regex]">
C. Email and Template Attributes Used Together
<input type="email" pattern="[email regex]">
I feel like you are getting more semantic meaning with the new HTML5 type values; however, the regex is much more controllable since the @localhost email address is only valid using only the email value it uses.
If it's a duplicate, my apologies, I looked around but didn't see this specific question.
EDIT
I found mention of possible negative effects when using both in combination with each other. However, I'm not sure how reliable the source is.
Since both methods of validating email addresses have their pros and cons, it's up to you which one to use. You should not try to use them at the same time, as this can cause conflict in browsers that support both functions. Using type = "email" has the advantage of being semantically correct, using an attribute template has the advantage that there are several easy-to-use polyfills on the web that provide support for a wider audience.
Just remember to test thoroughly if both are used in unison. I'll update the question if I find any negative side effects.
source to share
Necessity
The attribute is pattern
not required in any browser that fully complies with the HTML5 spec on how various states are implemented type
.
For example, this is how an element should be implemented type=email
input
:
If no attributemultiple
is specified ...As long as the value of an element is neither an empty string nor the only valid email address , that element suffers from a type mismatch.
If themultiple
...The value attribute, if specified, must have a value that is a valid list of email addresses .
In really basic terms, this means that an element value
will return empty if an empty string or a valid email has been entered into it. This means that the browser should try to validate the email address where the attribute is missing pattern
. If the attribute is present pattern
, both the browser and the specified regular expression are counted.
Utility
While not required, you can still use the attribute pattern
to catch certain types of input. For example, admin@mailserver1
is a valid email address ( according to Wikipedia ) and you can explicitly allow email addresses that have a TLD.The same goes for region-specific phone numbers.
source to share
It looks like in many browsers the default browser functionality outperforms any custom functionality. I ran into this problem while trying to account for international email addresses (not alphanumeric languages).
$(document).ready(function() {
var $emails = $('li pre'),
form = $('form').get(0),
$input = $('input');
$emails.each(function() {
$input.val($(this).text());
if (form.checkValidity()) {
$(this).addClass('success').removeClass('fail');
} else {
$(this).removeClass('success').addClass('fail');
}
});
$input.val('');
});
.success {
color: green;
}
.fail {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://en.wikipedia.org/wiki/International_email">Valid</a> Email Addresses:
<ul>
<li><pre>Abc@example.com</pre></li>
<li><pre>Abc.123@example.com</pre></li>
<li><pre>user+mailbox/department=shipping@example.com</pre></li>
<li><pre>!#$%&'*+-/=?^_`.{|}~@example.com</pre></li>
<li><pre>"Abc@def"@example.com</pre></li>
<li><pre>"Fred Bloggs"@example.com</pre></li>
<li><pre>"Joe.\\Blow"@example.com</pre></li>
<li><pre>用户@例子.广告</pre></li>
<li><pre>उपयोगकर्ता@उदाहरण.कॉम</pre></li>
<li><pre>@.</pre></li>
<li><pre>θσερ@εχαμπλε.ψομ</pre></li>
<li><pre>Dörte@Sörensen.example.com</pre></li>
</ul>
<form>
<input type="email" name="email" pattern=".+@.+" placeholder="XXXX@XXXX" title="XXXX@XXXX" required />
<button type="submit">
Submit
</button>
</form>
Browser test results: https://www.browserstack.com/screenshots/0f88466bf4bd5fc4cdec39a7618ed8afc9c82806
source to share