Email validation in JS required when you want input from users. Like account login needed an email id. An email id data will be sent to the server where it will check with the database. But you can do HTML input validation of email id text format are Right or wrong using Regular expression and JavaScript.
You can validate the HTML form on the client-side so data processing will be faster than server-side validation.
Email validation in JS Examples
Email validation regex, Using regular expressions is probably the best way. You can see below example code:-
function validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\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 re.test(String(email).toLowerCase());
}Here’s an complete example of the above in action:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form>
<p>Enter an email address:</p>
<input id='email'>
<button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>
</body>
<script type="text/javascript">
function validateEmail(email) {
const re = /^(([^<>()[\]\\.,;:\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 re.test(email);
}
function validate() {
const $result = $("#result");
const email = $("#email").val();
$result.text("");
if (validateEmail(email)) {
$result.text(email + " is valid :)");
$result.css("color", "green");
} else {
$result.text(email + " is not valid :(");
$result.css("color", "red");
}
return false;
}
$("#validate").on("click", validate);
</script>
</head>
</html>Output:
HTML email validation no need js
You don’t actually need JavaScript for this at all with HTML 5; just use the email input type:
<input type="email">If you want to make it mandatory, you can add the required parameter.
If you want to add additional RegEx validation (limit to @foo.com email addresses for example), you can use the pattern parameter, e.g.:
<input type="email" pattern="[email protected]">Q: How to Email id validation in JavaScript without regular expression?
Answers: You can do it like below example.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function testEmailAddress(emailToTest) {
// check for @
var atSymbol = emailToTest.indexOf("@");
if(atSymbol < 1) return false;
var dot = emailToTest.indexOf(".");
if(dot <= atSymbol + 2) return false;
// check that the dot is not at the end
if (dot === emailToTest.length - 1) return false;
return true;
}
alert(testEmailAddress("[email protected]"))
</script>
</head>
<body onload="codeAddress();">
</body>
</html>Output:
Do comment if you have any questions and suggestion on this tutorial.
Note: The All JS Examples codes are tested on the Safari browser (Version 12.0.2) and Chrome.
OS: macOS 10.14 Mojave
Code: HTML 5 Version