Web Analytics Made Easy -
StatCounter Form help - CodingForum

Announcement

Collapse
No announcement yet.

Form help

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Form help

    How can i make the error alert appear after the text box instead of before it. Any help will be appreciated.

    This is what it looks like at the moment:
    The problem is what happens when you click on the submit button and nothing has been filled in.

    Here is the code that i have at the moment:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    <title>Viscalite - Contact Us</title>
    <body onload="document.agreeform.reset()">
    <script type = "text/JavaScript">
    
    function verify() {
    	var errors = false;
    	// get rid of past error messages, if any
    	s = document.getElementsByTagName('strong');
    	
    	for (i = s.length-1; i >=0; i--) {
    		if (s[i].firstChild.nodeValue == " Error:")
    			s[i].parentNode.removeChild(s[i])
    	}
    	
    	s = document.getElementsByTagName('input');
    	// validate all inputs
    	
    	a = new Array();
    	b = new Array();
    
    	x = 0;
    	y = 0;
    	
    	// loop and extract all the names of radio sets
    	for (i = 0; i < s.length; i++) {
    		// add if its not already there
    		if (s[i].type == "radio") {
    			// add all checked sets to b
    			if (s[i].checked == true) {
    				b[y] = s[i].name;
    				y++;
    			}
    			// add all 
    			if  (a.toString().indexOf(s[i].name)==-1) {
    				a[x] = s[i].name;
    				x++;
    			}
    		}
    		
    		if (!s[i].value && s[i].type != "hidden") {
    			insertError(s[i]);
    			errors = true;
    		}
    	}
    
    	// loop all the radio sets, and if any aren't checked, create error
    	for (i = 0; i < a.length; i++) {
    		if  (b.toString().indexOf(a[i])==-1) {
    			insertError(document.getElementsByName(a[i])[0]);
    			errors = true;
    		}
    	}
    		
    	s = document.getElementsByTagName('textarea');
    	//validate all textareas
    	for (i = 0; i < s.length; i++) {
    	
    		if (!s[i].value) {
    			insertError(s[i]);
    			errors = true;
    		}
    
    	}	
    
    	if (errors) return false;
    }
    
    function insertError(s) {
    	m = document.createElement('strong');
    	m.appendChild(document.createTextNode(" Error:"));
    	m.setAttribute('class', 'validError');
    	s.focus();
    	s.parentNode.insertBefore(m, s);
    	s.parentNode.insertBefore(document.createTextNode(' '), s);
    }
    
    window.onload = function () {
    	document.getElementsByTagName('form')[0].onsubmit = verify;
    }
    </script>
    <style type="text/css">
    
    label{
    float: left;
    width: 120px;
    font-weight: bold;
    }
    
    input, textarea{
    width: 180px;
    margin-bottom: 5px;
    }
    
    textarea{
    width: 250px;
    height: 150px;
    }
    
    .boxes{
    width: 1em;
    }
    
    #submitbutton{
    margin-left: 120px;
    margin-top: 5px;
    width: 90px;
    }
    
    br{
    clear: left;
    }
    
    
    </style>
    </head>
    
    <body>
    <form name="agreeform" method="post" enctype="text/plain" action='mailto:[email protected]'>
    
    <label for="firstname">First Name</label>
    <input type="text" name = "fullname" value=""/>
    <br />
    
    <label for="emailaddress">Email Address:</label>
    <input type="text" name="email" value=""  onChange="javascript:this.value=this.value.toLowerCase();"/>
    <br />
    
    <label for="message">Message</label>
    <textarea name="Message"></textarea>
    <br />
    
    <label for="terms">Agree to Terms?</label>
    <input name="agreecheck" type="checkbox" name="terms"/>
    <br />
    
    <input type="submit" value="Submit!" id="submitbutton"/>
    
    </form>
    
    </body>
    </html>
    Last edited by mw2005; Aug 6, 2005, 03:19 PM.
    Get Mozilla Firefox

  • #2
    Give this a try:
    Code:
    function insertError(s) {
    	m = document.createElement('strong');
    	m.appendChild(document.createTextNode(" Error:"));
    	m.setAttribute('class', 'validError');
    	s.focus();
    	s.parentNode.insertBefore(m, s.nextSibling);
    	s.parentNode.insertBefore(document.createTextNode(' '), s.nextSibling);
    }
    ScriptingMagic.com

    Comment


    • #3
      That works fine thanks, How can I syle the error message to match the rest of the form? eg. colour, font, font size etc.

      Here is the code which i have so far:
      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
      
      <html>
      
      <head>
      <title>-----------------</title>
      <body onload="document.agreeform.reset()">
      
      		<script type="text/javascript">
      
      function verify() {
      	var errors = false;
      	// get rid of past error messages, if any
      	s = document.getElementsByTagName('strong');
      	
      	for (i = s.length-1; i >=0; i--) {
      		if (s[i].firstChild.nodeValue == " Error:")
      			s[i].parentNode.removeChild(s[i])
      	}
      	
      	s = document.getElementsByTagName('input');
      	// validate all inputs
      	
      	a = new Array();
      	b = new Array();
      
      	x = 0;
      	y = 0;
      	
      	// loop and extract all the names of radio sets
      	for (i = 0; i < s.length; i++) {
      		// add if its not already there
      		if (s[i].type == "radio") {
      			// add all checked sets to b
      			if (s[i].checked == true) {
      				b[y] = s[i].name;
      				y++;
      			}
      			// add all 
      			if  (a.toString().indexOf(s[i].name)==-1) {
      				a[x] = s[i].name;
      				x++;
      			}
      		}
      		
      		if (!s[i].value && s[i].type != "hidden") {
      			insertError(s[i]);
      			errors = true;
      		}
      	}
      
      	// loop all the radio sets, and if any aren't checked, create error
      	for (i = 0; i < a.length; i++) {
      		if  (b.toString().indexOf(a[i])==-1) {
      			insertError(document.getElementsByName(a[i])[0]);
      			errors = true;
      		}
      	}
      		
      	s = document.getElementsByTagName('textarea');
      	//validate all textareas
      	for (i = 0; i < s.length; i++) {
      	
      		if (!s[i].value) {
      			insertError(s[i]);
      			errors = true;
      		}
      
      	}	
      
      	if (errors) return false;
      }
      
      function insertError(s) {
      	m = document.createElement('strong');
      	m.appendChild(document.createTextNode(" Error:"));
      	m.setAttribute('class', 'validError');
      	s.focus();
      	s.parentNode.insertBefore(m, s.nextSibling);
      	s.parentNode.insertBefore(document.createTextNode(' '), s.nextSibling);
      }
      
      window.onload = function () {
      	document.getElementsByTagName('form')[0].onsubmit = verify;
      }
      </script>
      <LINK href="form.css" rel="stylesheet" type="text/css">
      </style>
      </head>
      
      <body>
      <form name="agreeform" method="post" enctype="text/plain" action='mailto:------------------' onSubmit = "return isMailReady(this);">
      
      <label for="firstname">First Name</label>
      <input type="text" name = "fullname" value=""/>
      <br />
      
      <label for="emailaddress">Email Address:</label>
      <input type="text" name="email" value=""  onChange="javascript:this.value=this.value.toLowerCase();"/>
      <br />
      
      <label for="message">Message</label>
      <textarea name="Message"></textarea>
      <br />
      
      <label for="terms">Agree to Terms?</label>
      <input name="agreecheck" type="checkbox"/>
      <br />
      
      <input type="submit" value="Submit!"/>
      
      </form>
      
      </body>
      </html>
      Last edited by mw2005; Aug 4, 2005, 05:06 AM.
      Get Mozilla Firefox

      Comment


      • #4
        Originally posted by Mongus
        Give this a try:
        Code:
        	m.setAttribute('class', 'validError');
        That should be changed to:
        Code:
        	m.className = 'validError';
        as some browsers don't like that when setting the class attribute.
        Glenn
        vBulletin Mods That Rock!

        Comment


        • #5
          Thanks for that. How can I syle the error message to match the rest of the form? eg. colour, font, font size etc.
          Get Mozilla Firefox

          Comment


          • #6
            Define the styles of validError class selector in your CSS. I supposed you have that defined since you use it.
            Glenn
            vBulletin Mods That Rock!

            Comment


            • #7
              The code that i was given for the validation was just JS? I tried adding a validError section in the CSS but that didn't seem to make any difference.
              Can you tell me what i need to do by giving me an example,

              Thanks,
              MW2005
              Get Mozilla Firefox

              Comment


              • #8
                Do you have something like this in form.css?
                Code:
                .validError {
                  color: red;
                  font: bold 12pt Verdana;
                }
                Glenn
                vBulletin Mods That Rock!

                Comment


                • #9
                  Cool Thanks for that. I missed out the dot before ValidError.
                  Get Mozilla Firefox

                  Comment


                  • #10
                    BIG problem. If a field is invalid it will say Error. If you keep pushing the submit button Error will keep appearing. how can you limit so it just appears once.

                    Try it. Push the submit button lots of times without filling in any fields and it will keep appearing.To see what i mean.

                    Any help will be appreciated,
                    Thanks,
                    MW2005
                    Get Mozilla Firefox

                    Comment


                    • #11
                      Code:
                      // change 
                      if (s[i].firstChild.nodeValue == " Error:")
                      // to
                      if (s[i].firstChild.nodeValue == "Invalid Input")
                      At the moment your script searchs for strong elements, whose firstChilds have the text " Error:". But you've changed the initial error message to "Invalid Input". So must change the search string in the cleaning up loop, too.

                      dumpfi
                      "Failure is not an option. It comes bundled with the software."
                      ....../)/)..(\__/).(\(\................../)_/)......
                      .....(-.-).(='.'=).(-.-)................(o.O)...../<)
                      ....(.).(.)("}_("}(.)(.)...............(.)_(.))¯/.
                      ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
                      Little did the bunnies suspect that one of them was a psychotic mass murderer with a 6 ft. axe.

                      Comment


                      • #12
                        The error message text nodes were not removed because their value is "Invalid Input" but you were looking for "Error:"

                        Change the condition to:

                        Code:
                        if (s[i].firstChild.nodeValue == "[B]Invalid Input[/B]")
                        Glenn
                        vBulletin Mods That Rock!

                        Comment


                        • #13
                          Thanks very much to both of you When I push F5 I want the form to reset. I have been given some code which i have included into the code below. Please can you tell me what i have doing wrong.

                          Thanks,
                          MW2005

                          Code:
                          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                             "http://www.w3.org/TR/html4/strict.dtd">
                          
                          <html>
                          
                          <head>
                          <title>--------- - Contact Us</title>
                          <body onload="document.agreeform.reset()">
                          <script type = "text/JavaScript" src = "validation.js">
                          </script>
                          <LINK href="form.css" rel="stylesheet" type="text/css">
                          </style>
                          </head>
                          
                          <body>
                          <form name="agreeform" method="post" enctype="text/plain" action='mailto:----------------------'>
                          
                          <label for="firstname">First Name</label>
                          <input type="text" name = "fullname" value=""/>
                          <br />
                          
                          <label for="emailaddress">Email Address:</label>
                          <input type="text" name="email" value=""  onChange="javascript:this.value=this.value.toLowerCase();"/>
                          <br />
                          
                          <label for="message">Message</label>
                          <textarea name="Message"></textarea>
                          <br />
                          
                          &nbsp;&nbsp;&nbsp;<input type="submit" value="Submit!" id="submitbutton"/>
                          
                          </form>
                          
                          </body>
                          </html>
                          Last edited by mw2005; Aug 5, 2005, 06:31 AM.
                          Get Mozilla Firefox

                          Comment


                          • #14
                            Does anybody know how to reset the form by pushing F5?
                            Get Mozilla Firefox

                            Comment


                            • #15
                              F5 default behavior is to reload the page, you cannot cancel it.
                              Just have a reset button and designate a shortcut to it via accesskey.

                              Code:
                              <input type="reset" value="Reset" [B]accesskey="r"[/B] title="You can also press ALT+R to activate this button" />
                              When ALT+R is pressed by the user, it's the same as clicking the reset button.
                              Last edited by glenngv; Aug 7, 2005, 10:11 PM.
                              Glenn
                              vBulletin Mods That Rock!

                              Comment

                              Working...
                              X