SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Form Valdiation- Hidden Error Div

    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.
    Code:
    
    //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;
    }
    
    //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;	
    	}
    
    	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.

    Code:
    <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. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,833
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •