Forum Moderators: open
I have a simple JavaScript issue. Or what I think is a simple issue.
I pinched a script to validate a form (client-side) using JavaScript from a site.
It works nearly as I want it to. The only issue is that it doesn't display all the errors at once. I would like all the errors to display at the same time, not one at a time.
Below is my edited code:
<html>
<style>
body
{
font-family: Tahoma;
font-size: 10pt;
}
input
{
width: 200px;
font-family: Tahoma;
font-size: 10pt;
}
.label
{
width:150px;
}
textarea
{
width: 200px;
font-family: Tahoma;
font-size: 10pt;
}
.error
{
font-family: Tahoma;
font-size: 10pt;
color: red;
display:none;
}
</style>
<script>
function checkForm()
{
name = document.getElementById("name").value;
email = document.getElementById("email").value;
comment = document.getElementById("comment") .value;
if (name == "")
{
hideAllErrors();
document.getElementById("nameError ").style.display = "inline";
document.getElementById("name").se lect();
document.getElementById("name").focus();
return false;
}
else if (email == "")
{
hideAllErrors();
document.getElementById("emailErro r").style.display = "inline";
document.getElementById("email").s elect();
document.getElementById("email").f ocus();
return false;
}
else if (comment == "")
{
hideAllErrors();
document.getElementById("commentEr ror").style.display = "inline";
document.getElementById("comment") .select();
document.getElementById("comment") .focus();
return false;
}
return true;
}
function hideAllErrors()
{
document.getElementById("nameError ").style.display = "none"
document.getElementById("emailErro r").style.display = "none"
document.getElementById("commentEr ror").style.display = "none"
}
</script>
<body>
<form onSubmit="return checkForm();" method=post action="xyz.php">
<span class="label">Name:<br /></span>
<input type=text value="" id="name">
<div class="error" id="nameError">Required: Please enter your name.</div>
<br /><span class="label">Email:<br /></span>
<input type=text value="" id="email">
<div class="error" id="emailError">Required: Please enter your email address.</div>
<br /><span class="label">Comment:<br /></span>
<textarea name="" cols="" rows="" id="comment"></textarea>
<div class="error" id="commentError">Required: Please enter a comment.</div>
<br /><br /><input type=submit> <input type=reset>
</form>
</body>
</html>
Anybody have any ideas?
Cheers in advance.
And then at the end of the function you replace
return true;
with
return isvalid;
