Prompting a user to input an email address is fine, but you want to implement JavaScript email address validation in order to prevent back-end issues.
In this article, you will learn about JavaScript email address validation. You can check to see whether someone has input a valid email address into a field before sending it to the database using email validation techniques such as this one. Sending incorrect data to your database can break the code, and without proper validation techniques, errors can happen, and you might not understand why. Not properly validating your code before sending it to a database can also open you up to vulnerabilities through hacking, especially through a technique called SQL injection.
To use JavaScript to validate an email address, we need one function, one regular expression, and one test() method. Let’s look at Example 1 to see how to do it.
Example 1
Function
In this example, you can see that our function is named validateEmailAddress, and it passes the value of emailAddress to the inner parts where we have the regular expression and the test method.
Regular Expression
The first thing we run into inside of our function is the regular expression. The constant emailRegex is our regular expression, and this is what it says:
- There will be a group of one or more characters. These characters can be lower case or upper case letters. They can be the numbers 0 through 9. They can also be a period, underscore, percentage symbol, plus sign, or minus sign. We’ll use this for the name part of the email.
- After this group of characters, there will be an @ symbol.
- Next, there is another group of one or more characters. These characters can be lower case or upper case letters. They can be the numbers 0 through 9, or they can be a period or a dash. We’ll use this for the address part of the email.
- After this second group of characters, there will be a . symbol.
- Finally, there will be a group of at least two, but not more than four characters. These characters can be lower case or upper case letters only. We’ll use this for the domain part of the email.
Test Method
The next part of the function is the test method. The test method states that if the value passed to the function in the variable emailAddress follows the pattern we established in our regular expression emailRegex, return true, otherwise, return false.
Test Examples
Now that we have taken a look under the hood to see what’s happening, let’s try out a few examples to test the results. We’ll enter a value as if we had entered one into a form to see how the code reacts.
Example 2
In Example 2, we enter someone@some-domain.com. In this case, we see a group of lowercase letters, followed by an @ symbol. Next, we have a group of lower case letters containing one dash, followed by a period. If we check this pattern against emailRegex we can see that it will return True. This entry could be an email address.
Example 3
In Example 3, we enter someone@some-domain.tv. The only difference between this example and the last is that this one ends with tv instead of com. Tv might seem strange because we don’t see it often, but it passes the two to four character rule set up in emailRegex, and it uses only letters. The test method will return true. This entry could be an email address.
Example 4
In Example 4, we enter someone@some-domain.info. This example is the same as the last two examples, except this time, the entry ends with info instead of tv or com. This example is also perfectly legal and falls within the 2 to 4 letter rule. The test method will return true. This entry could be an email address.
Example 5
In Example 5, we enter someone.some@domain. This time emailRegex considers someone.some to be the sender. @domain appears to be the beginning of the recipient’s address, but there is no .com, .tv, or .info. Without the email domain, the test method returns false. This entry is not an email address.
Example 6
In Example 6, we enter someone.some-domain.com. This time, emailRegex considers the entire entry the name because it never encounters an @ to signify the address portion of the email. Without the @ the test method will return false. This entry is not an email address.
Example 7
In Example 7, we enter someone-some-domain.com. This example is the same as the last one and emailRegex will consider the entire entry the name part of the email. Dashes and periods are allowed in names. Without the address and domain parts of the email, the test method will once again return false. This entry is not an email address.
Example 8
In this final example, we enter @some-domain.com. This time the entry begins with an @, but emailRegex is expecting at least one character before the @ to use as a name. Without a name portion of the email, the test method will return false. This entry is not an email address.
Conclusion
I hope that after reading over these examples, you can see how important this function is for making sure the email field is formatted correctly before sending it to your server. A person can still enter a fake email, but they can’t inject harmful code into your database. We recommend adding this code to any forms that will be collecting email addresses. If you have found these examples helpful and informative, please share this knowledge about JavaScript email address validation on Facebook and Twitter.
