Email validation in js | Html Code example

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 = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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 = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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:

Email validation in js example

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:

Email id validation in JavaScript without regular expression

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


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.