<!DOCTYPE html>
<html>
<body>
<h1>Basic HTML form</h1>
<form name="basicform" action="form.html" method="post" onsubmit="return validate()">
<p>Age: </p><input type="text" name="age" placeholder="required" id="age" /><span id="age_err"></span><br />
<button type="submit" id="submit">Submit</button>
</form>
</body>
</html>var check = false
function validate() {
return check
}
form = document.forms["basicform"]
age = form.age
age.addEventListener("input", function (event) {
document.getElementById("age_err").innerHTML = ""
if (age.value == ""){
check = false
document.getElementById("age_err").innerHTML = "Age is required";
}
else {
if (!isNaN(age.value))
{
if (age.value >= 1 && age.value <= 125)
{
check = true
}
else
{
check = false
document.getElementById("age_err").innerHTML = "Age must be between 1 and 125";
}
}
else
{
check = false
document.getElementById("age_err").innerHTML = "Please enter a numeric value";
}
}
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.