How to validate the email address in JavaScript
In this post we will give you information about How to validate the email address in JavaScript. Hear we will give you detail about How to validate the email address in JavaScriptAnd how to use it also give you demo for it if it is necessary.
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')); // trueconsole.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.
Hope this code and post will helped you for implement How to validate the email address in JavaScript. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs