Form validation is essential part of programming. We can validate email address in jQuery or JavaScript using regular expression. In this article, both are explained. You can check the live demo as well.
Using regular expressions is probably the best way for email validation. The JavaScript function below returns true if given string is an email address otherwise returns false:
0 1 2 3 4 | function validateEmail(email) { var expr = /^(([^<>()[\]\\.,;:\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 expr.test(email); } |
Alert: JavaScript can easily be disabled. So keep in mind that one should not rely only upon JavaScript validation. This should be validated on the server side as well.
Validate email address in JavaScript
The following code is an example of email validation using JavaScript. Place the following code between opening and closing tags of your page:
0 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 | <form onSubmit="isEmail(); return false;"> Enter email: <input id="email" type="text" /> <button id="btn_validate" type="submit">Validate</button> </form> <h2 id="result"></h2> <br /><br /> <script type="text/javascript"> function validateEmail(email) { var expr = /^(([^<>()[\]\\.,;:\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 expr.test(email); } function isEmail(){ var email = document.getElementById("email").value; var color = "red"; var text = " is invalid"; if (validateEmail(email)) { color = "green"; text = " is valid"; } document.getElementById("result").innerHTML = email + text; document.getElementById("result").style.color = color; return false; } </script> |
Validate email address in jQuery
The same can be achieved in jQuery. Everything will be same except we have included jQuery library and replaced code in isEmail function:
0 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 | <form onSubmit="isEmail(); return false;"> Enter email: <input id="email" type="text" /> <button id="btn_validate" type="submit">Validate</button> </form> <h2 id="result"></h2> <br /><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> function validateEmail(email) { var expr = /^(([^<>()[\]\\.,;:\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 expr.test(email); } function isEmail(){ $("#result").text(""); var email = $("#email").val(); $("#result").css("color", "red"); $("#result").text(email + " is invalid"); if (validateEmail(email)) { $("#result").css("color", "green"); $("#result").text(email + " is valid"); } return false; } $("form").bind("submit", isEmail); </script> |
See the live example here.
So here you see it’s quite easy to validate email address with help of regular expression. Your comments and questions are most welcome!