Html5 template attribute not suitable for email ( [e-mail] )

Question

I am new to HTML5 ...

Here I had a problem with the email template attribute ...

1) if I give an input like [e-mail]... in the email field.

2) it does not take a value and shows "Pattern does not match" ..

Help me fix this ....

Here is an HTML snippet

<form name='f1' method="POST" action="" > <div id="fp"> <span style="margin-left:-50px">Email:</span>&nbsp;&nbsp; <span><input class="input" type="email" name="Email" placeholder="Enter mailID" required pattern="^[A-Z0-9._%+-] +@ [A-Z0-9.-]+\.[AZ]{2,4}$" ></span><br> <input type="submit" name="submit" value="submit"> </div> </form> 

Any suggestions are acceptable ....

Answer 1

it must be the correct template

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

yes, you forgot to think about lower case.

You can refer to this document for more details.

html5-form-validation-with-regex

Answer 2

The accepted answer will not confirm [e-mail] In this case, do not miss all of these new domain names, such as http://www.iflove.technology/ , which you could use:

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

Used for email input type:

 <input type="email" pattern="[^@] +@ [^@]+\.[a-zA-Z]{2,}"> 

Answer 3

You also need to consider the lower regions. Or make the case insensitive. But really you should just use:

 ^ .+@. +$ 

And send a confirmation email to the address that they need to follow, because the email addresses are complicated enough, and you end up blocking the material that you are not going to use with the regular expression, and this will not stop someone from putting in a fake email address mail anyway.

Answer 4

It is very difficult to validate Email correctly by simply using the HTML5 attribute "pattern". If you do not use the "template", someone will be processed. which is NOT a valid email address.

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 [e-mail]

Answer 5

Just remove the pattern attribute. type="email" enough.

Answer 6

I'm using this template right now, it seems to work just fine:

 [a-zA-Z0-9._\-] +@ [a-zA-Z0-9.\-]+\.[a-zA-Z]{2,4} 

Answer 7

My solution is to override the html5 = 'email' check type. I run this code after loading the DOM

 $(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') })