Validation of fields in a form

[printline]

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.

[dmjpro]

can't u check the display style which is to be validated

[printline]

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....?

[acoder]

Use

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".

[dmjpro]

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

[printline]

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

[acoder]

I think so, but i can't get it working

I have done the following:

if(document.getElementById('array_div').style.display = "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

That should be double equals:

if(document.getElementById('array_div').style.display == "block")

[printline]

That should be double equals:

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

[acoder]

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:

var frmvalidator  = new Validator("mainform");
frmvalidator.addValidation("u_global___delivery_form","dontselect=0","Please choose delivery form");
if(document.getElementById('array_div').style.display == "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");
}

[printline]

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:

var frmvalidator  = new Validator("mainform");
frmvalidator.addValidation("u_global___delivery_form","dontselect=0","Please choose delivery form");
if(document.getElementById('array_div').style.display == "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");
}

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...........??????

[acoder]

Show your validation code.

Does the rest of the validation work?

[printline]

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>

[acoder]

Oh, I think I know what the problem is. You've copied the code exactly with the bug:

if(document.getElementById('array_div').style.display == "block") {

There's a bug which adds a space sometimes. It should be "display" not "disp lay".

[printline]

Oh, I think I know what the problem is. You've copied the code exactly with the bug:

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>

[acoder]

I tested the following code by calling it on the onsubmit event handler:

function mytest() {
 if (document.getElementById('array_div').style.display == "block") alert("test");
 else alert("failed");
 return false;
}

and it works fine. When the div is visible, it displays "test" and when it isn't, it displays "failed".

[printline]

I tested the following code by calling it on the onsubmit event handler:

function mytest() {
 if (document.getElementById('array_div').style.display == "block") alert("test");
 else alert("failed");
 return false;
}

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>

[acoder]

Since you haven't set an id for the input boxes, you can use the names, e.g.

if (form.u_subpanel___array_x.value == "") {
 alert("Please enter the array value x");
 form.u_subpanel___array_x.focus();
 return false;
}