<!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.