SitePoint Sponsor

User Tag List

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

    Question Form Error Box Validation

    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 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 javascript in my head section or anything, it would just all happen from the js file.

    Javascript Code
    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>
    Thanks for any help in advance.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should get with the person in this thread, they seem to have the same problem

    My changes are in blue...

    Code:
    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("hidden").style.display = 'none';
        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();
      }
      else {
        document.getElementById("hidden").style.display = 'block';
      }
    }
    But instead of hiding it when there's no error, just hide it in CSS:
    Code:
    #hidden {
      display: none;
    }
    Last edited by MikeFoster; Feb 8, 2007 at 23:55. Reason: this might be closer to what you wanted

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks "MikeFoster"
    That Works Perfectly!!

    Next Problem..Php File


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
  •