Issue
I have an input
field of type email
. When I put m@m.c
, it seem to be ok with the format. However, checking the same at https://verifalia.com/validate-email gives error Invalid email format: the domain part of the email address does not comply with IETF standards.
I am using validator
library's isEmail
function which also seem to agree with verifalia
. Which one is correct? Is it safe to use type=email
in a form
?
Solution
The error is referring to the fact that a valid domain name must consist of 3 to 63 alphanumeric characters (including hyphens) within the hostname and 2 to 63 letters (including hyphens) for the top level domain name (3 to 4 letters being the norm). host-is-3-to-63-letters-digits-hyphens.tld-is-2-to-63-letters-hyphens
and a-1.de
are valid, but m.c
is not.
For simple client-side validation, use pattern
attribute and this regex as it's value:
[a-zA-Z0-9\-]+@[a-zA-Z0-9\-]{3,63}\.[a-zA-Z\-]{2,63}
Of course the regex above isn't foolproof, since it validates if there are any hyphens at the beginning or end of a name or if the hostname has any consecutive hyphens, or if there is a sub-domain, etc. (see Domain Naming Conventions).
The example below is a <form>
that submits data to a live test server. If the data entered is invalid, the required
attribute stops the form from submitting and a pop-up error message appears. If the data is valid , then the form submits it to the server and the iframe below will display the response (look for user-email:
to verify data in the response).
:root {
font: 1.75ch/1.15 "Segoe UI";
}
fieldset {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: fit-content;
}
legend {
font-size: 1.2rem;
font-weight: 700;
}
label {
margin-bottom: 0.5rem;
}
input {
height: 1.75rem;
margin-bottom: 0.5rem;
font: inherit
}
iframe {
display: block;
width: 99%
}
.btn {
cursor: pointer;
}
<form method="post" action="http://httpbin.org/post" target="response">
<fieldset>
<legend>Registration</legend>
<label for="user-email">Email Address: </label><input id="user-email" name="data-email" type="email" pattern="[a-zA-Z0-9\-]+@[a-zA-Z0-9\-]{3,63}\.[a-zA-Z\-]{2,63}" required>
<input class="btn" type="submit">
<iframe name="response"></iframe>
</fieldset>
</form>
Answered By - zer00ne
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.