Form Validation remove inline error message on focus

[murphyhg]

I was able to get my online form validation working properly. How can I make the inline message disappear once the user starts to type in the input box again?

<script language="javascript">
function checkForm() {
name = document.getElementById("name").value;
email = document.getElementById("email").value;
comment = document.getElementById("comment").value;
var eric = true;
hideAllErrors();
if (name == "") {
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
eric = false;
}
if (!checkemail(email)) {
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
eric = false;
}
if (comment == "") {
document.getElementById("commentError").style.display = "inline";
document.getElementById("comment").select();
document.getElementById("comment").focus();
eric = false;
}
return eric;
}

function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("commentError").style.display = "none"
}
</script>
<script language="javascript">
function checkemail(str){
//var str=document.validation.emailcheck.value;
var filter=/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/i
return (filter.test(str));
}
</script>

<form onSubmit="return checkForm();" method=post action="formtest.cfm">
<span class=label>Name:</span>
<input type=text value="" id=name>
<br>
<div class=error id=nameError>Required: Please enter your name<br>
</div>
<br>
<span class=label>Email:</span>
<input type=text value="" id=email>
<br>
<div class=error id=emailError>Required: Please enter a valid email address<br>
</div>
<br>
<span class=label>Comment:</span>
<textarea type=text value="" id=comment></textarea>
<br>
<div class=error id=commentError>Required: Please enter a comment<br>
</div>
<br>
<input type=submit value=Submit style="margin-left: 50px">
</form>

 

[jemminger]

perhaps something like this?

<script language="javascript">
function checkForm([!]bFocus[/!]) {
	name = document.getElementById("name").value;
	email = document.getElementById("email").value;
	comment = document.getElementById("comment").value;
	var eric = true;
	hideAllErrors();
	[!]if (name == "") {
		document.getElementById("nameError").style.display = "inline";
		if (bFocus) {
			document.getElementById("name").select();
			document.getElementById("name").focus();
		}
		eric = false;
	}
	if (!checkemail(email)) {
		document.getElementById("emailError").style.display = "inline";
		if (bFocus) {
			document.getElementById("email").select();
			document.getElementById("email").focus();
		}
		eric = false;
	}
	if (comment == "") {
		document.getElementById("commentError").style.display = "inline";
		if (bFocus) {document.getElementById("comment").select();
			document.getElementById("comment").focus();
		}
		eric = false;
	}[/!]
	return eric;
}

function hideAllErrors() {
	document.getElementById("nameError").style.display = "none"
	document.getElementById("emailError").style.display = "none"
	document.getElementById("commentError").style.display = "none"
}
</script>

<script language="javascript">
function checkemail(str){
//var str=document.validation.emailcheck.value;
var filter=/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/i
return (filter.test(str));
}
</script>

<form onSubmit="return checkForm([!]true[/!]);" method=post action="formtest.cfm">
  <span class=label>Name:</span>
  <input type=text value="" id=name[!] onkeyup="checkForm(false);"[/!]>
  <br>
  <div class=error id=nameError>Required: Please enter your name<br>
  </div>
  <br>
  <span class=label>Email:</span>
  <input type=text value="" id=email[!] onkeyup="checkForm(false);"[/!]>
  <br>
  <div class=error id=emailError>Required: Please enter a valid email address<br>
  </div>
  <br>
  <span class=label>Comment:</span>
  <textarea type=text value="" id=comment[!] onkeyup="checkForm(false);"[/!]></textarea>
  <br>
  <div class=error id=commentError>Required: Please enter a comment<br>
  </div>
  <br>
  <input type=submit value=Submit style="margin-left: 50px">
</form>

-jeff

http://www.jeffemminger.com

lost: one sig, last seen here.

 

[murphyhg]

This is working great except for one little problem. When I come to the page no error messages are displayed. However when I start to type in the first input field I get an error message on the other 2 input boxes when I start typing. Is there anyway for the error messages not to be triggered until I have submitted the form? When the errors are returned on the page and I start typing then the error will go away in the field that I am retyping in to correct the error.