Form validation using javascript

[printline]

Hello All

I'm a newbee to javascript/ajax. I have produced a form, where i want to do some validation on some fields. I have used the spry framework and it works fine.

Now, i have a select list, where if i choose a certian option, more fields in the form will appear.

My problem is only to validate on these fields if they are visible. I think that maybe some if - else statements will do the trick, but how do i implement these....?

Here is my code:

My select list:

[HTML]<select name="Delivery_form" id="Delivery_form" onchange="document.getElementById('array_div').sty le.display=(this.selectedIndex>1)?'block':'none';" >
<option selected="selected" value="">Select delivery form</option>
<option value="Single">Single board</option>
<option style="background-color: #4cabcb;" value="Array">Array</option>
</select>[/HTML]

The extra fields:

[HTML]<div id="array_div" style="display:none;">
<span id="delivery_form">
<table width="100%" border="1" style="border-style: none;" bordercolor="#005876" cellspacing="0" cellpadding="0">
<tr>
<td><select name="Board_seperation" size="1" style="background-color: #ffff99;">
<option selected="selected">--Please choose--</option>
<option value="Break routing">Break routing</option>
<option value="Scoring">Scoring</option>
<option value="Break routing+Scoring">Both</option>
</select></td>
</tr>
</table>
</span>
<span id="Array_size_x">
<table width="100%" border="1" style="border-style: none;" bordercolor="#005876" cellspacing="0" cellpadding="0">
<tr>
<td><input name="Array_size_x" type="text" size="8" style="background-color: #ffff99;"></td>
</tr>
</table>
</span>
<span id="Pasta_data">
<table width="100%" border="1" style="border-style: none;" bordercolor="#005876" cellspacing="0" cellpadding="0">
<tr>
<td><select name="Pasta_data" size="1">
<option selected="selected" value="No">No</option>
<option value="Yes">Yes</option>
</select></td>
</tr>
</table>
</span>
<span id="Boards_per_array_x">
<table width="100%" border="1" style="border-style: none;" bordercolor="#005876" cellspacing="0" cellpadding="0">
<tr>
<td><input name="Boards_per_array_x" type="text" size="8" style="background-color: #ffff99;"></td>
</tr>
</table>
<span>
</div>[/HTML]

Javascript validation:

var delivery_form = new Spry.Widget.ValidationSelect("delivery_form", {validateOn:["change"]});
var Board_seperation = new Spry.Widget.ValidationSelect("Board_seperation", {validateOn:["change"]});
    var board_size_x = new Spry.Widget.ValidationTextField("Board_size_x", "real", {useCharacterMasking:true, validateOn:["change"]});
    var Array_size_x = new Spry.Widget.ValidationTextField("Array_size_x", "real", {useCharacterMasking:true, validateOn:["change"]});
    var Pasta_data = new Spry.Widget.ValidationSelect("Pasta_data", {validateOn:["change"]});

[acoder]

Yes, an if statement should do fine:

// elem is an element to be validated if visible
if (elem.style.display == "block") {
// validate
} // no need for else.