By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,385 Members | 1,109 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,385 IT Pros & Developers. It's quick & easy.

Validation of fields in a form

P: 89
I have a problem with some validation of some fields in a form.

I have some fields that only become visible if a specific field is chosen.

For example:

[HTML]<select name="u_global___delivery_form" onchange="document.getElementById('array_div').sty le.display=(this.selectedIndex>1)?'block':'none';" >
<option value="0" selected="selected"></option>
<option value="Single board">Single board</option>
<option value="Array">Array</option>
</select>[/HTML]

Where if you select the "array" option in my form, additional fields become visible:

[HTML]<div id="array_div" style="display:none;">
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="border-style:none;">
<tr>
<td height="25" align="center" valign="top" colspan="3" style="padding-top: 5px; padding-bottom: 0px; border-style:none;"><img src="../images/array.gif"></td>
</tr>
<tr>
<td width="44%" align="right" valign="top" style="padding-right: 5px; padding-top: 5px; border-style:none;">Array size X</td>
<td width="50%" align="left" valign="top" style=" padding-top: 5px; border-bottom-style:none; border-left-style:none; border-right-color:#E0A70D; border-top-style:none;"><input name="u_subpanel___array_x" type="text" size="15"></td>
</tr>
<tr>
<td align="right" valign="top" style="padding-right: 5px; border-style:none;">Array size y</td>
<td align="left" valign="top" style="border-bottom-style:none; border-left-style:none; border-right-color:#E0A70D; border-top-style:none;"><input name="u_subpanel___array_y" type="text" size="15"></td>
</tr>
<tr>
<td align="right" valign="top" style="padding-right: 5px; border-style:none;">Boards per array X</td>
<td align="left" valign="top" style="border-bottom-style:none; border-left-style:none; border-right-color:#E0A70D; border-top-style:none;"><input name="u_subpanel___array_num_x" type="text" size="15"></td>
</tr>
<tr>
<td align="right" valign="top" style="padding-right: 5px; border-style:none;">Boards per array y</td>
<td align="left" valign="top" style="border-bottom-style:none; border-left-style:none; border-right-color:#E0A70D; border-top-style:none;"><input name="u_subpanel___array_num_y" type="text" size="15"></td>
</tr>
<tr>
<td align="right" valign="top" style="padding-right: 5px; border-style:none;">Board seperation</td>
<td align="left" valign="top" style="border-bottom-style:none; border-left-style:none; border-right-color:#E0A70D; border-top-style:none;"><select name="u_subpanel___board_sep">
<option selected="selected"></option>
<option value="Break routing">Break routing</option>
<option value="Scoring">Scoring</option>
<option value="Break routing+Scoring">Both</option>
</select> </td>
</tr>
<tr>
<td align="right" valign="top" style="padding-right: 5px; border-bottom-color:#E0A70D; border-left-style:none; border-right-style:none; border-top-style:none;">Pasta data required</td>
<td align="left" valign="top" style="border-left-style:none; border-right-color:#E0A70D; border-bottom-color:#E0A70D; border-top-style:none;"><input onClick="javascript:getDiv6();" name="u_subpanel___pasta_req" type="radio" value="No" style="border-style:none;">No&nbsp;&nbsp;<input name="u_subpanel___pasta_req" id="tin_array" type="radio" value="Yes" style="border-style:none;" onClick="javascript:getDiv6();">Yes</td>
</tr>
</table>
</div>[/HTML]

Now, my problem is to only validate on the newly visible fields, when the user selects the "array" option and no validation if the fields do not become visible.

Please help.........

Thanks very much in advance.
Feb 20 '07 #1
Share this Question
Share on Google+
16 Replies

dmjpro
100+
P: 2,476
can't u check the display style which is to be validated
Feb 20 '07 #2

P: 89
can't u check the display style which is to be validated
Not sure exactly what you mean by that. Can you give me an example....?
Feb 20 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Use
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("id").style.property
to get the style property of the object where "id" is the id of the object and property should be (in this case) "display".
Feb 20 '07 #4

dmjpro
100+
P: 2,476
suppose u have ...
<input id = id_name>

in js .... write
if(document.getElementById('id_name').style.displa y == 'block')
/do validation

is this what u need
Feb 20 '07 #5

P: 89
suppose u have ...
<input id = id_name>

in js .... write
if(document.getElementById('id_name').style.displa y == 'block')
/do validation

is this what u need
I think so, but i can't get it working

I have done the following:

if(document.getElementById('array_div').style.disp lay = "block")
var frmvalidator = new Validator("mainform");
frmvalidator.addValidation("u_subpanel___array_x", "req","Please type in array x dimension");
frmvalidator.addValidation("u_subpanel___array_x", "alnumhyphen");

But it doesn't validate on the field u_subpanel___array_x when the div id array_div is visible in my form
Feb 20 '07 #6

acoder
Expert Mod 15k+
P: 16,027
I think so, but i can't get it working

I have done the following:

Expand|Select|Wrap|Line Numbers
  1. if(document.getElementById('array_div').style.display = "block")
  2. var frmvalidator  = new Validator("mainform");
  3. frmvalidator.addValidation("u_subpanel___array_x","req","Please type in array x dimension");
  4.   frmvalidator.addValidation("u_subpanel___array_x","alnumhyphen");
But it doesn't validate on the field u_subpanel___array_x when the div id array_div is visible in my form
That should be double equals:
Expand|Select|Wrap|Line Numbers
  1. if(document.getElementById('array_div').style.display == "block")
Feb 20 '07 #7

P: 89
That should be double equals:
Expand|Select|Wrap|Line Numbers
  1. if(document.getElementById('array_div').style.display == "block")
It still doesn't work even with double equals. Here is the code i use:

[HTML]<select id="test" name="u_global___delivery_form" onchange="document.getElementById('array_div').sty le.display=(this.selectedIndex>1)?'block':'none';" >
<option value="0" selected="selected"></option>
<option value="Single board">Single board</option>
<option value="Array">Array</option>
</select>
<div id="array_div" style="display:none;">
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="border-style:none;">
<tr>
<td width="44%" align="right" valign="top">Array size X <font color="#FF0000">*</font></td>
<td width="50%" align="left" valign="top"><input name="u_subpanel___array_x" type="text" size="15"></td>
</tr>

<tr>
<td align="right" valign="top">Array size y</td>
<td align="left" valign="top"<input name="u_subpanel___array_y" type="text" size="15"></td>
</tr>
</table>
</div>

<script language="JavaScript" src="gen_validatorv2.js" type="text/javascript">
</script>


<script language="JavaScript" type="text/javascript">
var frmvalidator = new Validator("mainform");
frmvalidator.addValidation("u_global___delivery_fo rm","dontselect=0","Please choose delivery form");
if(document.getElementById('array_div').style.disp lay == "block")
frmvalidator.addValidation("u_subpanel___array_x", "req","Please fill in array x");
frmvalidator.addValidation("u_subpanel___array_y", "req","Please fill in array x");[/HTML]
Please post in code tags - moderator
Feb 23 '07 #8

acoder
Expert Mod 15k+
P: 16,027
You need a code block after the if because you are checking for both x and y if the display style is block. Also, you have a typo - instead of y you had x for the second error message:
Expand|Select|Wrap|Line Numbers
  1. var frmvalidator  = new Validator("mainform");
  2. frmvalidator.addValidation("u_global___delivery_form","dontselect=0","Please choose delivery form");
  3. if(document.getElementById('array_div').style.display == "block") {
  4.   frmvalidator.addValidation("u_subpanel___array_x","req","Please fill in array x");
  5.   frmvalidator.addValidation("u_subpanel___array_y","req","Please fill in array y");
  6. }
Feb 23 '07 #9

P: 89
You need a code block after the if because you are checking for both x and y if the display style is block. Also, you have a typo - instead of y you had x for the second error message:
Expand|Select|Wrap|Line Numbers
  1. var frmvalidator  = new Validator("mainform");
  2. frmvalidator.addValidation("u_global___delivery_form","dontselect=0","Please choose delivery form");
  3. if(document.getElementById('array_div').style.display == "block") {
  4.   frmvalidator.addValidation("u_subpanel___array_x","req","Please fill in array x");
  5.   frmvalidator.addValidation("u_subpanel___array_y","req","Please fill in array y");
  6. }
It still skips the validation of the two fields u_subpanel___array_x and u_subpanel___y if the array option is chosen from the u_global___delivery_form filed. Any suggestions on what is wrong...........??????
Feb 23 '07 #10

acoder
Expert Mod 15k+
P: 16,027
Show your validation code.

Does the rest of the validation work?
Feb 23 '07 #11

P: 89
Show your validation code.

Does the rest of the validation work?
The rest of the validation works fine. It only skips the two fields before mentioned.

<script language="JavaScript" src="gen_validatorv2.js" type="text/javascript">
</script>

<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("mainform");
frmvalidator.addValidation("cust_upload_file","req ","Please upload a file");

frmvalidator.addValidation("job___order_qty","req" ,"Please fill in board quantity");
frmvalidator.addValidation("job___order_qty","nume ric");

frmvalidator.addValidation("u_orderinfo___ship_dat e","req","Please choose a ship date");

frmvalidator.addValidation("u_orderinfo___ship_by" ,"dontselect=0","Please choose a ship by method");

frmvalidator.addValidation("job___num_layers","don tselect=0","Please choose number of layers");

frmvalidator.addValidation("job___drm_pcbx","req", "Please type in board x dimension");
frmvalidator.addValidation("job___drm_pcbx","alnum hyphen");

frmvalidator.addValidation("job___drm_pcby","req", "Please type in board y dimension");
frmvalidator.addValidation("job___drm_pcby","alnum hyphen");

frmvalidator.addValidation("job___bd_thick_pixels" ,"req","Please type in board thickness");
frmvalidator.addValidation("job___bd_thick_pixels" ,"alnumhyphen");

frmvalidator.addValidation("u_global___delivery_fo rm","dontselect=0","Please choose delivery form");

var frmvalidator = new Validator("mainform");
frmvalidator.addValidation("u_global___delivery_fo rm","dontselect=0","Please choose delivery form");
if(document.getElementById('array_div').style.disp lay == "block") {
frmvalidator.addValidation("u_subpanel___array_x", "req","Please fill in array x");
frmvalidator.addValidation("u_subpanel___array_y", "req","Please fill in array y");
}

frmvalidator.addValidation("u_material___outer_mat ","dontselect=0","Please choose board material");

frmvalidator.addValidation("u_material___outer_cu_ thk","dontselect=0","Please choose copper thickness");

frmvalidator.addValidation("u_global___chamfer","d ontselect=0","Please choose chamfer");

frmvalidator.addValidation("u_global___soldermask" ,"dontselect=0","Please choose soldermask");

frmvalidator.addValidation("u_global___legend","do ntselect=0","Please choose legend");

frmvalidator.addValidation("u_global___bluemask"," dontselect=0","Please choose peelable mask");

frmvalidator.addValidation("u_global___via_cap","d ontselect=0","Please choose via capping");

frmvalidator.addValidation("u_global___scoring","d ontselect=0","Please choose scoring");

frmvalidator.addValidation("u_global___ul_req","do ntselect=0","Please choose UL required");

frmvalidator.addValidation("job___surface_finish", "dontselect=0","Please choose a surface finish");

frmvalidator.addValidation("job___impedance_contro l","dontselect=0","Please choose impedance");

frmvalidator.addValidation("u_global___ipc_perfag" ,"dontselect=0","Please choose IPC / Perfag");


</script>
Feb 23 '07 #12

acoder
Expert Mod 15k+
P: 16,027
Oh, I think I know what the problem is. You've copied the code exactly with the bug:
Expand|Select|Wrap|Line Numbers
  1. if(document.getElementById('array_div').style.display == "block") {
There's a bug which adds a space sometimes. It should be "display" not "disp lay".
Feb 23 '07 #13

P: 89
Oh, I think I know what the problem is. You've copied the code exactly with the bug:
Expand|Select|Wrap|Line Numbers
  1. if(document.getElementById('array_div').style.display == "block") {
There's a bug which adds a space sometimes. It should be "display" not "disp lay".
I removed the space so the code says display and not dis play but it didn't make a difference. it still doesn't validate the two fields which becomes visible when the "array" option is chosen from the drop down menu "u_global___delivery_form"

<select id="test" name="u_global___delivery_form" onchange="document.getElementById('array_div').sty le.display=(this.selectedIndex>1)?'block':'none';" >
<option value="0" selected="selected"></option>
<option value="Single board">Single board</option>
<option value="Array">Array</option>
</select>

<div id="array_div" style="display:none;">
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="border-style:none;">
<tr>
<td width="44%" align="right" valign="top">Array size X</td>
<td width="50%" align="left" valign="top"><input name="u_subpanel___array_x" type="text" size="15"></td>
</tr>

<tr>
<td align="right" valign="top">Array size y</td>
<td align="left" valign="top"><input name="u_subpanel___array_y" type="text" size="15"></td>
</tr>
</table>
</div>
Feb 23 '07 #14

acoder
Expert Mod 15k+
P: 16,027
I tested the following code by calling it on the onsubmit event handler:
Expand|Select|Wrap|Line Numbers
  1. function mytest() {
  2.  if (document.getElementById('array_div').style.display == "block") alert("test");
  3.  else alert("failed");
  4.  return false;
  5. }
and it works fine. When the div is visible, it displays "test" and when it isn't, it displays "failed".
Feb 23 '07 #15

P: 89
I tested the following code by calling it on the onsubmit event handler:
Expand|Select|Wrap|Line Numbers
  1. function mytest() {
  2.  if (document.getElementById('array_div').style.display == "block") alert("test");
  3.  else alert("failed");
  4.  return false;
  5. }
and it works fine. When the div is visible, it displays "test" and when it isn't, it displays "failed".
It works now. Chose another way to do the validation because i wasn't doing it with the onsubmit event handler. But another problem came up. As it is now the validation is on the option "array". So when i choose the array option i can't submit because it gives me an alert. What it should do when the "array" option is chosen, is to validate on the newly visible fields "u_subpanel___array_x" and "u_subpanel___array_x" could you perhaps help me on that........? I have put some code for you here:

function checkform ( form )
{
if (form.u_global___delivery_form.value == "0") {
alert( "Please choose a delivery form." );
form.u_global___delivery.focus();
return false ;
}
if (document.getElementById('array_div').style.displa y == "block") {
Here, if possible, validation of two new visible fields
return false;
}
}


<select id="test" name="u_global___delivery_form" onchange="document.getElementById('array_div').sty le.display=(this.selectedIndex>1)?'block':'none';" >
<option value="0" selected="selected"></option>
<option value="Single board">Single board</option>
<option value="Array">Array</option>
</select>

<div id="array_div" style="display:none;">
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="border-style:none;">
<tr>
<td>
<input name="u_subpanel___array_x" type="text" size="15">
</td>
</tr>
<tr>
<td>
<input name="u_subpanel___array_y" type="text" size="15">
</td>
</tr>
</table>
</div>
Feb 23 '07 #16

acoder
Expert Mod 15k+
P: 16,027
Since you haven't set an id for the input boxes, you can use the names, e.g.
Expand|Select|Wrap|Line Numbers
  1. if (form.u_subpanel___array_x.value == "") {
  2.  alert("Please enter the array value x");
  3.  form.u_subpanel___array_x.focus();
  4.  return false;
  5. }
Feb 23 '07 #17

Post your reply

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