Validate Fields Only If Visible 1

[southbean]

Hello All,

I'm very new to JavaScript and have run into a problem.

I have a form that has a couple of radio buttons, which make some sections of the form visible or invisible depending on the value of the radio buttons.

The problem is I don’t need to validate fields if they are hidden, but do if they are visible on the form.

I’ve tried this method but have not got it to work:

var MyForm = document.forms["Form2"];
if(MyForm.Field1.value == "Yes")
{
function DoRequestType()
{
  var frm = document.forms["Form2"];
if(frm.Field1.value == "Yes" && frm.Field2.value == "")
  {
    alert('This is a required field.');
    return false;
  }
  else
 {
  return true;
   }

Any/All help or suggestions with issue would be GREATLY appreciated!

- tm

 

[vacunita]

How are you setting the invisibility of the elements?

If you are setting them like:

document.element.style.visible=hidden;

Then you can check for that value, if its set to hidden then you can choose not to validate. Otherwise validate.

if(MyForm.Field1.style.visible!='hidden'){
do validation code here. 
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[southbean]

Hello vacunita,

Thank you for you're reply!

I'm actually using this:

document.getElementById('layer1').style.display = 'block';

Thanks again,

- tm

 

[vacunita]

Then use that value.

if(document.getElementById('layer1').style.display == 'block'){
do validation code here
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[southbean]

Hello Vacunita,

Thanks for your reply! I got put on another project but now I'm back to this issue and it's still not working.

Here's my code:

<script type="text/javascript">
var frmvalidator2 = new Validator("form3");

if (document.getElementById("layer19").style.display == 'block';)
{
	frmvalidator2.addValidation("Field1","numeric");
	frmvalidator2.addValidation("Field1","minlength=6");
	frmvalidator2.addValidation("Field1","maxlength=6");
	frmvalidator2.addValidation("Field1","req","Field1 a required field.");
	frmvalidator2.addValidation("Field2","req","Field2 is a required field.");
	frmvalidator2.addValidation("Field3","req","Field3 is a required field.");
	frmvalidator2.addValidation("Field4","req","Field4 is a required field.");
}
</script>

Any ideas?

Thanks again!

- tm

 

[feherke]

Hi

There you are setting up an object, but where ( and when ) is the validation performed ?

There are small chances to help you without seeing the whole document. Do you have a publicly accessible copy of it ?

Feherke.

http://rootshell.be/~feherke/

 

[vacunita]

Since I'm not familiar with your validator objectI can't really say whether:

frmvalidator2.addValidation("Field1","numeric");

Actually validates the input then and there, or just sets it to be validated afterwards at some point.

As feherke suggests we'd need to know what the object Validator really does.

Other than that, the logic is sound. Setting certain elements to be validated when a layers display is set to block.

The only issue here would be if the display wasn't specifically set by JS at some point. Then that value would not be 'block' but rather just an empty string.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[southbean]

Hello Feherke & Vacunita,

Thanks for your replies! Below is a form that will indicate what I am trying (unsuccessfully) to do.

I want to validate the 'Maiden Name' field only if it is visible. Here's my code:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>JavaScript Validation</title>

<script type="text/javascript">
		function toggleLayer1(val)
		{
			if(val == 'Yes' || val === true)
			{
				document.getElementById('c1').checked = true;
				document.getElementById('c2').style.display = 'block';
			}
			else if(val == 'No' || val === false)
			{
				document.getElementById('c2').checked = true;
				document.getElementById('c2').style.display = 'none';
			}
		}
		</script>
		
<script type="text/javascript">

function validate_form ( )
{
	valid = true;

        if ( document.contact_form.contact_name.value == "" )
        {
                alert ( "Please fill in the 'Your Name' box." );
                valid = false;
        }

        if ( ( document.contact_form.maiden[0].checked == false ) && ( document.contact_form.maiden[1].checked == false ) )
        {
                alert ( "Please indicate if you have a maiden name" );
                valid = false;
        }

        if ( document.contact_form.age.selectedIndex == 0 )
        {
                alert ( "Please select your Age." );
                valid = false;
        }

        return valid;
}

</script>

</head>

<body 
onload="
document.getElementById('c2').style.display ='none'";
bgcolor="#FFFFFF">

<form name="contact_form" method="post" onSubmit="return validate_form ( );">

<h1>Please Enter Your Information Below</h1>

<p>Your Name: <input type="text" name="contact_name"></p>

<p>Do you have a maiden name? 
	<input id="c1" type="radio" name="maiden" value="Yes" onClick="toggleLayer1(this.checked);"> Yes
  	<input id="c1" type="radio" name="maiden" value="No" onClick="toggleLayer1(!this.checked);"> No
</p>

  <table id="c2" width="50%" border="0">
    <tr> 
      <td>Maiden Name: <input type="text" name="confirm"></td>
    </tr>
  </table>

<p>Your Age:
<select name="age">
<option value="">Please Select an Option:</option>
<option value="0-18 years">0-18 years</option>
<option value="18-30 years">18-30 years</option>
<option value="30-45 years">30-45 years</option>
<option value="45-60 years">45-60 years</option>
<option value="60+ years">60+ years</option>
</select>

<p><input type="submit" name="send" value="Send Details"></p>
</form>

</body>
</html>

Thanks again for your help!

- tm

 

[vacunita]

Something like this:

function validate_form ( )
{
    valid = true;

        if ( document.contact_form.contact_name.value == "" )
        {
                alert ( "Please fill in the 'Your Name' box." );
                valid = false;
        }

        if ( ( document.contact_form.maiden[0].checked == false ) && ( document.contact_form.maiden[1].checked == false ) )
        {
                alert ( "Please indicate if you have a maiden name" );
                valid = false;
        }

[red]if((document.getElementById('c2').style.display=="block")||(document.getElementById('c2').style.display=="")){
        	if(document.contact_form.confirm.value==""){
                                       alert ( "Please fill in your maiden name." );
                                               valid = true;
                                                     }[/red]
        if ( document.contact_form.age.selectedIndex == 0 )
        {
                alert ( "Please select your Age." );
                valid = false;
        }

        return valid;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[southbean]

Vacunita,

Thank you VERY much! That worked perfectly.

Thanks again!

- tm