simple_man_11 Posted July 22, 2007 Share Posted July 22, 2007 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: <script language="JavaScript" src="gen_validatorv2.js" type="text/javascript"></script> <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"> <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"> <input id="designtype" name="designtype" type="checkbox" onFocus="show('EcommerceQuestions');return true;" value="Website design"> </form> Here is another sniplet of the validation: <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("designtype","req","Please enter Work needed"); <--does not work for checkbox and the final part of the validation (gen_validatorv2.js): this.addValidation = add_validation; 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); } Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted July 22, 2007 Share Posted July 22, 2007 I don't see the frmvalidator object script do have that one included to your page? it should look something like function Validator(id){ this.id=id; } Quote Link to comment Share on other sites More sharing options...
simple_man_11 Posted July 22, 2007 Author Share Posted July 22, 2007 do you mean this? If so then this is in 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; } Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted July 22, 2007 Share Posted July 22, 2007 i think this line looks a bit odd this.addValidation = add_validation; try placing that line inside the Validator function like so function Validator(frmname) { this.addValidation = add_validation; this.formobj=document.forms[frmname]; not sure if that will solve it Quote Link to comment Share on other sites More sharing options...
simple_man_11 Posted July 22, 2007 Author Share Posted July 22, 2007 That function is working just fine for all the other textboxes, I just can not get it to work for a checkbox. I am ok with another function, just don't know how to write it for a checkbox. Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted July 23, 2007 Share Posted July 23, 2007 i found out the site where you downloaded the script and the code you gave was way to little to fix your problem. anyway here is your solution. in your gen_validatorv2.js file look up the function function V2validateData() probably on line 160 then find the code inside that function that looks like switch(command) { that one must be on line 174 now place the following code after the { character so your code looks like and make sure the other cases arent deleted. switch(command) { case "checkbox": if(!objValue.checked){ alert(objValue.name+" needs to be checked"); } break; now on your form page validate the checkbox as followed frmvalidator.addValidation("designtype","checkbox") it should work now Quote Link to comment Share on other sites More sharing options...
simple_man_11 Posted July 28, 2007 Author Share Posted July 28, 2007 Kat, I appreciate your help but it is still not working. here is my html page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- website design quote --> <html> <head> <title>website design quote, development quote, and web design quote</title> <base href="http://www.finerdesign.com/"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta content="website design quote, design quote, development quote, web design quote, design, quote" name="keywords"> <meta content="website design quote and development quote form" name="description"> <link href="design.css" rel="stylesheet" type="text/css"> <script language="JavaScript" src="gen_validatorv2.js" type="text/javascript"></script> <script language="JavaScript" src="tooltip.js" type="text/javascript"></script> <script type="text/JavaScript"> function show(id) { if (document.getElementById(id).style.display == 'none') { document.getElementById(id).style.display = ''; } } function hide(id) { document.getElementById(id).style.display = 'none'; } function clearDefault(el) { if (el.defaultValue==el.value) el.value = "" } function clearCSS(el) { // If Dynamic Style is supported, clear the style if (el.style) el.style.cssText = "" } function clearDefaultandCSS(el) { if (el.defaultValue==el.value) el.value = "" // If Dynamic Style is supported, clear the style if (el.style) el.style.cssText = "" } </script> </head> <body bgcolor="#30414E" > <table width="100%" border="0"> <tr> <td bgcolor="#30414E"> <?php if ($form =="true") { if ($designtype1 != "Website design" && $designtype2 != "Hosting" && $designtype3 !="Website Makeover") { echo "</br><h3><center><font color='#FF0000'> did not pass, try again </font> </h3></center>"; echo "<h3><center><font color='#FF0000'> least one required checkbox, in the *Work Needed area.</font> </h3></center></br></br>"; echo"<center><A HREF='javascript:javascript:history.go(-1)'>Click here to go back</A></center></br>"; } else { echo "</br><h3><center><font color='#FF0000'> <b>$name, we have received your request, thank you. Someone from our staff will be calling you shortly at: ($area_code) $phone_prefix-$phone_suffix. </font></h3></center> </br></br>"; } } // form has not yet been submitted else { echo " "; } ?> </td> </tr> </table> <div align="center"></div> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="height:100%"> <tr> <td height="1" colspan="2" bgcolor="#506473"></td> </tr> <tr> <td width="260" align="right" valign="top" bgcolor="#30414E" class="body"> <div style="width:220px;padding:2px;padding-top:9px;text-align:left"> <h4> </h4> </div> </td> <td valign="top" bgcolor="#30414E" style="padding:10px;"> <table width="516" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="body"> <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;"> </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="25"><span style="color:">*</span></td> <td height="35" width="152">Phone</td> <td width="339" height="35" align="right"> <table width="200" border="0" cellpadding="0" cellspacing="0" class="body"> <tr> <td> <input name="area_code" id="area_code" style="width:30px;" class="phone" onFocus="this.style.background='#FFFBCF'" onBlur="this.style.background='#FFFFFF'" value="" size="5" maxlength="3"> - <input name="phone_prefix" id="phone_prefix" style="width:30px;" class="phone" onFocus="this.style.background='#FFFBCF'" onBlur="this.style.background='#FFFFFF'" value="" size="5" maxlength="3"> - <input name="phone_suffix" id="phone_suffix" style="width:36px;" class="phone" onFocus="this.style.background='#FFFBCF'" onBlur="this.style.background='#FFFFFF'" value="" size="5" maxlength="4"> </td> <td align="right"></td> <td align="right"> </td> </tr> </table> </td> </tr> <!--<tr> <td height="25"></td> <td height="25">Preference: </td> <td height="25"><select name="contactpref" class="quoteform" id="contactpref" style="width:150px;" onfocus="this.style.background='#FFFBCF'" onblur="this.style.background='#FFFFFF'"> <option value="" selected>Please Select</option> <option value="Email">I prefer an email contact</option> <option value="Phone">I prefer a phone contact</option> <option value="Either">Either contact method is fine</option> </select></td> </tr> --> <tr> <td width="7" height="25">*</td> <td height="35" width="152">Project Budget: </td> <td width="339" height="35" align="right"> <select name="budget" class="quoteform" id="budget" style="width:200px;" onFocus="this.style.background='#FFFBCF'" onBlur="this.style.background='#FFFFFF'"> <option value="" selected>Please Select</option> <option value="1,500-2,500">$1,500-$2,000</option> <option value="2,500-5,000">$2,000-$3,000</option> <option value="5,000-7,500">$3,000-$5,000</option> <option value="7,500-10,000">$5,000-$7,000</option> <option value="10,000 Plus">$10,000 and up</option> </select> <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"> </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("besttime","maxlen=50","Maximum length for Best time to call is is 50 characters."); frmvalidator.addValidation("besttime","req","Please enter the best time to contact you."); frmvalidator.addValidation("besttime","maxlen=50","Maximum length for Best contact time is 50 characters."); frmvalidator.addValidation("besttime","minlen=3","Minimum length for Best contact time is 3 characters."); frmvalidator.addValidation("besttime","alphanum"); frmvalidator.addValidation("designtype1","checkbox"); frmvalidator.addValidation("designtype2","checkbox"); frmvalidator.addValidation("designtype3","checkbox"); <div id="dhtmltooltip"></div> <script type="text/javascript" src="tooltip.js"></script> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-336453-1"; urchinTracker(); </script> </body> </html> 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 validateEmailv2(email) { // a very simple email validation checking. // you can add more complex email checking if it helps if(email.length <= 0) { return true; } var splitted = email.match("^(.+)@(.+)$"); if(splitted == null) return false; if(splitted[1] != null ) { var regexp_user=/^\"?[\w-_\.]*\"?$/; if(splitted[1].match(regexp_user) == null) return false; } if(splitted[2] != null) { var regexp_domain=/^[\w-\.]*\.[A-Za-z]{2,4}$/; if(splitted[2].match(regexp_domain) == null) { var regexp_ip =/^\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]$/; if(splitted[2].match(regexp_ip) == null) return false; }// if return true; } return false; } 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) { alert(objValue.name+" needs to be checked"); } 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 case "minlength": case "minlen": { if(eval(objValue.value.length) < eval(cmdvalue)) { if(!strError || strError.length ==0) { strError = objValue.name + " : " + cmdvalue + " characters minimum "; }//if alert(strError + "\n[Current length = " + objValue.value.length + " ]"); return false; }//if break; }//case minlen case "alnum": case "alphanumeric": { var charpos = objValue.value.search("[^A-Za-z0-9]"); if(objValue.value.length > 0 && charpos >= 0) { if(!strError || strError.length ==0) { strError = objValue.name+": Only alpha-numeric characters allowed "; }//if alert(strError + "\n [Error character position " + eval(charpos+1)+"]"); return false; }//if break; }//case alphanumeric case "num": case "numeric": { var charpos = objValue.value.search("[^0-9]"); if(objValue.value.length > 0 && charpos >= 0) { if(!strError || strError.length ==0) { strError = objValue.name+": Only digits allowed "; }//if alert(strError + "\n [Error character position " + eval(charpos+1)+"]"); return false; }//if break; }//numeric case "alphabetic": case "alpha": { var charpos = objValue.value.search("[^A-Za-z]"); if(objValue.value.length > 0 && charpos >= 0) { if(!strError || strError.length ==0) { strError = objValue.name+": Only alphabetic characters allowed "; }//if alert(strError + "\n [Error character position " + eval(charpos+1)+"]"); return false; }//if break; }//alpha case "alnumhyphen": { var charpos = objValue.value.search("[^A-Za-z0-9\-_]"); if(objValue.value.length > 0 && charpos >= 0) { if(!strError || strError.length ==0) { strError = objValue.name+": characters allowed are A-Z,a-z,0-9,- and _"; }//if alert(strError + "\n [Error character position " + eval(charpos+1)+"]"); return false; }//if break; } case "email": { if(!validateEmailv2(objValue.value)) { if(!strError || strError.length ==0) { strError = objValue.name+": Enter a valid Email address "; }//if alert(strError); return false; }//if break; }//case email case "lt": case "lessthan": { if(isNaN(objValue.value)) { alert(objValue.name+": Should be a number "); return false; }//if if(eval(objValue.value) >= eval(cmdvalue)) { if(!strError || strError.length ==0) { strError = objValue.name + " : value should be less than "+ cmdvalue; }//if alert(strError); return false; }//if break; }//case lessthan case "gt": case "greaterthan": { if(isNaN(objValue.value)) { alert(objValue.name+": Should be a number "); return false; }//if if(eval(objValue.value) <= eval(cmdvalue)) { if(!strError || strError.length ==0) { strError = objValue.name + " : value should be greater than "+ cmdvalue; }//if alert(strError); return false; }//if break; }//case greaterthan case "regexp": { if(objValue.value.length > 0) { if(!objValue.value.match(cmdvalue)) { if(!strError || strError.length ==0) { strError = objValue.name+": Invalid characters found "; }//if alert(strError); return false; }//if } break; }//case regexp case "dontselect": { if(objValue.selectedIndex == null) { alert("BUG: dontselect command for non-select Item"); return false; } if(objValue.selectedIndex == eval(cmdvalue)) { if(!strError || strError.length ==0) { strError = objValue.name+": Please Select one option "; }//if alert(strError); return false; } break; }//case dontselect }//switch return true; } /* Copyright 2003 JavaScript-coder.com. All rights reserved. */ //* Checks each field in a form function validate_Input(strValidateStr,objValue,strError) { var ret = document.forms["quoteform"]; var itemobj = this.formobj[strValidateStr]; switch(command) { case "selmin": { ret = TestSelMin(objValue,cmdvalue,strError); break; } case "selone": { ret = TestSelectOneRadio(objValue,strError); break; } return ret; TestComparison(objValue,cmdvalue,command,strError); break; } } //switch return ret; Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted July 29, 2007 Share Posted July 29, 2007 I didn't really test the code well try this one it works fine with me case "checkbox": { if(!objValue.checked){ if(!strError || strError.length ==0) { strError =objValue.name+" needs to be checked"; } alert(strError); return false; } break; } And one tip try to use a good editor for editing your HTML files too see what errors you make in your html there a couple of error messages you will get in your javascript console because of bad code. Also try to look into tableless form CSS tutorials this will be more common in the future. Tables are such pain in the ass for layout. Quote Link to comment Share on other sites More sharing options...
simple_man_11 Posted August 2, 2007 Author Share Posted August 2, 2007 DJ, not sure how you tested it as I copied your post verbatim and the only warning that I get is after the page reloads. you can view the page with your code at: http://www.midohioit.com/quote/quote.php Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.