470,590 Members | 2,521 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,590 developers. It's quick & easy.

Form validation using javascript

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:

Expand|Select|Wrap|Line Numbers
  1. var delivery_form = new Spry.Widget.ValidationSelect("delivery_form", {validateOn:["change"]});
  2. var Board_seperation = new Spry.Widget.ValidationSelect("Board_seperation", {validateOn:["change"]});
  3.     var board_size_x = new Spry.Widget.ValidationTextField("Board_size_x", "real", {useCharacterMasking:true, validateOn:["change"]});
  4.     var Array_size_x = new Spry.Widget.ValidationTextField("Array_size_x", "real", {useCharacterMasking:true, validateOn:["change"]});
  5.     var Pasta_data = new Spry.Widget.ValidationSelect("Pasta_data", {validateOn:["change"]});
Mar 12 '08 #1
1 2024
acoder
16,027 Expert Mod 8TB
Yes, an if statement should do fine:
Expand|Select|Wrap|Line Numbers
  1. // elem is an element to be validated if visible
  2. if (elem.style.display == "block") {
  3. // validate
  4. } // no need for else.
Mar 12 '08 #2

Post your reply

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

Similar topics

6 posts views Thread by Darren | last post: by
9 posts views Thread by julie.siebel | last post: by
27 posts views Thread by Chris | last post: by
11 posts views Thread by Rik | last post: by
uranuskid
3 posts views Thread by uranuskid | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.