Simple Email Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of simple email validation in JavaScript, validation on email is a very interesting subject and that is more interesting when we relate this with JavaScript.
Actually, as we know email today’s are mostly used everywhere.
Whereas user’s mobile number is less used as compare to emails for identification.
Here, validation of email become need for every online portal. So, today we will understand how to apply validation on email in JavaScript.
Step By Step Guide On Simple Email Validation In JavaScript :-
Here, as we know that email addresses contain:
- Uppercase and lowercase alphabets
- Numeric digits
- Special characters like @
- And full stop with conditions like they are not first and last character of email address and not repeat continuously.
Now, as we know that what emails contains. So, it become now easy for us to apply validations.
And today this is done with the help of Regular Expression. Let us first see Regular expression that we going to use for email validation.
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
So, this regular expression to valid an email address in JavaScript. Let us see an example for better understanding to see how to use this expression for validation.
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaScript Validation </title>
</head>
<body>
<h1> TalkersCode - - JavaScript validation </h1>
<h2> how to validate email address in JavaScript </h2>
<form name="form" action="#">
<input type='text' name='email'/>
<input type="submit" name="submit" value="Submit" onclick="ValidateEmailAddress(email)"/>
</form>
<script>
function ValidateEmailAddress(testEmail)
{
var formatExp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(testEmail.value.match(formatExp))
{
alert(" Email address given is valid ");
return true;
}
else
{
alert("You have entered an invalid email address, try again later ");
return false;
}
}
</script>
</body>
</html>
- Here, above we show you an example in JavaScript.
- For this first of all we here create a basic structure of html. For this we use html, head, title and body with script tag. We hope you know about the basic structure of html and which html tag is used for which concept.
- Now, when we look inside body tag. Here, we see some headings tag and a script tag. Heading tag again is a concept of html, whereas script relates to JavaScript.
- JavaScript is written always inside script tag. Where script is a paired tag so it also has a closing tag. Now inside these script tag, we write our JavaScript code.
- Here, we first see that we create a form inside body with input type text and a button to submit that data.
- Now, let us understand our JavaScript codes. Inside our JavaScript codes. We create a function which gets called when we submit form using button.
- Inside this function, we store our expression which we want in email address inside a variable. And match that format with text that user feed using if condition. Here, if the data submitted by user is valid. Then a message with text Email address valid displayed on screen otherwise if data does not matches then text having message you have entered an invalid email address, try again later executed.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to apply validation on emails in JavaScript.
I hope this tutorial on simple email validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
