Learn how to validate an email address with javascript.
There are different ways through which we can validate an email address with javascript. Let us find out the correct way and also explore other helpful options.
It is one of the most common operations to validate an email address in programming. We need to do it often on the client as well as on the server-side. It is useful in contact forms, signup, sign-in forms, etc.
How an email validation should be done?
An email address knowprashantyadav@gmail.com consists of two different parts.
1. Local part knowprashantyadav
2. Domain part gmail.com
And this two are connected or glued together with an @ character.
Local part
The local part can contain any combination of the following.
- Any alpha-numeric character:-
a-zA-Z0-9 - Punctuation:-
"(),:;<>@[\] - Special characters:-
!#$%&'*+-/=?^_{|}~ - A dot
.which cannot be the first and last character and could be repeated between them.
Domain part
The domain part can contain any combination of the following.
- Any alpha-numeric character:-
a-zA-Z0-9. - A hyphen
-which cannot be the first and last character and could be repeated between them.
Using regex to valdiate an email address
The best way to validate an email address is by using regular expression.
There is no specific email checking regex. Everyone seems to use basic regular expression and it fails even the basic scenarios given the fact that they ignore that new domain or internationalized email addresses are introduced very often.
Don’t use any regular expression blindly, but check it first.
This is one of the most accurate regexes to check email address currently.
const validate = (email) => {
const expression = /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
return expression.test(String(email).toLowerCase())
}
All the common cases are satisfied, one can assume that 99.9% of the email addresses people will add are validated successfully.
Validating the HTML email field on client side.
HTML5 has introduced the email input type which can be used to validate the email addresses on the client side.
<input type="email" name="email" placeholder="Your email">
Although the result for the validation differs for different browsers depending upon their implementation. But one can consider this that it will cover most of the simple to little complex cases.
Validate email address on server-side with javascript.
If your app has a server, the server needs to validate the email as well, because you can never trust client code, and also JavaScript might be disabled on the user browser.
If we are using Node.js then there is an advantage that we can use the same function to validate email. It will work both on the client as well as on the server-side.