By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,955 Members | 1,779 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,955 IT Pros & Developers. It's quick & easy.

Help with validation.

P: 16
Hello,

I have to validate that there is information and radio buttons have been selected. Also, I need to be able to reset the text boxes. When I click the submit button, it does not do the validation and when I click the reset button, it does nothing. Here's what I have, but it doesn't seem to work? Please help me with this.

Thanks,
Tom

Expand|Select|Wrap|Line Numbers
  1. <?php echo '<?xml version="1.0" encoding="IUTF-8"?>'; ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
  7. <link rel="stylesheet" type="text/css" href="styles.css" />
  8. <title>Scion tC Catalog</title>
  9. </head>
  10. <body>
  11. <script type="text/javascript">
  12. function validateForm()
  13. {
  14. var age=document.forms["myForm"]["fage"].value;
  15. var x=document.forms["myForm"]["fname"].value;
  16. var scion = getCheckedValue(document.forms["myForm"].elements["scion"]);
  17. if (x==null || x=="")
  18.   {
  19.   alert("First name must be filled out");
  20.   return false;
  21.   }
  22.     if (isNaN(age)||age < 1||age > 100)
  23.   {
  24.  alert("Age must be between 1-100");
  25.   return false;
  26.  }
  27. function getCheckedValue(radioObj) {
  28.     if(!radioObj)
  29.         return "";
  30.     var radioLength = radioObj.length;
  31.     if(radioLength == undefined)
  32.         if(radioObj.checked)
  33.             return radioObj.value;
  34.         else
  35.             return "";
  36.     for(var i = 0; i < radioLength; i++) {
  37.         if(radioObj[i].checked) {
  38.             return radioObj[i].value;
  39.         }
  40.     }
  41.     return "";
  42. }
  43. if (cSelect.length == 0) {
  44.     alert("Please give a rating");
  45. }
  46. else {alert(cSelect);
  47. }
  48. function formReset()
  49. {
  50. document.getElementById("frm1").reset();
  51. }
  52. </script>
  53.  
  54. <a name="Top" id="Top"></a>
  55. <h1 class="">2010-14 Scion tC Catalog</h1>
  56. <table class="centered-table">
  57. <tr>
  58. <th><a href="index.php">Home</a></th>
  59. <th><a href="list.php">List</a></th>
  60. <th><a href="table.php">Table</a></th>
  61. </tr>
  62. </table>
  63. <br />
  64. <h2>2010-14 Scion tC Release Series and Base Models</h2>
  65. <p class="sansserif">The best of the Scion tC models<br />
  66. <br /></p>
  67. <form id="frm1" name="myForm" action="thankyou.php" onsubmit="return validateForm()" method="post">First name: <input type="text" name="fname" />  Age: <input type="text" name="fage" />  <input type="submit" value="Submit" /> <input type="button" onclick="formReset()" value="Reset form" /></form>
  68. <br />
  69. <table class="table1">
  70. <tr>
  71. <th>Select</th>
  72. <th>Series</th>
  73. <th>Photo</th>
  74. <th>Description</th>
  75. <th>Price</th>
  76. </tr>
  77. <tr>
  78. <td><input type="radio" name="scion" id="r1" value="1" /><br /></td>
  79. <td>2010 Scion tC RS 6.0</td>
  80. <td><img src="pictures/2011S.jpg" alt="2010 Scion tC RS 6.0" /></td>
  81. <td>Speedway Blue: 1,100 units produced. If blue is your color, then this is the car for you!</td>
  82. <td>$22,999</td>
  83. </tr>
  84. <tr>
  85. <td><input type="radio" name="sicon" id="r2" value="2" /><br /></td>
  86. <td>2012 Scion tC RS 7.0</td>
  87. <td><img src="pictures/2012S.jpg" alt="2012 Scion tC RS 7.0" /></td>
  88. <td>High Voltage Yellow: 2,200 units produced. If yellow is your color, then this is the car for you!</td>
  89. <td>$23,999</td>
  90. </tr>
  91. <tr>
  92. <td><input type="radio" name="sicon" id="r3" value="3" /><br /></td>
  93. <td>2013 Scion tC RS 8.0</td>
  94. <td><img src="pictures/2013S.jpg" alt="2013 Scion tC RS 8.0" /></td>
  95. <td>Absolutely Red: 2,000 units produced. If red is your color, then this is the car for you!</td>
  96. <td>$24,999</td>
  97. </tr>
  98. <tr>
  99. <td><input type="radio" name="sicon" id="r4" value="4" /><br /></td>
  100. <td>2014 Scion tC Base Model</td>
  101. <td><img src="pictures/2014S.jpg" alt="2014 Scion tC Base Model" /></td>
  102. <td>If you love a nice sports car and easy on gas, then this is the car for you!</td>
  103. <td>$18,999</td>
  104. </tr>
  105. </table>
  106. </body>
  107. </html>
Aug 4 '13 #1
Share this Question
Share on Google+
7 Replies


Dormilich
Expert Mod 5K+
P: 8,639
have a look at the JavaScript Error Console.

there are several issues:
- the brace count does not match (hence your script shouldn’t run at all)
- a form control value is never null
- validateForm() never returns a truthy value
Aug 5 '13 #2

P: 16
Hi Dormilich,

Thanks for the update. I did find the bracket issue, but I am not sure how to resolve the other issues? I'm not a programmer by any means, but I'm trying to learn. Where can I get help on the other two issues?

T
Aug 5 '13 #3

Dormilich
Expert Mod 5K+
P: 8,639
issue #2: don’t test a form value for null

issue #3: return true somewhere
Aug 6 '13 #4

P: 16
OK, so how do I do that? I don't understand what u mean by not testing a form value for null and returning true somewhere? Can you give me examples?
Aug 6 '13 #5

Dormilich
Expert Mod 5K+
P: 8,639
not testing for null:
Expand|Select|Wrap|Line Numbers
  1. // instead of (cf. line #17)
  2. if (x==null || x=="")
  3. // do
  4. if (x.trim() === "") // exclude spaces, too
  5. // or
  6. if (!x)
on line #67 you have the following:
Expand|Select|Wrap|Line Numbers
  1. onsubmit="return validateForm()"
if validateForm() only returns false (lines #20, #25) or undefined (line #47 or whereever the function ends), it will evaluate as
Expand|Select|Wrap|Line Numbers
  1. onsubmit="return false"
so you can never submit the form until you disable JavaScript.
Aug 6 '13 #6

P: 16
Thanks for those examples. The I think I have everything working except one thing. When I submit the form with out selecting a radio button, it checks it and says that I need to select a radio button, but it also submits and still takes it to the complete page. I'm not sure where in the function getCheckedValue() or function validateForm() it letting the form move past to the thank you page? I need it to stop everything if the name, age, and a radio button is not selected. Do you see anything in my code that would make this happen?

Expand|Select|Wrap|Line Numbers
  1. catalog.js
  2.  
  3. function formReset() {
  4. document.getElementById("frm1").reset(); }
  5.  
  6. function getCheckedValue(radioObj) {
  7.     if(!radioObj)
  8.         return "";
  9.     var radioLength = radioObj.length;
  10.     if(radioLength == undefined)
  11.         if(radioObj.checked)
  12.             return radioObj.value;
  13.         else
  14.             return "";
  15.     for(var i = 0; i < radioLength; i++) {
  16.         if(radioObj[i].checked) {
  17.             return radioObj[i].value;
  18.         }
  19.     }
  20.     return "";
  21. }
  22.  
  23. function validateForm()
  24. {
  25. var x=document.forms['myForm']['fname'].value;
  26. if (x.trim() === "")
  27.   {
  28.   alert("First name must be filled out");
  29.   return false;
  30.   }
  31. var age=document.forms['myForm']['age'].value;
  32. if (isNaN(age)||age<1||age>100) {
  33.  alert("Age must be between 1-100");
  34.   return false;
  35.   }
  36. var cSelect = getCheckedValue(document.forms['myForm'].elements['scion']);
  37. if (cSelect.length == 0) {
  38.     alert("Please select a tC Model");
  39. }
  40. else {alert(cSelect);}
  41. }
Page w/Form and Radio Button

Expand|Select|Wrap|Line Numbers
  1. <form id="frm1" name="myForm" onsubmit="return (validateForm() && checkRadios())" action="thankyou.php" method="post">First name: <input type="text" name="fname" />  Age: <input type="text" name="age" />  <input type="submit" value="Submit" /> <input type="button" onclick="formReset()" value="Reset form" />
  2. <br />
  3. <table class="table1">
  4. <tr>
  5. <th>Select</th>
  6. <th>Series</th>
  7. <th>Photo</th>
  8. <th>Description</th>
  9. <th>Price</th>
  10. </tr>
  11. <tr>
  12. <td class="radio button"><input type="radio" name="scion" id="r1" method="post" value="You selected the 2010 Scion tC RS" /><br /></td>
  13. <td class="2010 scion">2010 Scion tC RS 6.0</td>
  14. <td class="2010 image"><img src="pictures/2011S.jpg" alt="2010 Scion tC RS 6.0" </td>
  15. <td class="2010 description">Speedway Blue: 1,100 units produced. If blue is your color, then this is the car for you!</td>
  16. <td class="2010 price">$22,999</td>
  17. </tr>
  18. <tr>
  19.  
Aug 8 '13 #7

Dormilich
Expert Mod 5K+
P: 8,639
hm, this shouldn’t submit at all.
Aug 8 '13 #8

Post your reply

Sign in to post your reply or Sign up for a free account.