form validation not working

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: Nov 2004
Posts: 16
Reputation: Secret Agent is an unknown quantity at this point 
Solved Threads: 0
Secret Agent Secret Agent is offline Offline
Newbie Poster

form validation not working

 
0
  #1
Apr 17th, 2005
This is my form script which has one simple problem that I do not know how to fix. If the name/email fields are left empty, it confirms this in a pop-up, but still proceeds to submit the form as is anyway. How do I fix this?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <form name="TheForm" method="POST" action="process.php" enctype="multipart/form-data">
  2. <table border="0" width="100%" id="table1" cellspacing="1">
  3. <tr>
  4. <td width="100" bgcolor="#EAEAEA">
  5. <font face="Arial" style="font-size: 8pt; font-weight: 700" color="#3B3D61">Name:</font></td>
  6. <td width="225" bgcolor="#EAEAEA">
  7. <font face="Arial"><span style="font-size: 8pt"><font color="#3B3D61">
  8. <input type="text" name="nm" size="30" style="color: #3B3D61; font-family: Arial; font-size: 8pt; border: 1px solid #E0E0E0; padding-left: 3px; background-color: #FFFFFF"></font></span></font></td>
  9. <td bgcolor="#EAEAEA"><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>So we can greet you personally</FONT></STRONG></td>
  10. </tr>
  11. <tr>
  12. <td width="100">
  13. <font face="Arial" style="font-size: 8pt; font-weight: 700" color="#3B3D61">
  14. E-mail:</font></td>
  15. <td width="225">
  16. <font face="Arial"><span style="font-size: 8pt"><font color="#3B3D61">
  17. <input type="text" name="em" size="30" style="font-family: Arial; font-size: 8pt; color: #3B3D61; border: 1px solid #E0E0E0; padding-left: 3px; background-color: #FFFFFF"></font></span></font></td>
  18. <td><strong style="font-weight: 400">
  19. <font face="Arial" style="font-size: 8pt" color="#3B3D61">Required</font></strong></td>
  20. </tr>
  21. <tr>
  22. <td width="100" bgcolor="#EAEAEA">
  23. <font face="Arial" style="font-size: 8pt; font-weight: 700" color="#3B3D61">
  24. Confirm Email:</font></td>
  25. <td width="225" bgcolor="#EAEAEA">
  26. <font face="Arial"><span style="font-size: 8pt"><font color="#3B3D61">
  27. <input type="text" name="emx" size="30" style="font-family: Arial; font-size: 8pt; color: #3B3D61; border: 1px solid #E0E0E0; padding-left: 3px"></font></span></font></td>
  28. <td bgcolor="#EAEAEA"><strong style="font-weight: 400">
  29. <font face="Arial" style="font-size: 8pt" color="#3B3D61">Validate Email</font></strong></td>
  30. </tr>
  31. <tr>
  32. <td width="100"><STRONG><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Phone:</FONT></STRONG></td>
  33. <td width="225">
  34. <strong><font face="Arial" style="font-size: 8pt" color="#3B3D61">(</font></strong><!--webbot bot="Validation" s-display-name="required" b-value-required="TRUE" i-minimum-length="10" --><INPUT style="BORDER-RIGHT: #e0e0e0 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #e0e0e0 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 8pt; PADDING-BOTTOM: 1px; BORDER-LEFT: #e0e0e0 1px solid; COLOR: #666666; PADDING-TOP: 1px; BORDER-BOTTOM: #e0e0e0 1px solid; FONT-FAMILY: Arial" size=3 name=Area_Code><strong><font face="Arial" style="font-size: 8pt" color="#3B3D61">)
  35. </font></strong>
  36. &nbsp;<!--webbot bot="Validation" s-display-name="required" b-value-required="TRUE" i-minimum-length="10" --><INPUT style="BORDER-RIGHT: #e0e0e0 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #e0e0e0 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 8pt; PADDING-BOTTOM: 1px; BORDER-LEFT: #e0e0e0 1px solid; COLOR: #666666; PADDING-TOP: 1px; BORDER-BOTTOM: #e0e0e0 1px solid; FONT-FAMILY: Arial" size=3 name=Phone_1><strong><font face="Arial" style="font-size: 8pt" color="#3B3D61">-</font></strong><!--webbot bot="Validation" s-display-name="required" b-value-required="TRUE" i-minimum-length="10" --><INPUT style="BORDER-RIGHT: #e0e0e0 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #e0e0e0 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 8pt; PADDING-BOTTOM: 1px; BORDER-LEFT: #e0e0e0 1px solid; COLOR: #666666; PADDING-TOP: 1px; BORDER-BOTTOM: #e0e0e0 1px solid; FONT-FAMILY: Arial" size=10 name=Phone1></td>
  37. <td><font face="Arial" style="font-size: 8pt" color="#3B3D61">Call?
  38. <input type="radio" value="V1" name="Yes_Call">Yes<input type="radio" value="V2" checked name="No_Call">No</font></td>
  39. </tr>
  40. <tr>
  41. <td width="100" bgcolor="#EAEAEA"><strong>
  42. <font face="Arial" style="font-size: 8pt" color="#3B3D61">Time to Call?</font></strong></td>
  43. <td width="225" bgcolor="#EAEAEA">
  44. &nbsp;<!--webbot bot="Validation" s-display-name="required" b-value-required="TRUE" i-minimum-length="10" --><INPUT style="BORDER-RIGHT: #e0e0e0 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #e0e0e0 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 8pt; PADDING-BOTTOM: 1px; BORDER-LEFT: #e0e0e0 1px solid; COLOR: #666666; PADDING-TOP: 1px; BORDER-BOTTOM: #e0e0e0 1px solid; FONT-FAMILY: Arial" size=30 name=Time_To_Call></td>
  45. <td bgcolor="#EAEAEA"><STRONG style="FONT-WEIGHT: 400">
  46. <FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Optional</FONT></STRONG></td>
  47. </tr>
  48. <tr>
  49. <td width="100"><STRONG><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Processor:</FONT></STRONG></td>
  50. <td width="225"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=Processor> <OPTION>Intel Celeron</OPTION> <OPTION>Intel Pentium IV HT</OPTION> <OPTION>Intel Xeon HT</OPTION> <OPTION>Intel Dual Xeon HT</OPTION> </SELECT></td>
  51. <td><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Hyper Thread = 2 Virtual CPU's</FONT></STRONG></td>
  52. </tr>
  53. <tr>
  54. <td width="100" bgcolor="#EAEAEA"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61><STRONG>Memory:</STRONG></FONT></td>
  55. <td width="225" bgcolor="#EAEAEA"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=Memory>
  56. <option selected>Select</option>
  57. <OPTION>512MB</OPTION> <OPTION>1GB</OPTION> <OPTION>2GB</OPTION> <OPTION>4GB</OPTION></SELECT></td>
  58. <td bgcolor="#EAEAEA"><font face="Arial" style="font-size: 8pt" color="#3B3D61">
  59. Upgradeable</font></td>
  60. </tr>
  61. <tr>
  62. <td width="100"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>
  63. <STRONG>Primary Drive:</STRONG></FONT></td>
  64. <td width="225">
  65. <SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=Primary_Drive>
  66. <option selected>Select</option>
  67. <option>160GB SATA</option>
  68. <option>250GB SATA</option>
  69. <option>36GB SCSI 10k RPM</option>
  70. <option>36GB SCSI 15k RPM</option>
  71. <option>73GB SCSI 10k RPM</option>
  72. <option>73GB SCSI 15k RPM</option>
  73. <option>146GB SCSI 10k RPM</option>
  74. <option>300GB SCSI 10k RPM</option>
  75. </SELECT></td>
  76. <td><strong style="font-weight: 400">
  77. <font face="Arial" style="font-size: 8pt" color="#3B3D61">SCSI = Faster
  78. Performance</font></strong></td>
  79. </tr>
  80. <tr>
  81. <td width="100" bgcolor="#EAEAEA"><strong>
  82. <font face="Arial" style="font-size: 8pt" color="#3B3D61">Secondary</font></strong><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61><STRONG> Drive:</STRONG></FONT></td>
  83. <td width="225" bgcolor="#EAEAEA">
  84. <SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=Primary_Drive0>
  85. <option selected>Select</option>
  86. <option>160GB SATA</option>
  87. <option>250GB SATA</option>
  88. <option>36GB SCSI 10k RPM</option>
  89. <option>36GB SCSI 15k RPM</option>
  90. <option>73GB SCSI 10k RPM</option>
  91. <option>73GB SCSI 15k RPM</option>
  92. <option>146GB SCSI 10k RPM</option>
  93. <option>300GB SCSI 10k RPM</option>
  94. </SELECT></td>
  95. <td bgcolor="#EAEAEA"><STRONG style="FONT-WEIGHT: 400">
  96. <FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Required for daily backups</FONT></STRONG></td>
  97. </tr>
  98. <tr>
  99. <td width="100"><STRONG><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>RAID:</FONT></STRONG></td>
  100. <td width="225"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=RAID> <OPTION selected>None</OPTION> <OPTION>RAID 0</OPTION> <OPTION>RAID 1</OPTION></SELECT></td>
  101. <td><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Requires 2 or more drives</FONT></STRONG></td>
  102. </tr>
  103. <tr>
  104. <td width="100" bgcolor="#EAEAEA"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61><STRONG>Bandwidth:</STRONG></FONT></td>
  105. <td width="225" bgcolor="#EAEAEA"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=Bandwidth>
  106. <option selected>Select</option>
  107. <OPTION>1,000GB</OPTION> <OPTION>1,500GB</OPTION>
  108. <option>2,000GB</option>
  109. <option>3,000GB</option>
  110. </SELECT></td>
  111. <td bgcolor="#EAEAEA"><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>10MBps = 3200GB total in/out</FONT></STRONG></td>
  112. </tr>
  113. <tr>
  114. <td width="100"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61><STRONG>Firewall:</STRONG></FONT></td>
  115. <td width="225"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=Firewall> <OPTION selected>None</OPTION> <OPTION>Cisco Pix 501e</OPTION>
  116. <option>Cisco Pix 506e</option>
  117. <option>Cisco Pix 515e</option>
  118. </SELECT></td>
  119. <td><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Cisco Pix</FONT></STRONG></td>
  120. </tr>
  121. <tr>
  122. <td width="100" bgcolor="#EAEAEA"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61><STRONG>Control Panel:</STRONG></FONT></td>
  123. <td width="225" bgcolor="#EAEAEA"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=Control_Panel> <OPTION selected>None</OPTION> <OPTION>cPanel + WHM</OPTION> <OPTION>DirectAdmin</OPTION><OPTION>Plesk</OPTION></SELECT></td>
  124. <td bgcolor="#EAEAEA"><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>cPanel recommended choice</FONT></STRONG></td>
  125. </tr>
  126. <tr>
  127. <td width="100"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61><STRONG>O/S:</STRONG></FONT></td>
  128. <td width="225"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=OS>
  129. <option selected>Select</option>
  130. <OPTION>CentOS</OPTION> <OPTION>Fedora</OPTION> <OPTION>Red Hat Enterprise</OPTION></SELECT></td>
  131. <td><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Linux OS</FONT></STRONG></td>
  132. </tr>
  133. <tr>
  134. <td width="100" bgcolor="#EAEAEA"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61><STRONG>IP Addresses:</STRONG></FONT></td>
  135. <td width="225" bgcolor="#EAEAEA"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=IP>
  136. <option selected>Select</option>
  137. <OPTION>8</OPTION> <OPTION>16</OPTION> <OPTION>24</OPTION><OPTION>32</OPTION>
  138. <option>64</option>
  139. <option>128</option>
  140. <option>256</option>
  141. </SELECT></td>
  142. <td bgcolor="#EAEAEA"><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>ARIN justification required</FONT></STRONG></td>
  143. </tr>
  144. <tr>
  145. <td width="100"><STRONG><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Port:</FONT></STRONG></td>
  146. <td width="225"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=Port>
  147. <option selected>Select</option>
  148. <OPTION>10MBps</OPTION> <OPTION>100MBps</OPTION></SELECT></td>
  149. <td><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>100MBps = for high traffic sites</FONT></STRONG></td>
  150. </tr>
  151. <tr>
  152. <td width="100" bgcolor="#EAEAEA"><STRONG><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Quantity:</FONT></STRONG></td>
  153. <td width="225" bgcolor="#EAEAEA"><SELECT style="BORDER-RIGHT: #3e4067 1px solid; BORDER-TOP: #3e4067 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #3e4067 1px solid; COLOR: #666666; BORDER-BOTTOM: #3e4067 1px solid; FONT-FAMILY: Arial" size=1 name=Quantity>
  154. <option selected>Select</option>
  155. <OPTION>1</OPTION> <OPTION>2</OPTION><OPTION>3</OPTION><OPTION>4</OPTION><OPTION>5</OPTION><OPTION>6</OPTION><OPTION>More than 6</OPTION></SELECT></td>
  156. <td bgcolor="#EAEAEA"><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>How many servers?</FONT></STRONG></td>
  157. </tr>
  158. <tr>
  159. <td width="100" valign="top"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61><STRONG>Message:</STRONG></FONT></td>
  160. <td width="225" valign="top"><TEXTAREA style="BORDER-RIGHT: #e0e0e0 1px solid; BORDER-TOP: #e0e0e0 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #e0e0e0 1px solid; COLOR: #666666; BORDER-BOTTOM: #e0e0e0 1px solid; FONT-FAMILY: Arial" name=Usage rows=5 cols=40></TEXTAREA></td>
  161. <td valign="top"><STRONG style="FONT-WEIGHT: 400"><FONT style="FONT-SIZE: 8pt" face=Arial color=#3b3d61>Give us a brief detail of what you intend to use the server for. This will help assist you.</FONT></STRONG></td>
  162. </tr>
  163. </table>
  164. <p align="center">
  165. <input type="submit" value="Submit" name="SB" onClick="sendOff();" style="color: #3B3D61; font-family: Arial; font-size: 8pt; border: 1px solid #E0E0E0; padding: 2px; background-color: #FFFFFF">
  166.  
  167. <script language="JavaScript1.2">
  168.  
  169. // (C) 2000 www.CodeLifter.com
  170. // http://www.codelifter.com
  171. // Free for all users, but leave in this header
  172.  
  173. var good;
  174. function checkEmailAddress(field) {
  175.  
  176. // Note: The next expression must be all on one line...
  177. // allow no spaces, linefeeds, or carriage returns!
  178. var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
  179.  
  180. if (goodEmail){
  181. good = true
  182. } else {
  183. alert('Please enter a valid e-mail address.')
  184. field.focus()
  185. field.select()
  186. good = false
  187. }
  188. }
  189.  
  190. function sendOff(){
  191. nmcheck = document.TheForm.nm.value
  192. if (nmcheck.length <1) {
  193. alert('Please enter your name.')
  194. return
  195. }
  196. good = false
  197. checkEmailAddress(document.TheForm.em)
  198. if ((document.TheForm.em.value ==
  199. document.TheForm.emx.value)&&(good)){
  200. // This is where you put your action
  201. // if name and email addresses are good.
  202. // We show an alert box, here; but you can
  203. // use a window.location= 'http://address'
  204. // to call a subsequent html page,
  205. // or a Perl script, etc.
  206. alert("Name and email address fields verified good.")
  207. }
  208. if ((document.TheForm.em.value !=
  209. document.TheForm.emx.value)&&(good)){
  210. alert('Both e-mail address entries must match.')
  211. }
  212. }
  213. </script>
  214. </form>

PS: anyone know of any simple javascript (not applet) that I can use to provide a realtime instant quote in this form? Any help would be appreciated. I've searched endlessly on about 5 or so script sites and couldn't find something decent/simple.
Reply With Quote Quick reply to this message  
Join Date: Apr 2005
Posts: 9
Reputation: jpn311 is an unknown quantity at this point 
Solved Threads: 0
jpn311 jpn311 is offline Offline
Newbie Poster

Re: form validation not working

 
0
  #2
Apr 26th, 2005
The form is submitting because you are using an input type of "Submit". Change this to "button", then in the Javascript function use document.TheForm.submit() when all fields are properly validated.

As for your instant quote, I'm assuming you are wanting to pull data from a database. If so, you will need to use xmlhttp to send an HTTP request to a server side script to do the processing.
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:


Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC