MainStWebGuy Posted January 29, 2009 Share Posted January 29, 2009 Hello all, I'm new to both PHP and javascript and am having trouble with validating a form. The form is using a bunch of php to populate certain fields and i thought that might be why the validation wasn't working. To narrow down my problems, i "dumbed down" my form to it's almost pure HTML as you'll see below. I'm hoping to have two "validation" checks when the form is submitted: the first to make sure the the fields have been filled out (name, phone number, etc) and the second to check that the check box for "Agree to terms and conditions" is checked. As it stands now, the checkbox validation is working properly, but if i leave the fields of the form empty, the form will still submit so long as my checkbox is checked. The javascript code that validates the fields was generated through dreamweaver's GUI but it's not working... what am i missing? is there a better way to g about validating the required fields and ensuring the user has agreed to the terms of service? Thanks in advance... now for the fun stuff: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Untitled Document</title> <script type="text/JavaScript"> <!-- <!-- This is the simple function to check the checkbox --> function DoTheCheck() { if (document.form2.accept.checked == false) { alert('You must agree to the terms and conditions'); return false; } else return true; } <!-- The following two functions were generated by dreamweaver to check that the name, phone, etc have been filled out. It also is supposed to check hat the name field contains letters, the phone - numbers, and the email is an mail address but they are not working --> function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_validateForm() { //v4.0 var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments; for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]); if (val) { nm=val.name; if ((val=val.value)!="") { if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@'); if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n'; } else if (test!='R') { num = parseFloat(val); if (isNaN(val)) errors+='- '+nm+' must contain a number.\n'; if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); min=test.substring(8,p); max=test.substring(p+1); if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n'; } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; } } if (errors) alert('The following error(s) occurred:\n'+errors); document.MM_returnValue = (errors == ''); } //--> </script> </head> <body> <form name="form2" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>"> <table border="0" cellspacing="0" cellpadding="2"> <tr> <td colspan="3"><strong>Company Information</strong></td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td>Company Name:</td> <td><input type="text" name="cName" /> </td> <td><input type="hidden" name="ediUser" value="<?php echo $_COOKIE['mainstreetComp'];?>" /></td> </tr> <tr> <td>Phone Number:</td> <td>(<input type="text" name="cPhone1" size="3" maxlength="3" />) <input type="text" name="cPhone2" size="3" maxlength="3" /> - <input type="text" name="cPhone3" size="4" maxlength="4" /> </td> <td> </td> </tr> <tr> <td>Fax Number:</td> <td>(<input type="text" name="faxNumber1" size="3" maxlength="3" />)<input type="text" name="faxNumber2" size="3" maxlength="3" /> - <input type="text" name="faxNumber3" size="4" maxlength="4" /> </td> <td> </td> </tr> <tr> <td>Company Address:</td> <td><input type="text" name="companyAddress" /> </td> <td> </td> </tr> <tr> <td>City:</td> <td><input type="text" name="city" /> </td> <td> </td> </tr> <tr> <td>State:</td> <td><input type="text" name="state" size="3" maxlength="2" /> </td> <td> </td> </tr> <tr> <td>Zip Code:</td> <td><input type="text" name="zipCode" size="6" maxlength="5" /> </td> <td> </td> </tr> <tr> <td>Website Address (optional):</td> <td><input type="text" name="website" /> </td> <td><input type="hidden" name="otherUrl" /></td> </tr> </tr> <tr> <td>Fed Tax ID:</td> <td><input type="text" name="fedTaxId1" size="3" maxlength="2" />'. ' - '. '<input type="text" name="fedTaxId2" size="8" maxlength="7" /> </td> <td> </td> </tr> <tr> <td>Owner's Name:</td> <td><input type="text" name="ownersName" /> </td> <td> </td> </tr> <tr> <td>Person in charge of EDI/Glaxis <br /> (optional):</td> <td><input type="text" name="eCommerceManager" /> </td> <td> </td> </tr> <tr> <td>Email Address:</td> <td><input type="text" name="emailAddress" /> </td> <td> </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td>What service form do you need to submit?<br />(Froms will appear below)</td> <td><select name="serviceForm" onChange="document.form2.submit();"> <option>Select One</option> <option>EDI</option> <option>Glaxis</option> <option>EDI and Glaxis</option> </select> </td> <td> </td> </tr> <tr> <td colspan="2"> </td> <td> </td> </tr> <tr> <td colspan="2"><strong>EDI Service Request</strong></td> <td> </td> </tr> <tr> <td>EDI Volume Plan:</td> <td><input name="volumePlan" type="radio" value="standard volume" checked="checked" /> Standard Volume<br /> <input name="volumePlan" type="radio" value="low volume" /> Low Volume<br /> </td> <td> <a href="#">What is this?</a></td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td>How would you like to pay your monthly<br />fees? </td> <td><input type="radio" value="E.F.T." name="paymentOptions" checked="checked" />E.F.T. (Direct Debit)<br /> <input type="radio" value="Send a Check" name="paymentOptions" />Send a Check</td> <td> <a href="#">Why choose E.F.T.?</a></td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="2"> </td> <td> </td> </tr> <tr> <td colspan="2"><strong>Glaxis Service Request</strong></td> <td> </td> </tr> <tr> <td>Previous Lynx Dispatch Number:</td> <td><input type="text" name="lynxDispatch" size="10" maxlength="9"/></td> <td> <a href="#">What is this?</a></td> </tr> <tr> <td>Requested Start Date (mm/dd/yyyy):</td> <td><input type="text" name="liveDateMonth" size="2" maxlength="2"/>/<input type="text" name="liveDateDay" size="2" maxlength="2"/>/<input type="text" name="liveDateYear" size="4" maxlength="4"/></td> <td> </td> </tr> <tr> <td>Would you like to setup PPG online ordering?</td> <td><input name="ppgOnlineOrdering" value="Yes" type="radio" checked="checked" />Yes <input name="ppgOnlineOrdering" value="No" type="radio" />No </td> <td> <a href="#">What is this?</a></td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3"><strong>Additional Comments</strong></td> </tr> <tr> <td colspan="2"><textarea name="comments" cols="55" rows="5"></textarea></td> <td> </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3"><input type="checkbox" name="accept" value="I agree" />I agree to the <a href="#">Terms of Service</a></td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3" valign="top"><input type="submit" name="submit2" value="Send Form" onclick="return(DoTheCheck()); addon.value='go';MM_validateForm('cName','','R','cPhone1','','RisNum','cPhone2','','RisNum','cPhone3','','RisNum','faxNumber1','','RisNum','faxNumber2','','RisNum','faxNumber3','','RisNum','companyAddress','','R','city','','R','state','','R','zipCode','','RisNum','fedTaxId1','','RisNum','fedTaxId2','','RisNum','ownersName','','R','emailAddress','','RisEmail','lynxDispatch','','RisNum');return document.MM_returnValue" /></td> </tr> </table> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
F1Fan Posted January 30, 2009 Share Posted January 30, 2009 I have two suggestions. First, the syntax of "document.form.element" doesn't work that well with FF and you should probably try using document.getElementById(elementid) instead. I've never had a problem with that syntax and FF. Second, your code is assuming that the user will have JavaScript enabled. You can't only use JS to validate your stuff. You'll need additional validation in your PHP code. Quote Link to comment Share on other sites More sharing options...
MainStWebGuy Posted January 30, 2009 Author Share Posted January 30, 2009 What would you suggest? I've never used php for validation (i'm still new to it). Where would i check for it? could you give me an example? for instance, if i wanted to ensure that the company name field was filled out with only letters and spaces, how would i code it? Quote Link to comment Share on other sites More sharing options...
F1Fan Posted January 30, 2009 Share Posted January 30, 2009 Basically, after you post to the page, have some conditional statements that determine whether you should save to the database (or whatever you're doing to the entered data). Here's a VERY basic example (at the top of the page): if (isset($_POST['submit2'])){ if (!isset($_POST['accept'])) echo "You must accept the terms."; else //do whatever you want, they accepted it! } 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.