943,712 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Form Validation
Ad:
Permalink
Jun 10th, 2009
0

Form Validation

Expand Post »
Form Validation Script:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script language="javascript">
  2.  
  3. function handler(where){
  4. //check for unusual characters
  5. var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
  6. var wspace = " ";
  7. for (var i = 0; i < where.value.length; i++) {
  8. 	if (iChars.indexOf(where.value.charAt(i)) != -1) {
  9. 	return false;
  10. 	}
  11. 	if (wspace.indexOf(where.value.charAt(i)) != -1) {
  12. 	return "nope";
  13. 	}
  14. }
  15. } 
  16.  
  17. function emailhandler(where){
  18. //check for unusual characters
  19. var iChars = "!#$%^&*()+=-[]\\\';,/{}|\":<>?";
  20. var wspace = " ";
  21. for (var i = 0; i < where.value.length; i++) {
  22. 	if (iChars.indexOf(where.value.charAt(i)) != -1) {
  23. 	return false;
  24. 	}
  25. 	if (wspace.indexOf(where.value.charAt(i)) != -1) {
  26. 	return "nope";
  27. 	}
  28. }
  29. }
  30.  
  31. function isNumberKey(evt,where)
  32.       {
  33. 		var charCode = (evt.which) ? evt.which : event.keyCode;
  34. 			if (charCode != 8){
  35. 			  var count = where.value.length; 
  36. 		      if (count === 0){
  37. 				  where.value = "(";
  38. 			  }
  39. 			  if (count == 4){
  40. 				  where.value = where.value + ")";
  41. 			  }
  42. 			  if (count == 8){
  43. 				  where.value = where.value + "-";
  44. 			  }
  45. 			  if (charCode > 31 && (charCode < 48 || charCode > 57))
  46. 				{
  47. 				return false;
  48. 				}
  49. 				else
  50. 				{        
  51. 				 return true;
  52. 				}
  53. 			}
  54. 			else
  55. 			{
  56. 			return true;
  57. 			}
  58.       }
  59.  
  60. function checkform()
  61. {
  62. var mycount = document.getElementsByTagName('input').length;
  63. var good = true;
  64. 	for (i=0;i<=mycount;i++)
  65. 	{
  66. 		//alert(document.getElementsByTagName('input')[i].id);
  67. 		var current = document.getElementsByTagName('input')[i];
  68. 		current.style.border='1px solid';	
  69. 		//check email
  70. 		if (current.id == "email"){
  71. 			if (current.value !== ""){
  72. 				var test = emailhandler(current);
  73. 				if(test=="nope"){
  74. 					alert("Your Email Address can not contain spaces!");
  75. 					//good = false;
  76. 				}
  77. 				if(test===false){
  78. 				alert("Your Email Address can not contain special characters!");
  79. 				//good = false;
  80. 				}
  81. 			}
  82. 		}
  83. 		else
  84. 		{
  85. 			if(current.id !== "click"){
  86. 				if (current.value !== ""){
  87. 				var newtest = handler(current);
  88. 					if (newtest===false){
  89. 						current.style.border='3px solid red';
  90. 						alert("You have special characters in the field highlighted \r\n" + current.id);
  91. 						good = false;
  92. 					}
  93. 				}
  94. 			}
  95. 		}
  96. 	}
  97. }
  98. return good;
  99. }
  100.  
  101. function submitform(){
  102. var check = checkform();
  103. alert(check);
  104. }
  105. </script>

If there is an issue in the form I do get the warnings, but The Alert in submitform() is never triggered.
I'm not sure where I'm buggered. Any help is appreciated. If you can streamline the JS that wouldn't be rejected either.
Last edited by Tekmaven; Jun 10th, 2009 at 9:34 pm. Reason: Fixed Code Tags
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
lithodora is offline Offline
6 posts
since Jun 2009
Permalink
Jun 10th, 2009
0

Re: Form Validation

Use a single function that will validate the entire fields...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jun 10th, 2009
0

Re: Form Validation

Hello,

First let me start with the fact that JavaScript is a human language designed to give instructions to an application. As such, it should be used in a manner that is easy for people to read. Proper formatting is critical to allowing people to understand the instructions so that errors are not made that would cause the application to fail the execution of the script. That said, I found that in function checkform() you placed too many end brackets and is the most logical cause of the script failing.

I have taken the time to cleanup your code. However, without the html part of your page it is impossible to do any further troubleshooting. I would strongly suggest using an editor that is designed to help people work with code like Notepad++. Here is the cleaned up code:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function handler(where){ //check for unusual characters
  2.   var iChars="!@#$%^&*()+=-[]\\\';,./{}|\":<>?",wspace = " ";
  3.   for(var i=0;i<where.value.length;i++){
  4.     if(iChars.indexOf(where.value.charAt(i))!=-1){return false}
  5.     if(wspace.indexOf(where.value.charAt(i))!=-1){return "nope"}
  6.   }
  7. } 
  8.  
  9.  
  10. function emailhandler(where){ //check for unusual characters
  11.   var iChars = "!#$%^&*()+=-[]\\\';,/{}|\":<>?",wspace = " ";
  12.   for(var i = 0; i < where.value.length; i++){
  13.     if(iChars.indexOf(where.value.charAt(i)) != -1){return false}
  14.     if(wspace.indexOf(where.value.charAt(i)) != -1){return "nope"}
  15.   }
  16. }
  17.  
  18.  
  19. function isNumberKey(evt,where){
  20.   var charCode=(evt.which)?evt.which:event.keyCode;
  21.   if(charCode!=8){
  22.     var count=where.value.length; 
  23.     if(count===0){where.value="("}
  24.     if(count==4){where.value+=")"}
  25.     if(count==8){where.value+="-"}
  26.     if(charCode>31&&(charCode<48||charCode>57)){return false}
  27.     else{return true}
  28.   }
  29.   else{return true}
  30. }
  31.  
  32.  
  33. function checkform(){
  34.   var mycount=document.getElementsByTagName("input").length;
  35.   var good=true;
  36.   for(i=0;i<=mycount;i++){
  37.  
  38.     //alert(document.getElementsByTagName("input")[i].id);
  39.  
  40.     var current=document.getElementsByTagName('input')[i];
  41.     current.style.border="1px solid"; 
  42.  
  43.     //check email
  44.     if(current.id=="email"){
  45.       if(current.value!==""){
  46.         var test=emailhandler(current);
  47.         if(test=="nope"){
  48.           alert("Your Email Address can not contain spaces!");
  49.           //good=false;
  50.         }
  51.         if(test===false){
  52.           alert("Your Email Address can not contain special characters!");
  53.           //good=false;
  54.         }
  55.       }
  56.     }
  57.     else{
  58.       if(current.id!=="click"){
  59.         if(current.value!==""){
  60.           var newtest=handler(current);
  61.           if(newtest===false){
  62.             current.style.border="3px solid red";
  63.             alert("You have special characters in the field highlighted \r\n" + current.id);
  64.             good=false;
  65.           }
  66.         }
  67.       }
  68.     }
  69.   }
  70.   return good;
  71. }
  72.  
  73.  
  74. function submitform(){
  75.   var check=checkform();
  76.   alert(check);
  77. }
Reputation Points: 10
Solved Threads: 2
Newbie Poster
oakleymk is offline Offline
14 posts
since Jun 2009
Permalink
Jun 10th, 2009
0

Re: Form Validation

Still doesnt' work
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script language="javascript">
  2.  
  3. function showship(show){
  4.  
  5. if(show.checked){
  6. document.getElementById("test").style.display = 'none';
  7. }
  8. else
  9. {
  10. document.getElementById("test").style.display = 'block';
  11. }
  12. }
  13.  
  14. function handler(where){ //check for unusual characters
  15.   var iChars="!@#$%^&*()+=-[]\\\';,./{}|\":<>?",wspace = " ";
  16.   for(var i=0;i<where.value.length;i++){
  17.     if(iChars.indexOf(where.value.charAt(i))!=-1){return false}
  18.     if(wspace.indexOf(where.value.charAt(i))!=-1){return "nope"}
  19.   }
  20. } 
  21.  
  22. function emailhandler(where){ //check for unusual characters
  23.   var iChars = "!#$%^&*()+=-[]\\\';,/{}|\":<>?",wspace = " ";
  24.   for(var i = 0; i < where.value.length; i++){
  25.     if(iChars.indexOf(where.value.charAt(i)) != -1){return false}
  26.     if(wspace.indexOf(where.value.charAt(i)) != -1){return "nope"}
  27.   }
  28. }
  29.  
  30. function isNumberKey(evt,where){
  31.   var charCode=(evt.which)?evt.which:event.keyCode;
  32.   if(charCode!=8){
  33.     var count=where.value.length; 
  34.     if(count===0){where.value="("}
  35.     if(count==4){where.value+=")"}
  36.     if(count==8){where.value+="-"}
  37.     if(charCode>31&&(charCode<48||charCode>57)){return false}
  38.     else{return true}
  39.   }
  40.   else{return true}
  41. }
  42.  
  43.  
  44. function checkform(){
  45.   var mycount=document.getElementsByTagName("input").length;
  46.   var good=true;
  47.   for(i=0;i<=mycount;i++){
  48.  
  49.     //alert(document.getElementsByTagName("input")[i].id);
  50.  
  51.     var current=document.getElementsByTagName('input')[i];
  52.     current.style.border="1px solid"; 
  53.  
  54.     //check email
  55.     if(current.id=="email"){
  56.       if(current.value!==""){
  57.         var test=emailhandler(current);
  58.         if(test=="nope"){
  59.           alert("Your Email Address can not contain spaces!");
  60.           //good=false;
  61.         }
  62.         if(test===false){
  63.           alert("Your Email Address can not contain special characters!");
  64.           //good=false;
  65.         }
  66.       }
  67.     }
  68.     else{
  69.       if(current.id!=="click"){
  70.         if(current.value!==""){
  71.           var newtest=handler(current);
  72.           if(newtest===false){
  73.             current.style.border="3px solid red";
  74.             alert("You have special characters in the field highlighted \r\n" + current.id);
  75.             good=false;
  76.           }
  77.         }
  78.       }
  79.     }
  80.   }
  81.  alert("should Return");
  82.   return good;
  83. }
  84.  
  85.  
  86. function submitform(){
  87.   var check=checkform();
  88.   alert(check);
  89. }
  90.  
  91. </script>
  92. <style type="text/css">
  93. body {
  94. font-family:Verdana, Arial, Helvetica, sans-serif;
  95. font-size:11px;
  96. }
  97. #ship {
  98. 	visibility: hidden;
  99. }
  100. #test {
  101. 	display: none;
  102. }
  103.  
  104. </style>
  105. </head>
  106. <body>
  107.  
  108. <div id="background">
  109. <div align="center">
  110. <div align="left" style="width:40%">
  111.    <div id="uinfo" >
  112.      <form name="uform" method="post" action="cust_info_handler.php">
  113.       <table>
  114.        <tr><td colspan="2">
  115.         <div id="top">
  116.             User Information
  117.         </div>
  118.         </td></tr>
  119.         <tr><td>
  120.                 User Name :
  121. 			</td>
  122.             <td>
  123. 			<?php echo $row['LoginName'];?>
  124. 			</td>
  125. 	    </tr>
  126.  
  127.  
  128. 		<tr><td>
  129.                 Password : 
  130.             </td>
  131.             <td>
  132.                 <input name="password" type="password" id="password" maxlength="15" value="<?php echo $row['Password'];?>" />
  133. 			</td>
  134. 		</tr>    
  135.  
  136.         <tr><td>
  137.                 Email : 
  138.             </td>
  139.             <td>
  140.                 <input name="email" type="text" id="email" value="<?php echo $row['Email'];?>">
  141.     		</td>
  142. 		</tr>
  143.         </table>
  144.   <div id="cinfo" style="width:40%">
  145.         <table><tr><td colspan="2"><div id="top">
  146.         	Contact Information
  147. 		</div></td></tr>
  148.         <tr><td>First Name:</td><td><input name="fname" type="text" id="fname" value="<?php echo $row['Name_First'];?>" size="30"/></td></tr>
  149.         <tr><td>Last Name:</td><td><input name="lname" type="text" id="lname" value="<?php echo $row['Name_Last'];?>" size="50" /></td></tr>
  150.         <tr><td>Day Phone:</td><td><input name="dphone" maxlength="13" onkeypress="return isNumberKey(event, this)" type="text" id="dphone" value="<?php echo $row['Phone_Day'];?>" /></td></tr>
  151.         <tr><td>Message Phone:</td><td><input name="mphone" maxlength="13" onkeypress="return isNumberKey(event, this)" type="text" id="mphone" value="<?php echo $row['Phone_Message'];?>" /></td></tr>
  152.         <!---//Cell Phone NEEDED\\ --->
  153.         <tr><td>Fax Number:</td><td><input name="fax" maxlength="13" onkeypress="return isNumberKey(event, this)" type="text" id="fax" value="<?php echo $row['Fax'];?>" /></td></tr>
  154.         <tr><td>Company Name:</td><td><input name="cname" type="text" id="cname" value="<?php echo $row['CompanyName'];?>" size="120"/></td></tr>
  155.         <tr><td>Website:</td><td><input name="www" type="text" id="www" value="<?php echo $row['WebAddress'];?>" size="120"/></td></tr>
  156. 		</table>
  157.  
  158.   </div>
  159.  
  160. <div id="minfo">
  161.     <table>
  162.        <tr><td colspan="2"><div id="top">
  163.         	Mailing Address
  164. 		</div></td></tr>
  165.         <tr><td>Street Address 1:</td><td><input name="maddress" size="45" type="text" id="maddress" value="<?php echo $row['MailAddress1'];?>" /></td></tr>
  166. 		<tr><td>Street Address 2:</td><td><input name="maddress2" size="45" type="text" id="maddress2" value="<?php echo $row['MailAddress2'];?>" />
  167.         <tr><td>City:</td><td><input name="mcity" type="text" id="mcity" value="<?php echo $row['MACity'];?>" /></td></tr>
  168.         <tr><td>State:</td><td><input name="mstate" type="text" size="2" maxlength="2" id="mstate" value="<?php echo $row['MAState'];?>" /></td></tr>
  169. 		<tr><td>Zip: </td><td><input type="text" id="mzip" value="<?php echo $row['MAZip'];?>"/></td></tr>
  170.         <tr><td>Country:</td><td><input name="mcountry" type="text" id="mcountry" value="<?php echo $row['MACountry'];?>" /></td></tr>
  171. 	</table>
  172. </div>
  173.  
  174. Ship to same address: <input name="vship" type="checkbox" id="vship" checked="checked" onclick="showship(this)" />
  175.  
  176. <div id="test">
  177. <table>
  178. <tr><td colspan="2"><div id="top">Shipping Address</div></td></tr>
  179. <tr><td>Street Address 1: </td><td><input type="text" id="saddress" value="<?php echo $row['ShippingAddress1'];?>"/></td></tr>
  180. <tr><td>Street Address 2: </td><td><input type="text" id="saddress2" value="<?php echo $row['ShippingAddress2'];?>"/></td></tr>
  181. <tr><td>City: </td><td><input type="text" id="scity" value="<?php echo $row['SACity'];?>"/></td></tr>
  182. <tr><td>State: </td><td><input type="text" id="sstate" value="<?php echo $row['SAState'];?>"/></td></tr>
  183. <tr><td>Zip: </td><td><input type="text" id="szip" value="<?php echo $row['SAZip'];?>"/></td></tr>
  184. <tr><td>Country: </td><td><input type="text" id="scountry" value="<?php echo $row['SACountry'];?>"/></td></tr>
  185. </table>
  186. </div>
  187.  
  188. <div><br><input type="button" name="click" id="click" value="submit" onclick="submitform()" ></div></div>
  189. </form>
  190. </div>
  191. </div>
  192.  
  193. </body>
  194. </html>

I have added the majority of the page to this code, at least enough to make it work for anyone trying to test it out.

I use Dreamweaver CS4 and Notepad++ to write my code.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
lithodora is offline Offline
6 posts
since Jun 2009
Permalink
Jun 11th, 2009
0

Re: Form Validation

for (i=0;i<=mycount;i++) needed to be: for (i=0;i<mycount;i++)
Reputation Points: 10
Solved Threads: 0
Newbie Poster
lithodora is offline Offline
6 posts
since Jun 2009
Permalink
Jun 11th, 2009
0

Re: Form Validation

How's it going, have you solved it?
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jun 15th, 2009
0

Re: Form Validation

Needs to be cleaned up but I am using this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function validate(where){
  2. var here = where.id;
  3. if(here != "email"){
  4. 	if(here != "www"){
  5. 		if(here != "dphone"){
  6. 			if(here != "cphone"){
  7. 				if(here != "mphone"){
  8. 					if(here != "fax"){
  9. 						if(here != "myclick"){
  10. 							if(here != "vship"){
  11. 								var newtest = handler(where);
  12. 								if(newtest===false){return false;}else{return true;}
  13. 							}
  14. 						}
  15. 					}
  16. 				}
  17. 			}
  18. 		}
  19. 	}
  20. }
  21.  
  22. }
  23. //-->
  24.  
  25. function testing(){
  26. var mycount = document.uform.elements.length;
  27. var where = document.uform;
  28. var goodtogo = true;
  29. 	if (where.email.value!==""){
  30. 		var test=emailhandler(where.email);
  31. 		if(test===false){goodtogo=false;}
  32. 	}
  33. for(i=0;i<mycount;i++){
  34. var test=validate(where.elements[i]);
  35. if(test===false){goodtogo=false;}
  36. }
  37. return(goodtogo);
  38. }

if you could tell me why this doesn't work that would be great:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. if((here != "email")||(here != "dphone")||(here != "cphone")||(here != "mphone")||(here != "fax")||(here != "myclick")||(here != "vship")){
  2. 			alert(here);
  3. }
Reputation Points: 10
Solved Threads: 0
Newbie Poster
lithodora is offline Offline
6 posts
since Jun 2009
Permalink
Jun 19th, 2009
0

Re: Form Validation

Thanks, I've tried to use it in my own app.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
foryounow is offline Offline
12 posts
since Mar 2005

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Dynamic Calendar
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: how do i fill random number?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC