<!DOCTYPE html>
<html>
<body>
<h1>Basic HTML form</h1>
<form name="basicform" action="form.html" method="post" onsubmit="return validate()">
<p>Name: </p><input type="text" name="name" placeholder="required" id="name" /><span id="name_err"></span><br />
<p>Email: </p><input type="text" name="email" placeholder="required" id="email" /><span id="email_err"></span><br />
<p>Message: </p><textarea name="message" id="message" rows = "4" cols="22" padding="10"></textarea><br />
<button type="submit" id="submit">Submit</button>
</form>
</body>
</html>
function validate() {
form = document.forms["basicform"]
if (form.name.value == "") {
document.getElementById("name_err").innerHTML = "Name is Required"
return false
}
else if (form.email.value == "") {
document.getElementById("email_err").innerHTML = "Email is Required"
return false
}
else {
document.getElementById("name_err").innerHTML = ""
document.getElementById("email_err").innerHTML = ""
alert("Done")
return true
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.