How can I validate only visible form fields when radio button is checked?

simflex · March 8, 2012

Hello again Experts,

I have 2 radio buttons called IsSpecial.

The first radio button has a value of Yes and the other No.

We are trying to determine if a particular product is going to be on promos.

If the user clicks the Yes radio button then promo start date, end date and, promo price become visible so user can fill out these and other boxes.

If the user clicks the No radio button then the form fields mentioned above, startdate, enddate and, promo price, are hidden.

The following code validates most of the form fields except the ones mentioned above.

I am trying to figure out how to NOT validate the form fields that are not visible; only validating them when they are visible.

For instance, if the radio button value of Yes is selected, all visible form fields, including state date, end date and promo price become visible and therefore must be completed. If is skipped, we would like to raise exceptions.

So when completing form fields that are visible, we don't want the hidden form fields to be validated

Any ideas how to handle validating only visible forms but not hidden forms?

BTW: only 4 items can be hidden or visible.

These are pstartdate, penddate, unitprice and txtprice.

Only txtprice is hidden when Yes radio button is selected.

Here is the relevant code I have so far.

Thanks a lot in advance.

<head> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- Begin 
function validate() { 
missinginfo = ""; 
if (document.form.catdescription.value == "0") { 
missinginfo += "\n     -  Category CANNOT be blank"; 
} 
if (document.form.pcode.value == "")  { 
missinginfo += "\n     -  Product Code CANNOT be blank"; 
} 
if (document.form.pname.value == "") { 
missinginfo += "\n     -  Product Name CANNOT be blank"; 
} 
if (document.form.pdescription.value == "") { 
missinginfo += "\n     -  Product Description CANNOT be blank"; 
} 
if (( form.IsSpecial[0].checked == false ) && ( form.IsSpecial[1].checked == false )) { 
missinginfo += "\n     -  please check Yes or No"; 
} 
if ((document.form.pphoto.value == "") || (document.form.pphoto.value == "NA")) 
{ 
missinginfo += "\n     -  Photo is either blank or does not contain NA"; 
} 
if (document.form.file2.value == "") { 
missinginfo += "\n     -  Browse a picture to upload"; 
} 

if (missinginfo != "") { 
missinginfo ="_____________________________\n" + 
"Please ensure that:\n" + 
missinginfo + "\n_____________________________" + 
"\nPlease re-enter and submit again!"; 
alert(missinginfo); 
return false; 
} 
else return true; 
} 
//  End --> 
</script> 
<script type="text/JavaScript"> 
<!-- Begin 
function ChangeDiv(id) 
{ 
if(id == "No") 
{ 
document.getElementById('nof').style.display = "block"; 
document.getElementById('yesf').style.display = "none"; 
} 
else 
{ 
document.getElementById('nof').style.display = "none"; 
document.getElementById('yesf').style.display = "block"; 
} 
} 
//  End --> 
</script> 
</head> 
  <table>
     <tr>
      <td class="body1" div align="right">Product Code:</td>
      <td width="73%"><input type="text" name="pcode"></td>
    </tr>
    <tr>
      <td class="body1" div align="right">Product Name:</td>
      <td><input type="text" name="pname"></td>
    </tr>
    <tr>
      <td class="body1" div align="right">Product Description:</td>
      <td> <textarea name="pdescription" cols="30" rows="5" value="<%=strUserText%>"></textarea>
    </tr>
    <tr>
      <td nowrap>Is product on PROMOS?</td>
      <td>
       <INPUT Type=Radio Name="IsSpecial" Value="Yes" onClick="ChangeDiv('Yes')">Yes<br>
       <INPUT type="Radio" name="IsSpecial" value="No" onClick="ChangeDiv('No')">No
     </td>
   </tr>
   </TABLE>
   </TD>
   <TD VALIGN="CENTER" ALIGN=CENTER >

   <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4 BORDERCOLOR="YELLOW" >
    <tr>
    <td class="body1" div align="right">
       <div id="yesf" style="display:none;">
       Promo Start Date:
      <input type="text" name="pstartdate" class="normaltxt"><br>
       Promo End Date:
      <input type="text" name="penddate" class="normaltxt"><br>
       PROMO Price:
  <input type="text" name="txtsprice" value="">
  </div></td>
    </tr>
    <tr>
     <td class="body1" div align="right">
     <div id="nof">
      Regular Price:
      <input type="text" name="unitprice" value="">
        </div></td>
    </tr>
    <tr>
      <td class="body1" div align="right">Photo:
      <input type="text" name="pphoto" value=""></td>
    </tr>
    <tr>
      <td div align="right">How many in stock:
      <input type="text" name="cstock" value=""></td>
    </tr>
    <tr>
     <td class="body1" div align="right">Attach for IMG folder:</div>
     <INPUT NAME="file1" TYPE="FILE" value="" SIZE=30></td>
    </tr>
    <tr>
     <td class="body1" div align="right">Attach for SMALL folder:</div>
     <INPUT NAME="file2" TYPE="FILE" value="" SIZE=30></td>
    </tr>
   </table>
  </td>
</tr>
</table>
<hr color="silver">

  <table width="100%" border="0" cellspacing="4" cellpadding="4">
    <tr>
      <td><div align="center">
       <input  type="image" name="submit" id="submit2" title="submit to db." border="0" src="images/submitbutton.jpg" width="142" height="47" alt="Submit Button">
       </div></td>
    </tr>
  </table>

simflex · March 9, 2012

I resolved it myself since no one has any clue.

Sign In

How can I validate only visible form fields when radio button is checked?

Recommended Posts

simflex

Link to comment

Share on other sites

simflex

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information