html5 e-mail validation failed

Question

I have this simple input field for e-mail addresses:

 <form> <input type="email" placeholder="E-Mail" required> <input type="submit" value="Send" /> </form>

If you write "max@mail.de", you can submit the form, because the email is valid. If you write "max@.de", you can't submit the form, because the email is invalid.

But!

If you write "max@i9", you can submit the form, too. But the mail is invalid. Why? And how can I fix it?

Answer 1

 <form> <input pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}$" type="text" required /> <input type="submit" value="Send" /> </form>

Answer 2

Because max@i9 is a valid email as it stated in this article . You can "fix" it by adding your own email pattern, see this tutorial :

<input type="email" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required />

Here's a more detailed question about the "why email without a dot is valid". Why does HTML5 form-validation allow emails without a dot?

Answer 3

This is because HTML5 type="email" validator is only find @ symbol in your input string. If it is found your form will submitted else it won't submitted. To avoid this you have to use javaSctipt form Validation like this :-

 function validateemail() { var x=document.myform.email.value; var atposition=x.indexOf("@"); var dotposition=x.lastIndexOf("."); if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){ alert("Please enter a valid e-mail address \\n atpostion:"+atposition+"\\n dotposition:"+dotposition); return false; } }

Answer 4

HTML 无法帮助您进行数据验证，您可以学习 js 来做到这一点

Answer 5

你只需要使用模式属性