Keep Badly Formatted Emails Out With jQuery

Simply, quickly and effectively use jQuery to validate and verify email addresses. Stop bad email addresses before they get into your system. Learn how today.

data analytics

Let's face it, validating, verifying and checking input data is not what is generally described as a "fun" activity if you're a web developer. This is especially true for email addresses where the sheer quantity of address syntax permutations, allowed characters, new TLDs can make validating any given email address particularly challenging.

Below is a quick start to using one of the most methods to achieve effective email address syntax validation using jquery email validation.

This guide is for anyone who works with designing and deploying web sites and needs to ensure that email addresses input by users are correctly formatted.

Required Scripts

Step 1 - HTML Form

The basic mark-up for a web form with no built in validation.


	<form action="" id="form1">
		<label for="email">Email Address</label><br/>
		<input type="email" id="email" required="required"/><br/>
		<input type="submit" value="submit"/>
	</form>

Step 2 - Scripts

Add the following at the bottom of the page </body> element in the page.


		//... previous page markup stuff

		<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
        //.. more of your scripts
	</body>

Step 3 - Enable Validation

Add jQuery validation to the form.


<script>
$('#form1').validate();
</script>

Here's the whole script put together


<!DOCTYPE html>
<!-- jquery email validation demo
Source: https://tools.verifyemailaddress.io/Articles/Validate_Email/
-->
<html>
	<head>
		<title>jQuery Email Validation Demo</title>
	</head>
	<body>
		<form id="form1">
			<label for="email">Email Address</label><br/>
			<input type="email" id="email" required="required"/><br/>
			<input type="submit" value="submit"/>
		</form>
		<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
		<script>
		$('#form1').validate();
		</script>
		
	</body>
</html>

See an online demo of jQuery email validation in action here

Conclusion

Validating email addresses is a tedious but necessary task for anyone interested in keeping badly formatted email addresses out of their systems.

The jQuery validate plugin offers one of the the best ways of doing simple, effective email syntax validation on a web page.

Related Resources

email validation platform
Rowland O'Connor
Author Profile:
Rowland has previously had careers as an electical engineer, project manager, IT consultant, affiliate marketer, software engineer, infrastructure architect and SCUBA diving instructor. Current roles are: dad, husband. Works as CEO at Email Hippo Ltd .