himesh Posted January 28, 2009 Share Posted January 28, 2009 HiI have modified a script that i found on the internet to validate my form and it works when its by itself in a window but when i place it within a div it does not work, could someone please shed some light on this.ThanksThis is the code by itself <html><head><script type="text/javascript">function validateFormOnSubmit(contactform) {var reason = ""; reason += validateName(contactform.Name); reason += validateEmail(contactform.Email); reason += validatePhone(contactform.Phone); reason += validateQuery(contactform.Query); if (reason != "") { alert("Some fields need correction:\n" + reason); return false; } alert("All fields are filled correctly"); return false;}function validateQuery(fld) { var error = ""; if (fld.value.length == 0) { fld.style.background = 'Yellow'; error = "You have not entered a Query.\n" } else { fld.style.background = 'White'; } return error; }function validateName(fld) { var error = ""; var illegalChars = /\W/; // allow letters, numbers, and underscores if (fld.value == "") { fld.style.background = 'Yellow'; error = "You didn't enter a username.\n"; } else if (illegalChars.test(fld.value)) { fld.style.background = 'Yellow'; error = "Are you sure your name contains non letters?.\n"; } else { fld.style.background = 'White'; } return error;} function trim(s){ return s.replace(/^\s+|\s+$/, '');}function validateEmail(fld) { var error=""; var tfld = trim(fld.value); // value of field with whitespace trimmed off var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/; var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/; if (fld.value == "") { fld.style.background = 'Yellow'; error = "You didn't enter an email address.\n"; } else if (!emailFilter.test(tfld)) { //test email for illegal characters fld.style.background = 'Yellow'; error = "Please enter a valid email address.\n"; } else if (fld.value.match(illegalChars)) { fld.style.background = 'Yellow'; error = "The email address contains illegal characters.\n"; } else { fld.style.background = 'White'; } return error;}function validatePhone(fld) { var error = ""; var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, ''); if (fld.value == "") { error = "You didn't enter a phone number.\n"; fld.style.background = 'Yellow'; } else if (isNaN(parseInt(stripped))) { error = "The phone number contains illegal characters.\n"; fld.style.background = 'Yellow'; } else if (stripped.length != 11) { error = "The phone number is the wrong length. Make sure you included an area code.\n"; fld.style.background = 'Yellow'; } return error;}</script></head><body> <h1>Contact Us</h1> <p> </p> <p>The fields marked with * are requred </p> <form name="contactform" onSubmit="return validateFormOnSubmit(this)" action=""> <table width="327" height="402" border="0"> <tr> <td><div align="left">Title*</div></td> <td><label> <div align="left"> <select name="Title" id="Title"> <option>Mr</option> <option>Mrs</option> <option>Ms</option> <option>Dr</option> <option>Sir</option> </select> </div> </label></td> </tr> <tr> <td><div align="left">Name*</div></td> <td><label> <div align="left"> <input type="text" name="Name" id="Name" size="33" maxlength="18"/> </div> </label></td> </tr> <tr> <td><div align="left">Address</div></td> <td><label> <textarea name="Address" id="Address" cols="25" rows="5" ></textarea> </label></td> </tr> <tr> <td><div align="left">Postcode</div></td> <td><label> <div align="left"> <input type="text" name="Postcode" id="Postcode" size="33" maxlength="8" /> </div> </label></td> </tr> <tr> <td><div align="left">Email Address*</div></td> <td><label> <div align="left"> <input type="text" name="Email" id="Email" size="33"/> </div> </label></td> </tr> <tr> <td><div align="left">Phone Number*</div></td> <td><label> <div align="left"> <input type="text" name="Phone" id="Phone" size="33" maxlength="11"/> </div> </label></td> </tr> <tr> <td><div align="left">Query*</div></td> <td><textarea name="Query" id="Query" cols="25" rows="5"></textarea></td> </tr> <tr> <td><div align="left">Where did you hear about us?*</div></td> <td><div align="left"> <select name="Where"> <option>Internet</option> <option>Word Of Mouth</option> <option>Publication</option> <option>Previous Customer</option> </select> </div></td> </tr> <tr> <td><label> <div align="center"></div> </label></td> <td><label> <div align="left"> <input type="submit" name="Submit" id="Submit" value="Submit" /> <input type="reset" name="Reset" id="Reset" value="Reset" /> </div> </label></td> </tr> </table></form></body></html> This is the code with the page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>iCD - Contact Us</title><link href="_css/main.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function validateFormOnSubmit(contactform) {var reason = ""; reason += validateName(contactform.Name); reason += validateSurname(contactform.Surname); reason += validateEmail(contactform.Email); reason += validatePhone(contactform.Phone); reason += validateQuery(contactform.Query); if (reason != "") { alert("Some fields need correction:\n" + reason); return false; } alert("All fields are filled correctly"); return false;}function validateQuery(fld) { var error = ""; if (fld.value.length == 0) { fld.style.background = 'Yellow'; error = "You have not entered a Query.\n" } else { fld.style.background = 'White'; } return error; }function validateName(fld) { var error = ""; var illegalChars = /\W/; // allow letters, numbers, and underscores if (fld.value == "") { fld.style.background = 'Yellow'; error = "You didn't enter a username.\n"; } else if (illegalChars.test(fld.value)) { fld.style.background = 'Yellow'; error = "Are you sure your name contains non letters?.\n"; } else { fld.style.background = 'White'; } return error;} function validateSurname(fld) { var error = ""; var illegalChars = /\W/; // allow letters, numbers, and underscores if (fld.value == "") { fld.style.background = 'Yellow'; error = "You didn't enter a username.\n"; } else if (illegalChars.test(fld.value)) { fld.style.background = 'Yellow'; error = "Are you sure your name contains non letters?.\n"; } else { fld.style.background = 'White'; } return error;}function trim(s){ return s.replace(/^\s+|\s+$/, '');}function validateEmail(fld) { var error=""; var tfld = trim(fld.value); // value of field with whitespace trimmed off var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/; var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/; if (fld.value == "") { fld.style.background = 'Yellow'; error = "You didn't enter an email address.\n"; } else if (!emailFilter.test(tfld)) { //test email for illegal characters fld.style.background = 'Yellow'; error = "Please enter a valid email address.\n"; } else if (fld.value.match(illegalChars)) { fld.style.background = 'Yellow'; error = "The email address contains illegal characters.\n"; } else { fld.style.background = 'White'; } return error;}function validatePhone(fld) { var error = ""; var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, ''); if (fld.value == "") { error = "You didn't enter a phone number.\n"; fld.style.background = 'Yellow'; } else if (isNaN(parseInt(stripped))) { error = "The phone number contains illegal characters.\n"; fld.style.background = 'Yellow'; } else if (stripped.length != 11) { error = "The phone number is the wrong length. Make sure you included an area code.\n"; fld.style.background = 'Yellow'; } return error;}</script></head><body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Header --> <div id="header"> <img src="Images/header3.jpg" width="923" height="92" alt="iCD - The authority in CD's" /> </div> <!-- End Header --> <!-- Begin Faux Columns --> <div id="faux"> <!-- Begin Left Column --> <center><div id="leftcolumn"><a class="nav" href="index.html" title="Home">Home</a> <a class="nav" href="calculator.html" title="Calulator">Calculator</a> <a class="nav" href="slideshow.html" title="Slide Show">Slide Show</a> <a class="nav" href="cds.html" title="CD's">CD List</a> <span class="chosen">Contact Us</span><a class="nav" href="report.html" title="Report">Report</a></div><!-- End Left Column --> <!-- Begin Content Column --> <div id="content"> <h1>Contact Us</h1> <p> </p> <p>The fields marked with * are requred </p> <form name="contactform" onSubmit="return validateFormOnSubmit(this)" action=""> <table width="327" height="402" border="0"> <tr> <td><div align="left">Title*</div></td> <td><label> <div align="left"> <select name="Title" id="Title"> <option>Mr</option> <option>Mrs</option> <option>Ms</option> <option>Dr</option> <option>Sir</option> </select> </div> </label></td> </tr> <tr> <td><div align="left">First Name*</div></td> <td><label> <div align="left"> <input type="text" name="Name" id="Name" size="33" maxlength="10"/> </div> </label></td> </tr> <tr> <td><div align="left">Surname*</div></td> <td><label> <div align="left"> <input type="text" name="Name" id="Name" size="33" maxlength="10"/> </div> </label></td> </tr> <tr> <td><div align="left">Address</div></td> <td><label> <textarea name="Address" id="Address" cols="25" rows="5" ></textarea> </label></td> </tr> <tr> <td><div align="left">Postcode</div></td> <td><label> <div align="left"> <input type="text" name="Postcode" id="Postcode" size="33" maxlength="8" /> </div> </label></td> </tr> <tr> <td><div align="left">Email Address*</div></td> <td><label> <div align="left"> <input type="text" name="Email" id="Email" size="33"/> </div> </label></td> </tr> <tr> <td><div align="left">Phone Number*</div></td> <td><label> <div align="left"> <input type="text" name="Phone" id="Phone" size="33" maxlength="11"/> </div> </label></td> </tr> <tr> <td><div align="left">Query*</div></td> <td><textarea name="Query" id="Query" cols="25" rows="5"></textarea></td> </tr> <tr> <td><div align="left">Where did you hear about us?*</div></td> <td><div align="left"> <select name="Where"> <option>Internet</option> <option>Word Of Mouth</option> <option>Publication</option> <option>Previous Customer</option> </select> </div></td> </tr> <tr> <td><label> <div align="center"></div> </label></td> <td><label> <div align="left"> <input type="submit" name="Submit" id="Submit" value="Submit" /> <input type="reset" name="Reset" id="Reset" value="Reset" /> </div> </label></td> </tr> </table></form> <p> </p> </div> <!-- End Content Column --> <!-- Begin Right Column --> <center><div id="rightcolumn"> <img src="Images/advertise.jpg" width="140" height="100" alt="advertise" /> <!-- Begin Feedzilla news widget Code --><script type='text/javascript' src='http://www.feedzilla.com/tools/swfobject.js'></script><script type='text/javascript'>var flashvars = {id:'5921121359818',code:'flash',c:'',scroll:'v',prov:'news',cat:'Top news',cat2:'Top stories',width:'140',height:'200',num_articles:'6',show_summaries:'Yes',show_sources:'Yes',show_dates:'Yes',title:'',title_size:'12pt',title_bold:'Yes',keywords:'',url:'',headers_size:'14pt',font_size:'10pt',font_family:'Arial',text_alignment:'Left',space:'Yes',titlecolor:'#000000',fcolor:'#0000FF',desccolor:'#000000',sourcecolor:'#FF0000',datecolor:'#999999',bgcolor:'#FFFFFF',ref:document.location.href};var params = {scale:'noscale',salign:'lt',bgcolor:'#FFFFFF'};var attributes = {};swfobject.embedSWF('http://www.feedzilla.com/tools/news-widget.swf', 'Feedzilla_news_widget_892110', '140', '200', '9.0.0','',flashvars, params, attributes);</script><div id='Feedzilla_news_widget_892110'></div> </div></centre> <!-- End Right Column --> </div> <!-- End Faux Columns --> <!-- Begin Footer --> <div id="footer"> <div align="center">© Himesh Siyodia N0181013 </div> </div> <!-- End Footer --> </div> <!-- End Wrapper --></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted January 28, 2009 Share Posted January 28, 2009 You probably meant to make this change, but you forgot: <td><div align="left">Surname*</div></td> <td><label> <div align="left"> <input type="text" name="Surname" id="Surname" size="33" maxlength="10"/> Link to comment Share on other sites More sharing options...
himesh Posted January 28, 2009 Author Share Posted January 28, 2009 hiyeah, i meant to change that, didnt notice it lol.would it be possible to run the javascript from an external file when the user presses the submit button? i see the problem being the form being within the div tags? Link to comment Share on other sites More sharing options...
jeffman Posted January 28, 2009 Share Posted January 28, 2009 You can put the script anywhere you want. The problem had nothing to with that or the div tags (at least, not in the second page that you posted). What I wrote was the only problem I saw, and when I fixed it, the code ran correctly on my browser. When the script tried to access the first item called "Name", it got a list of 2 items. Then the function after that got confused because it was expecting a string, not a list. When the function stopped, everything stopped. Making the one change fixed everything, at least as far as I tested it.Are you still having problems? Link to comment Share on other sites More sharing options...
himesh Posted January 28, 2009 Author Share Posted January 28, 2009 haha i fixed it now!! all i had to do was properly put the function name in the onsubmit!! thanks for your help Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.