Good morning !
I have this simple input fiel for e-mail addresses:
<form>
<input type="email" placeholder="E-Mail" required>
<input type="submit" value="Send" />
</form>If you write "[email protected]", you can submit the form, because the email is valid. If you write "[email protected]", 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?
CodePudding user response：
<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>CodePudding user response：
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?
CodePudding user response：
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;
}
}CodePudding user response：
HTML can't help you with data validation, you can learn js to do that