Jump to content
mboehler3

Validating a form field only when it's displayed

Recommended Posts

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.

Share this post


Link to post
Share on other sites

there is. could you show us your code though?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Edited by thescientist

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

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

Edited by thescientist

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Edited by thescientist

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...