Form validation, please help

Discussion in 'JavaScript' started by midohioit, Aug 12, 2007.

  1. #1
    Can someone please help me? I can get the textboxes to validate with a popup if they are not filled in but not the checkboxes.

    html form:
    
    <form action="http://www.midohioit.com/quote/quote.php" enctype="multipart/form-data" method="post" name="quoteform" id="quoteform">
    			<input type="hidden" name="form" value="true">
                  <p style="color:#FFB050; font-weight:bold;">Development Quote <font color="#FFFFFF"><b>* 
                    Desinates required fields </b></font></p>
                  <p style="color:#FFB050; font-weight:bold;">&nbsp;</p>
                  <div style="width:476px;height:1px;border-top:1px dashed #506473;padding-bottom:8px;"></div>
                  <table width="100%" border="0" cellpadding="0" cellspacing="0" class="body">
                    <tr> 
                      <td valign="top">
                        <table width="114%" border="0" cellpadding="3" cellspacing="0" class="body">
                          <tr> 
                            <td width="7" height="25"><span style="color:">*</span></td>
                            <td height="35" width="152">Contact Name:</td>
                            <td width="339" height="35" align="right"> 
                              <input name="name" class="quoteform" id="name" style="width:200px;" onFocus="this.style.background='#FFFBCF'" onBlur="this.style.background='#FFFFFF'" value="" size="20" maxlength="50">
                            </td>
                          </tr>
                          <tr> 
                            <td width="7" height="25"><span style="color:">*</span></td>
                            <td height="35" width="152">Company Name:</td>
                            <td width="339" height="35" align="right"> 
                              <input name="company2" id="company" onFocus="this.style.background='#FFFBCF'" onBlur="this.style.background='#FFFFFF'" size="20" maxlength="50" style="width:200px;" value="">
                            </td>
                          </tr>
                          <tr> 
                            <td width="7" height="109">*</td>
                            <td height="109" width="152">Work needed</td>
                            <td width="339" height="109"> 
                              
    						  <span onMouseover="ddrivetip('Website design - Select this option if you want to have a new website designed.','#506473', 300)" onMouseout="hideddrivetip()">
    						  <input id="designtype1" name="designtype1" type="checkbox" onFocus="show('designtype');return true;" value="Website design">
                              <label for="designtypeecommerce">Website design </label></span> 
                              <br>
                              
    						  <span onMouseover="ddrivetip('Hosting - Select this option if you need Hosting or would like to have us host your current site.','#506473', 300)" onMouseout="hideddrivetip()">
    						  <input id="designtype2" name="designtype2" type="checkbox" onFocus="hide('EcommerceQuestions');return true;" value="Hosting">
                              <label for="designtypeinformational">Hosting</label></span><br>
                              
    						  <span onMouseover="ddrivetip('Website Makeover - Select this option if your existing website does not look professional and you want to change the looks.','#506473', 300)" onMouseout="hideddrivetip()">
    						  <input id="designtype3" name="designtype3" type="checkbox" onFocus="hide('EcommerceQuestions');return true;" value="Website Makeover" >
                              <label for="designtypeother">Website Makeover</label> 
                              </span> 
                              </p>
                             
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  
                  <table width="100%" border="0" cellpadding="3" cellspacing="0" class="body">
                    <tr> 
                      <td width="10">&nbsp;</td>
                      <td height="35">How did you hear about us?</td>
                      <td width="200" align="right"> 
                        <select name="referrer" id="referrer" style="width: 200px;" onFocus="this.style.background='#FFFBCF'" onBlur="this.style.background='#FFFFFF'">
                          <option value=""  selected>Please Select</option>
                          <option value="Google Search">Google Search</option>
                          <option value="Yahoo Search">Yahoo Search</option>
                          <option value="MSN Search">MSN Search</option>
                          <option value="Other Search Engine">Other Search Engine</option>
                          <option value="Friend/Associate">Friend/Associate</option>
                          <option value="Link from another website">Link from another 
                          website</option>
                          <option value="Phone Book/Print Ad">Phone Book/Print Ad</option>
                        </select>
    
                     </form>
    
    <script language="JavaScript" type="text/javascript">
     
     var frmvalidator = new Validator("quoteform");
     
     frmvalidator.addValidation("name","req","Please enter your Name");
     frmvalidator.addValidation("name","maxlen=50","Maximum length for Name is 50 characters.");
     frmvalidator.addValidation("name","minlen=3","Minimum length for Name is 3 characters.");
     frmvalidator.addValidation("name","alphanum");
     frmvalidator.addValidation("designtype1","checkbox");
     frmvalidator.addValidation("designtype2","checkbox");
     frmvalidator.addValidation("designtype3","checkbox"); 
    </script>
    
    Code (markup):
    here is the gen_validatorv2.js file:
    
    function Validator(frmname)
    {
      this.formobj=document.forms[frmname];
    	if(!this.formobj)
    	{
    	  alert("BUG: couldnot get Form object "+frmname);
    		return;
    	}
    	if(this.formobj.onsubmit)
    	{
    	 this.formobj.old_onsubmit = this.formobj.onsubmit;
    	 this.formobj.onsubmit=null;
    	}
    	else
    	{
    	 this.formobj.old_onsubmit = null;
    	}
    	this.formobj.onsubmit=form_submit_handler;
    	this.addValidation = add_validation;
    	this.setAddnlValidationFunction=set_addnl_vfunction;
    	this.clearAllValidations = clear_all_validations;
    	this.validateInput = validate_Input;
    	this.CheckBoxValidation = CheckBoxValidation;
    }
    function set_addnl_vfunction(functionname)
    {
      this.formobj.addnlvalidation = functionname;
    }
    function clear_all_validations()
    {
    	for(var itr=0;itr < this.formobj.elements.length;itr++)
    	{
    		this.formobj.elements[itr].validationset = null;
    	}
    }
    function form_submit_handler()
    {
    	for(var itr=0;itr < this.elements.length;itr++)
    	{
    		if(this.elements[itr].validationset &&
    	   !this.elements[itr].validationset.validate())
    		{
    		  return false;
    		}
    	}
    	if(this.addnlvalidation)
    	{
    	  str =" var ret = "+this.addnlvalidation+"()";
    	  eval(str);
        if(!ret) return ret;
    	}
    	return true;
    }
    function add_validation(itemname,descriptor,errstr)
    {
      if(!this.formobj)
    	{
    	  alert("BUG: the form object is not set properly");
    		return;
    	}//if
    	var itemobj = this.formobj[itemname];
      if(!itemobj)
    	{
    	  alert("BUG: Couldnot get the input object named: "+itemname);
    		return;
    	}
    	if(!itemobj.validationset)
    	{
    	  itemobj.validationset = new ValidationSet(itemobj);
    	}
      itemobj.validationset.add(descriptor,errstr);
    }
    function ValidationDesc(inputitem,desc,error)
    {
      this.desc=desc;
    	this.error=error;
    	this.itemobj = inputitem;
    	this.validate=vdesc_validate;
    }
    function vdesc_validate()
    {
     if(!V2validateData(this.desc,this.itemobj,this.error))
     {
        this.itemobj.focus();
    		return false;
     }
     return true;
    }
    function ValidationSet(inputitem)
    {
        this.vSet=new Array();
    	this.add= add_validationdesc;
    	this.validate= vset_validate;
    	this.itemobj = inputitem;
    }
    function add_validationdesc(desc,error)
    {
      this.vSet[this.vSet.length]= 
    	  new ValidationDesc(this.itemobj,desc,error);
    }
    function vset_validate()
    {
       for(var itr=0;itr<this.vSet.length;itr++)
    	 {
    	   if(!this.vSet[itr].validate())
    		 {
    		   return false;
    		 }
    	 }
    	 return true;
    }
    
    function V2validateData(strValidateStr,objValue,strError) 
    { 
        var epos = strValidateStr.search("="); 
        var  command  = ""; 
        var  cmdvalue = ""; 
        if(epos >= 0) 
        { 
         command  = strValidateStr.substring(0,epos); 
         cmdvalue = strValidateStr.substr(epos+1); 
        } 
        else 
        { 
         command = strValidateStr; 
        } 
        switch(command) 
        { 
    	   	case "checkbox":
    		{
    			if(!objValue.checked)
                           {
    				if(!strError || strError.length ==0) 
                                   {
    				 strError =objValue.name+" needs to be checked";
    			       }
    				alert(strError);
      			    return false; 
    			}
    			break;
    		}// case "checkbox"
    			
    			
            case "req": 
            case "required": 
             { 
               if(eval(objValue.value.length) == 0) 
               { 
                  if(!strError || strError.length ==0) 
                  { 
                    strError = objValue.name + " : Required Field"; 
                  }//if 
                  alert(strError); 
                  return false; 
               }//if 
               break;             
             }//case required 
            case "maxlength": 
            case "maxlen": 
              { 
                 if(eval(objValue.value.length) >  eval(cmdvalue)) 
                 { 
                   if(!strError || strError.length ==0) 
                   { 
                     strError = objValue.name + " : "+cmdvalue+" characters maximum "; 
                   }//if 
                   alert(strError + "\n[Current length = " + objValue.value.length + " ]"); 
                   return false; 
                 }//if 
                 break; 
              }//case maxlen 
    
    Code (markup):
     
    midohioit, Aug 12, 2007 IP