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_fo rm" onchange="docum ent.getElementB yId('array_div' ).style.display =(this.selected Index>1)?'block ':'none';">
<option selected="selec ted" value="">Select delivery form</option>
<option value="Single"> Single board</option>
<option style="backgrou nd-color: #4cabcb;" value="Array">A rray</option>
</select>[/HTML]

The extra fields:

[HTML]<div id="array_div" style="display: none;">
<span id="delivery_fo rm">
<table width="100%" border="1" style="border-style: none;" bordercolor="#0 05876" cellspacing="0" cellpadding="0" >
<tr>
<td><select name="Board_sep eration" size="1" style="backgrou nd-color: #ffff99;">
<option selected="selec ted">--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="#0 05876" cellspacing="0" cellpadding="0" >
<tr>
<td><input name="Array_siz e_x" type="text" size="8" style="backgrou nd-color: #ffff99;"></td>
</tr>
</table>
</span>
<span id="Pasta_data" >
<table width="100%" border="1" style="border-style: none;" bordercolor="#0 05876" cellspacing="0" cellpadding="0" >
<tr>
<td><select name="Pasta_dat a" size="1">
<option selected="selec ted" 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="#0 05876" cellspacing="0" cellpadding="0" >
<tr>
<td><input name="Boards_pe r_array_x" type="text" size="8" style="backgrou nd-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:
[code=javascript]// elem is an element to be validated if visible
if (elem.style.dis play == "block") {
// validate
} // no need for else.[/code]