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
Pregunta
I am new to HTML5...
Here i am having some problem with email pattern attribute...
1)if i am giving the input like user@gmail.com... in email field..
2)it's not accepting value and showing "Pattern not matched"..
Help me to fix this....
Here is the snippet of Html
<form name='f1' method="POST" action="" >
<div id="fp">
<span style="margin-left:-50px">Email:</span>
<span><input class="input" type="email" name="Email" placeholder="Enter mailID" required pattern="^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$" ></span><br>
<input type="submit" name="submit" value="submit">
</div>
</form>
Any suggestions are acceptable....
Solución
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
Otros consejos
The accepted answer won't validate marian@iflove.technology In this case not to miss out all those new domain names emails like http://www.iflove.technology/ you could use:
[^@]+@[^@]+\.[a-zA-Z]{2,}
Used with input type email it looks like this:
<input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}">
You need to account for lower cases too. Or make it case insensitive. But in reality you should just use:
^.+@.+$
And send a confirmation e-mail to the address that they should follow because e-mail addresses are reasonably complicated and you'll end up blocking stuff you don't intend to with a regex and it doesn't stop someone putting in a fake e-mail address anyway.
It is very difficult to validate Email correctly simply using HTML5 attribute "pattern". If you do not use a "pattern" someone@ will be processed. which is NOT valid email.
Using pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" will require the format to be someone@email.com
Simply remove the pattern
attribute. The type="email"
is enough.
I'm using this pattern right now, seems to work just fine:
[a-zA-Z0-9._\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,4}
My solution to override html5 validation type='email'. I run this code after DOM loaded
$(document).ready(function(){
$('input[type=email]').attr('pattern', "^([\\w]+[\\.]{0,1})+@([\\w-]+\\.)+[\\w]{2,4}$").attr('type', 'text').attr('title', 'Please enter an email address')
})