<!DOCTYPE html>
<html>
<body>
	<h1>Basic HTML form</h1>
	<form name="basicform" action="form.html" method="post" onsubmit="return validate()">
		<p>Email: </p><input type="text" name="email" placeholder="required" id="email" /><span id="email_err"></span><br />	
		<button type="submit" id="submit">Submit</button>
	</form>
</body>
</html>
var check = false
function validate() {
	return check
}

form = document.forms["basicform"]
email = form.email
email.addEventListener("input", function (event) {
	document.getElementById("email_err").innerHTML = ""
	if (email.value == ""){
		check = false
		document.getElementById("email_err").innerHTML = "Email is required";
	}
	else {
		regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
		if (regex.test(email.value))
		{
			check = true
		}
		else
		{
			check = false
			document.getElementById("email_err").innerHTML = "Please enter a valid email address";
		}
	}
	
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.