Validating a form field only when it's displayed

[mboehler3]

I have a form set up where, if a checkbox is marked yes, another field ("field X") will display. Now I want "field X" to be mandatory for the user. I've added code in my javascript file that checks whether or not information has been entered for "field X", but it runs that check whether or not "field X" is displayed. So a user may not have checked the box, and they are still required to fill out information for "field X" even though it's hidden. Is there a way check on "field X" only when the checkbox has been marked?Hopefully this makes sense, if not please let me know and I will clarify.Thanks for your help.

[thescientist]

there is. could you show us your code though?

[mboehler3]

Sure thing, here's my form code:

<script language="JavaScript" src="check.js" type="text/javascript"></script>						<script type="text/javascript" language="JavaScript">				function HidePart(d) { document.getElementById(d).style.display = "none"; }				function ShowPart(d) { document.getElementById(d).style.display = "block"; }				function CheckboxChecked(b, d) {					if (b) { ShowPart(d); }					else { HidePart(d); }				}			</script>						<form action="#thankyou" method="post" name="referaclient" onSubmit="return checkrefervalues();">				<input type="hidden" name="sendemail" value="rac">		<div class="tmargin10">				<div class="form">				<span id="checkboxdiv" style="display:none">		<input class="inputboxheaders" name="subscribeid" type="text" size="30" maxlength="20"  value="Your Subscription ID" tabindex="1" onfocus="if(this.value == 'Your Subscription ID') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Subscription ID';}" />		</span>				<input class="inputboxheaders" name="name" type="text" size="30" maxlength="50"  value="Your Name" tabindex="2" onfocus="if(this.value == 'Your Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Name';}" />		<input class="inputboxheaders" name="companyname" type="text" size="30" maxlength="50"  value="Your Company" tabindex="3" onfocus="if(this.value == 'Your Company') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Company';}" />				<input class="inputboxheaders" type="text" size="30" maxlength="50" name="email" value="Your E-mail" tabindex="4" onfocus="if(this.value == 'Your E-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your E-mail';}" />							<table cellpadding="0" cellspacing="0" border="0">		<tr>		<td><input type="checkbox" name="enewsletter" value="OptIneNewsletter" tabindex="5" onClick="java script:checkBoxValidate(0)" />Opt in to eNewsletter</td>		</tr>		<tr>		<td><input type="checkbox" name="enewsletter" value="OptOuteNewsletter" tabindex="6" onClick="java script:checkBoxValidate(1)" />Opt out of eNewsletter</span></td>		</tr>		</table>				<strong>Print Newsletter</strong>							<input type="checkbox" name="printnewsletter" value="OptOutPrintNewsletter" tabindex="7" onclick="CheckboxChecked(this.checked,'checkboxdiv')" />Opt out of print newsletter				<input type="image" src="/images/continue-btn.gif" tabindex="8" alt="Get Quote" id="submit2" name="submit2" />				</div>				</div>				</form>

And the JS that checks it:

							function checkrefervalues(){								message = "";								if (document.referaclient.subscribeid.value.length == 0) {										message = message + "Please enter your Subscription ID.\n";									}								if (document.referaclient.subscribeid.value == 'Your Subscription ID') {									message = message + "Please enter your Subscription ID.\n";								}								if (document.referaclient.companyname.value.length ==0){										message = message+"Please enter your Company Name.\n";									}								if(document.referaclient.companyname.value =='Your Company'){												message = message+"Please enter your Company Name.\n";								}								if(document.referaclient.name.value.length ==0){												message = message+"Please enter your Name.\n";								}									if(document.referaclient.name.value =='Your Name'){												message = message+"Please enter your Name.\n";								}								if (document.referaclient.email.value =='Your E-mail'){										message = message+"Please enter your Email Address.\n";									}								else								{								if (document.referaclient.email.value.length ==0){										message = message+"Please enter your Email Address.\n";									}									else {									 	checkemail(document.referaclient.email.value)									}										}

From my original post, "field X" is the "Your Subscription ID" field.

[thescientist]

instead of checking for the value, just check whether or not the checkbox has been checked or not.

[mboehler3]

instead of checking for the value, just check whether or not the checkbox has been checked or not.

Well they have the option to check it or not, it's not mandatory. I am trying out code like this:

if (document.referaclient.printnewsletter.checked == true) { message = message + "Please enter your Subscription ID.\n"; }

but even when I enter a subscription ID, I still get the error...

[thescientist]

ok, i think i got it. so check to see if the checkbox is checked, and if it is, and another if clause to check the value of the field to see whether or not they have included the proper information. something like this:

if(checkbox.checked == true){   if(field.value == "" || field.value == "default text"){	  //error message here   };};

also, you be giving ID's to all your elements and using document.getElementById() to reference them

[mboehler3]

I tried this code:

if {document.referaclient.printnewsletter.checked == true){   if (document.referaclient.subscribeid.value.length ==0 || document.referaclient.subscribeid.value =='Your Subscription ID'){   message = message+"Please enter your ID!\n";   }}

and it doesn't seem to validate

[thescientist]

are you checking for errors? What do you mean it doesn't validate, what is happening?

[mboehler3]

are you checking for errors? What do you mean it doesn't validate, what is happening?

It just doesn't check for any of the other values, it automatically goes to the thank you page even when the other fields aren't entered. I don't know another way to check for errors.

[thescientist]

depending on the browser you are using:* IE8/Safari/Chrome have developers tools built in* Firefox has a plug in called FirebugI'm sure you can google it if you use something elseyou can also litter alert statements at various stages of the function to track how the function is running, and use it to output variables and states of elements. Like I also mentioned earilier, using document.getElementById() is the preferred way of referencing elements on a page.

[mboehler3]

I just grabbed Firebug and ran it, this is the error that popped up:

missing ( before conditionhttp://localhost/pminewsletter_check.jsLine 27

I accidentally put { instead of (... so I changed it and it works.Thanks a lot for your help.

[dsonesuk]

you do know you have a missing curly bracket at the end of function checkrefervalues() i've just tested it with you codeif (document.referaclient.printnewsletter.checked == true){}and it ran fine, where is the message displayed exactly

[mboehler3]

you do know you have a missing curly bracket at the end of function checkrefervalues() i've just tested it with you codeif (document.referaclient.printnewsletter.checked == true){}and it ran fine, where is the message displayed exactly

ah, you're right. Thanks