In this tutorial we will show you the solution of how to validate email in JavaScript, validating an email address is very important while validating an HTML form.
So, let us see now how to apply validation on email address in JavaScript below.
Step By Step Guide On How To Validate Email In JavaScript :-
Here, as we know that email may 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.
This all is done with the help of JavaScript regular expressions. Here, below we are going to show required expression for email address. Let us see
/^[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.
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaScript Validation </title>
</head>
<body>
<h1> Talkers Code - - 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 validate email address in JavaScript.
I hope this tutorial on how to validate email in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
