Form Valdiation- Hidden Error Div

JavaScript
1

Hi,
I’m basically trying to create a validation system for my form, that will display a hidden div that contains a simple error message if validation fails.
Take a look at what I mean. Blaze new media has a good one.(http://blazenewmedia.com/contact) just hit submit without entering anything.

I have a code I attempted to put together, that displays an error message beside each field, and the message has to be set inside the actual javascript file, which is not what I want to do, I just want one error box that will display itself if validation fails,
I would like to put the code for the error box where the “red” is, so I wouldn’t have to change the whole ajax file,and not have to have any in my head section or anything,it would just all happen from the js file.




//Show & Hide div
function toggleDetails(theDiv) {
	var currentStyle = document.getElementById(theDiv).style;
	currentStyle.display = currentStyle.display? "":"block";
}

//Check if text field empty
function isEmpty(theTextField) {
   if ((theTextField.value.length==0) || (theTextField.value==null)) return true;
   else return false;
}

[COLOR="Red"]//Send form
function sendForm() {
	var contactForm = document.forms[0];
	var submitError = false;
	if (isEmpty(contactForm.email)) {
		document.getElementById("email-error").innerHTML = "Please type your e-mail address";
		submitError = true;	
	}
	if (isEmpty(contactForm.message)) {
		document.getElementById("message-error").innerHTML = "Please type your message";
		submitError = true;	
	}
[/COLOR]
	if (! submitError) {
		document.getElementById("message-pbar").style.display = "block";
		ajax.requestFile = 'http://www.zendurl.com/jon_g/contact.php?name='+contactForm.name.value+"&email="+contactForm.email.value+"&subject="+contactForm.subject.value+"&message="+contactForm.message.value;
		ajax.onCompletion = updateForm;
		ajax.runAJAX();
	}
}

//Update form inner html
function updateForm() {
	eval(ajax.response);
}

And the code for the html form and hidden div.


<div id="hidden">Error Please Fill In All Required Fields</div>
<br>
<form id="contact-form" method="POST" action="forminactive.htm">
				<fieldset id="contact-form-set">
					<label for="name">Your name:</label> <br /> <input type="text" name="name" id="name" class="txt-box" />
					<br />
					
					<label for="email">E-mail address:</label> <span id="email-error"></span> <br /> <input type="text" name="email" id="email" class="txt-box" />
					<br />
					
					<label for="subject">Message subject:</label> <br /> <input type="text" name="subject" id="subject" class="txt-box" /> <br />
					
					<label for="message">Message:</label> <span id="message-error"></span> <br /> <textarea name="message" id="message" class="txt-area" rows="50" cols="100"></textarea> <br />
				
					<input type="button" name="submit" value="" class="btn-sbmt" onclick="sendForm()" /> <div id="message-pbar"/></div>
				</fieldset>
</form>
2

I see this question was never answered.

I had to do something similar to what you did today. After doing some research on Yahoo, I settled on the following:

Set your <div> to have the style display: none. This will take the div out of the layout. Your content will shift when you need to display the hidden div using javascript like the following:

document.getElementById(‘hiddendiv’).style.display=‘block’;

That will display the previously hidden div. Now to display the error text in the hidden div, you’ve got to do that in your callback function that you specifiy in your Ajax call.

If you don’t want to take the hidden div out of the layout, you could set the style of the div style=“visibility: hidden;”. Then in your javascript you could make your invisible div visible by doing document.getElementById(‘hiddendiv’).style.visibility=‘visible’;

I’m a javascript newbie. But you should get the general idea from this.