Last Updated on August 31, 2022 by Roshan Parihar
In this tutorial, learn email validation using jQuery. The short answer is to use the regular expression with text() to test if it matches the required email format.
You can validate your email address on click outside of the input or by clicking on the submit button. Let’s find out with the examples given below.
Method 1: Validate Email Address Using jQuery with Regex on Click Outside Inputbox
For email validation using jQuery, you must first declare a regular expression for the email address in a variable. After that, use the test() function and pass the regex variable to test whether or not the email address is valid.
The below examples validated the email address when someone entered their email address and click outside of the input box. It uses the focusout() function to detect click outside.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $( "input" ).focusout(function() { var inputvalue = $(this).val(); var regemail = "/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/"; if((!regemail.test(inputvalue)) && (inputvalue!='')){ }else if(inputvalue == ''){ alert("Please fill the details"); }else{ alert("Its a valid email address"); } }); }); </script> </head> <body> <form action="#" method="post"> <input type="text" id="mytxt" placeholder="Enter your email address"> </form> </body> </html> |
Output
Enter an email address and click outside to validate
When you enter an email address in the input box given above and click outside, it validates the email address and finds out whether it is valid or not.
Method 2: Validate on Click Submit Button in jQuery
In addition to the above example, you can also perform email address validation with the click of the button using click() function. The below example also uses the same text() function with regex expression to test the email validation using jQuery.
To stop the submission of the form on click of the button, it uses the e.preventDefault() function within the if condition as given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $( "button" ).click(function() { var inputvalue = $('input').val(); var regemail = "/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/"; if((!regemail.test(inputvalue)) && (inputvalue!='')){ }else if(inputvalue == ''){ alert("Please fill the details"); }else{ alert("Its a valid email address"); } }); }); </script> </head> <body> <form action="#" method="post"> <label>Email:</label> <input type="text" placeholder="Enter your email address"> <button type="submit">Submit</button> </form> </body> </html> |
Output
The above example contains the button and the input box. You can enter an email address in the above input box and click the button for validation using jQuery.
You May Also Like to Read