Regular Expression For Email Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
in this tutorial we will show you the solution of regular expression for email validation in JavaScript, here we defined label with email input field and submit button it had onclick event for load emValid() function when user submit their email and clicks submit button.
Then it checks with defined regular expression of email pattern for identify whether user entered email is valid or not respective message will display on webpage.
Step By Step Guide On Regular Expression For Email Validation In JavaScript :-
Here we defined one label ‘Enter Email ID’ and one input field for collect user email then submit button with onclick event.
When user clicks on submit it loads ‘emValid()’ function call within function we collects user email id and stored to variable ‘email’ by input field id ‘em’ and pattern contain correct email pattern regular expression stored to variable ‘ptrn’.
Using if() condition with match() function we checks user entered mail id match with pattern if matched then it will display message ‘Valid Input’ using alert() method, otherwise it will display ‘Invalid Input’ message on webpage.
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
</head>
<body>
<label for="em">Enter Email ID</label>
<input type="text" id="em">
<input type="submit" value="Submit" onclick="emValid()">
<script>
function emValid(){
var email=document.getElementById('em');
var ptrn=/\S+@\S+\.\S+/;
if(email.value.match(ptrn)){
alert('Valid Input');}
else{
alert('Invalid Input');
document.getElementById('em').focus();
}}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined label ‘Enter Email ID’ using <label> tag then input tag defined with id attribute ‘em’ and last we defined submit button with onclick event for initialize emValid() function call when user submit their response.
- In script we defined emValid() function, here we stored user email id to variable ‘email’ and variable ‘ptrn’ holds pattern of email id’s.
- Using if() condition we checks whether user entered email id match with pattern or not if it is true then it display message ‘Valid Input’ on alert box otherwise it display ‘Invalid Input’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to validate email in javascript.
When we executes our program on browser we can see one label ‘Enter Email’ with input field for user can provide their email id if they provide any invalid email id value and submitted then it will notify user to that is invalid input otherwise it will display valid input result on webpage.
We can also display error or success message on webpage instead of alert box.
I hope this tutorial on regular expression for email validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
