Greetings again helpers,
I have these snips:
<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.unitprice.value == "") {
missinginfo += "\n - Price is NOT blank";
}
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 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>
</table>
These are relevant code.
If the user clicks on the Yes radio button, all form fields inside the –> are displayed. If the user checks the No radio button the only form field called price is displayed for data entry.
So far so good. The issue I am struggling with is how to make sure the Javascript validation code I posted above only raises an alert for only visible form fields.
I’m sorry to say it but, that code is nasty!
Replace those kind of lines:
With:
Then you can check validate it only if it’s visible easly with the
:visibleselector: