Email addresses have a specific format, with certain characters and structures required. Validating an email address ensures that it is in the correct format and can be used to send or receive emails. By validating email addresses, you can ensure that important information is delivered to the correct recipient and that communication is as efficient as possible.
This blog will describe email validation in JavaScript.
How to Validate Email in JavaScript?
Verifying the user’s entered email address is known as email validation. In JavaScript, you can validate an email address using “regular expression” with the “match()” method. The match() method verifies the user’s input with the specified pattern.
Let’s first see some valid and invalid email addresses, then create a pattern to validate the email addresses.
Valid Email Addresses
Some valid email addresses are:
- xyz@gmail.com
- xyz@ourearth.com
- xyzmail@ourearth.org
- xymy@you.your.net
Invalid Email Addresses:
The following formatted emails are not acceptable:
- An email started with a dot “.”
- No character before @
- Without @
- double dots are not allowed
Pattern
The given pattern is a general email format pattern:
The above pattern accepts:
- “[a-z0-9]” indicates the small letter characters with numbers.
- “@[a-z]” signifies the @ sign with any number of small characters.
- “.” specify the dot (.).
- “[a-z]{2,3}” denotes the alphabets a-z with length 2 or 3, such as “com”, “org”, “net”, and so on.
It is important to note that the above pattern is a general regular expression, and it may not cover all possible cases of email validation, but it’s a good starting point. You can create/define a pattern on your own requirements.
Let’s try another (complex) pattern that will accept the small and capital case letters with different special characters:
Example
In an HTML file, create a form that contains a text field, a button and an area for displaying an error message. Attach the “onclick” event with the “submit” button that will invoke the “emailValidationFunc()” function to validate the user input:
Enter your Email: <<strong>input</strong> type=“text” id=“mail” autocomplete=“off”>
<<strong>p</strong> id=“error”></<strong>p</strong>>
<<strong>input</strong> type=“submit” value=“submit” onclick=“emailValidationFunc()”>
</<strong>form</strong>>
In JavaScript file, add the following code:
{
var input = document.getElementById(“mail”).value;
var pattern = /[a-z0-9]+@[a-z]+.[a-z]{2,3}/;
if(input.match(pattern))
{
alert(“Pattern matches!”);
return true;
}
else
{
document.getElementById(“error”).innerHTML = “Please Enter a Valid Email Address!”;
return false;
}
}
According to the above code snippet:
- First, define a function called “emailValidationFunc()” that will trigger on the button click.
- Get the value of the user input using the “value” attribute.
- Create a pattern for the validating email address.
- Call the “match()” method to check if the inputted value matches the provided pattern. If yes, then show an alert message “Pattern matches!”. Otherwise, print the error message “Please Enter a Valid Email Address!”.
Output
That’s all about email validation using the JavaScript regular expression.
Conclusion
In JavaScript, for validating an email address, use the “regular expression” with the “match()” method. The match() method verifies the user’s input with the specified pattern. This blog mentions general email formatting patterns, but you can also create a pattern on your own requirements. In this blog, we described email validation in JavaScript.