www.webdeveloper.com
Results 1 to 2 of 2

Thread: Form submit button

  1. #1
    Join Date
    Apr 2011
    Posts
    19

    Form submit button

    Hi i'm having problems for my form to validate it keeps the jumping to the first function validate Name an stays highlighted , i dont know what to put in the clear all function so it jumps to the next non validated item

    Please advise

    Code:
    function validate_form(form)
    {
    	var complete=false;
    
    //	Ensure that only one error message is diaplayed at a time
    	if(complete)
    	{
    		clear_all();
    		complete = checkUsernameForLength(form.username.value);
    	}
    	if(complete)
    	{
    		clear_all();
    		complete = checkaddress(form.address.value);
    	}
    	if(complete)
    	{
    		clear_all();
    		complete = checkaddress(form.address.value);
    	}
    	
    	if (complete)
    	{
    		clear_all();
    		complete = checkphone(form.phone.value);
    	}
    	if (complete)
    	{
    		clear_all();
    		complete = checkEmail(email.phone.value);
    	}
    		
    }
    
    //Clear all error messages and red areas
    function clear_all()
    {
    	
    }
    
     
     
     
    // This function checks if the username field
    // is at least 6 characters long.
    // If so, it attaches class="welldone" to the 
    // containing fieldset.
     
    function checkUsernameForLength(whatYouTyped) {
    	var fieldset = whatYouTyped.parentNode;
    	var txt = whatYouTyped.value;
    	if (txt.length > 2) {
    		fieldset.className = "welldone";
    	}
    	else {
    		fieldset.className = "";
    	}
    }
     
    
    // This function checks the email address to be sure
    // it follows a certain pattern:
    // blah@blah.blah
    // If so, it assigns class="welldone" to the containing
    // fieldset.
     
    function checkEmail(whatYouTyped) {
    	var fieldset = whatYouTyped.parentNode;
    	var txt = whatYouTyped.value;
    	if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
    		fieldset.className = "welldone";
    	} else {
    		fieldset.className = "";
    	}
    }
     
     // If the address is at least 4 characters long, the containing 
    // fieldset is assigned class="kindagood".
    
    function checkaddress(whatYouTyped) {
    	var fieldset = whatYouTyped.parentNode;
    	var txt = whatYouTyped.value;
    	if (txt.length > 3 && txt.length <10) {
    		fieldset.className = "welldone";
    	}
    	 else {
    		fieldset.className = "";
    	}
    }
     
     // If the phone is at least 8characters long, the containing 
    // fieldset is assigned class="kindagood".
    // fieldset is assigned class="welldone", to give the user
    
    function checkphone(whatYouTyped) {
    	var fieldset = whatYouTyped.parentNode;
    	var txt = whatYouTyped.value;
    	 if ( /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/.test(txt)) {
    		fieldset.className = "welldone";
    	} else {
    		fieldset.className = "FAILS";
    	}
    }
    
    // this part is for the form field hints to display
    // only on the condition that the text input has focus.
    // otherwise, it stays hidden.
     
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }
     
     
    function prepareInputsForHints() {
      var inputs = document.getElementsByTagName("input");
      for (var i=0; i<inputs.length; i++){
        inputs[i].onfocus = function () {
          this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
        }
        inputs[i].onblur = function () {
          this.parentNode.getElementsByTagName("span")[0].style.display = "none";
        }
      }
    }
    addLoadEvent(prepareInputsForHints);
     
     function submitform()
    {
     if(document.basicform.onsubmit())
     {
    	 //this check triggers the validations
        document.basicform.submit();
     }
    }

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Firstly, I advise against displaying only one error at a time. That is quite annoying. Better to get all errors at once and display as a list of corrections.

    Secondly, you are declaring "complete" as false, then repeating the "if(complete)" over and over and over. What?? Your function clearall() has no code contained within. And you copied/pasted the wrong part of the object between phone and email.

    Try something like this:
    Code:
    function checkData() {
      var warn = "", df = document.forms["enter form name here"];
      if(df.username.value == "") {
        warn += "Please enter a Username\n";
      }
      if(df.address.value == "") {
        warn += "Please enter an Address\n";
      }
    // blah blah blah SNIP
      if(warn != "") {alert(warn); return false;}
      else {return true;}
    }
    Then in the opening FORM tag, add onSubmit="return checkData();" as a parameter.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles