How to validate the email address in JavaScript
In this tutorial, we are going to learn about email validation in JavaScript with the help of examples.
What is Validation?
Validation means when you enter a data in a web app it checks the data that you’ve entered is valid, if the data is valid then application submits to the server otherwise it shows you an error message like The email you've entered is invalid.
Validating Email address
Email address are mostly used in a login and signup forms.To avoid the fake account creations we need to validate the email address entered by the user.
We can validate an email by using the regular expressions(regex), this below function takes the email as an argument and returns true if the email is valid else it returns false if the email is invalid.
const validateEmail= (email) => {
var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return regex.test(String(email).toLowerCase());
}
console.log(validateEmail('test@test.com')); // true
console.log(validateEmail('test.com')); // falseLet’s connect the above function with an HTML input field.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript Email Validation</title>
</head>
<body>
<h1>JavaScript Email Validation</h1>
<input name="email" type="email" placeholder="Email"/>
<button id="btn" >Validate</button>
<p id="message"></p>
</body>
</html>const email = document.querySelector('input[name=email]');
const button = document.querySelector('#btn');
const text = document.querySelector('#message');
const validateEmail= (email) => {
var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return regex.test(String(email).toLowerCase());
}
button.addEventListener('click',()=>{
if(validateEmail(email.value)){
text.innerText="Valid email";
}else{
text.innerText="Invalid email";
}
})Codepen demo
Built-in HTML5 validation
If you don’t like to use JavaScript to validate your email addresses you can also use Html5 built-in form validation by adding a required attribute to the input field.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Inbuilt Email Validation</title>
</head>
<body>
<h1>Inbuilt Email Validation</h1>
<form>
<input name="email" type="email" required="true" placeholder="Email"/>
<button id="btn" type="submit" >Submit</button>
</form>
</body>
</html>In the above code, we have added a required attribute to the input field, so that if anyone enters an invalid email the built-in validation shows some error messages to correct the email.
You can play with this demo.
- Share:
