Code to make fields invisible... (jQuery)

The following form should only be validated when fields are visible.  The other, "hidden" fields should not be validated.  My question is, how do I make fields "hidden?"  When a user selects "section one" from the dropdown menu, I want section one to be shown and all other sections to be hidden.  Likewise, if the user selects "option two," it will be shown and all other sections will be hidden.
<script type="text/javascript">

$().ready(function() {
	
	// validate signup form on keyup and submit
	$("#signupForm").validate({
                  ignore:":hidden",
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			}
		},
		messages: {
			firstname: "Please enter your firstname",
			lastname: "Please enter your lastname",
			username: {
				required: "Please enter a username",
				minlength: "Your username must consist of at least 2 characters"
			},
		}
	});

});

</script>

<form action="" method="post">

<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select>

<!-- BEGIN OPTION ONE -->

		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>

<!-- END OPTION ONE -->

<!-- BEGIN OPTION TWO -->

		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>

<!-- END OPTION TWO -->

</form>

Open in new window

LVL 14
EMB01Asked:
Who is Participating?
Advertise Here
 
leakim971Connect With a Mentor PluritechnicianCommented:
> Perhaps, there's another way of writing the same code?

1 billion but you will have the same result if the problem come from your browser, your configuration or your integration.
You can test the page with toolos like http://browsershots.org

I see you've multiple time the same id try this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		// validate signup form on keyup and submit
		$("#signupForm").validate({
					  ignore:":hidden",
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				}
			}
		});

		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		}).change();
		
	});

</script>
</head>
<body>
<form id="signupForm" action="http://www.experts-exchange.com" method="post">
<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select><input type="submit" value="Submit" />
<!-- BEGIN OPTION ONE -->
<div class="section">
		<p>
			<label for="firstname1">Firstname </label>
			<input id="firstname1" name="firstname" />
		</p>
		<p>
			<label for="lastname1">Lastname</label>
			<input id="lastname1" name="lastname" />
		</p>
</div>
<!-- END OPTION ONE -->
<!-- BEGIN OPTION TWO -->
<div class="section">
		<p>
			<label for="firstname2">Firstname</label>
			<input id="firstname2" name="firstname" />
		</p>
		<p>
			<label for="lastname2">Lastname</label>
			<input id="lastname2" name="lastname" />
		</p>
</div>
<!-- END OPTION TWO -->
</form>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
You may use :

		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		});

Open in new window


Test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		// validate signup form on keyup and submit
/*		$("#signupForm").validate({
					  ignore:":hidden",
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
			}
		});
*/		
		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		});
		
	});

</script>
</head>
<body>
<form id="signupForm" action="" method="post">
<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select>
<!-- BEGIN OPTION ONE -->
<div class="section">
		<p>
			<label for="firstname">Firstname </label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION ONE -->
<!-- BEGIN OPTION TWO -->
<div class="section">
		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION TWO -->
</form>
</body>
</html>

Open in new window

0
 
EMB01Author Commented:
Thanks, that works well; however, when I uncomment the validation function it doesn't work anymore.  Can you help me make it work with the validator?
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Go Premium
 
EMB01Author Commented:
This is the validator I'm using, by the way:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/
0
 
leakim971PluritechnicianCommented:
Check the depedencies section. Use jQuerie 1.3.2 or 1.4.2
0
 
EMB01Author Commented:
I tried versions 1.4.2 and 1.4.4 but neither work.  Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		// validate signup form on keyup and submit
		$("#signupForm").validate({
					  ignore:":hidden",
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
			}
		});
		
		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		});
		
	});

</script>
</head>
<body>
<form id="signupForm" action="" method="post">
<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select>
<!-- BEGIN OPTION ONE -->
<div class="section">
		<p>
			<label for="firstname">Firstname </label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION ONE -->
<!-- BEGIN OPTION TWO -->
<div class="section">
		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION TWO -->
</form>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Work fine for me :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		// validate signup form on keyup and submit
		$("#signupForm").validate({
					  ignore:":hidden",
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
			}
		});

		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		}).change();
		
	});

</script>
</head>
<body>
<form id="signupForm" action="http://www.experts-exchange.com" method="post">
<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select><input type="submit" value="Submit" />
<!-- BEGIN OPTION ONE -->
<div class="section">
		<p>
			<label for="firstname">Firstname </label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION ONE -->
<!-- BEGIN OPTION TWO -->
<div class="section">
		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION TWO -->
</form>
</body>
</html>

Open in new window

0
 
EMB01Author Commented:
Really?  I copied and pasted your code and it doesn't work at all for me...  I attached a screenshot to show you what it does.
ss030811.jpg
0
 
leakim971PluritechnicianCommented:
Try to clear your cache. Tested on IE8 :
leakim971-417779.flv
0
 
EMB01Author Commented:
You're right, it does work in IE but not the version of the browser I'm using (IE Version: 8.0.6001.18702).  This is the first time I've ever had something not work in this browser; it's the only browser I ever use.  Do you know of anyway we could fix this?
0
 
leakim971PluritechnicianCommented:
Did you cleared your cache? I've the same version.
Clipboard02.gif
0
 
EMB01Author Commented:
I tried clearing my cache but it still won't work.  The browser that I use is that version of IE, but it's called slimbrowser:

http://www.slimbrowser.net/en/

It's a really great browser, and I've never had something fail in it before.  Does this mean the script won't work in any previous versions of IE?  Is there anyway to make this cross-browser?
0
 
leakim971PluritechnicianCommented:
Could you confirm the jquery.validate plugin is in the same folder of the page ?
0
 
EMB01Author Commented:
Yes, it's in the same folder.  Maybe, can we make the script simpler so that it works on older browsers?  I'm just guessing...
0
 
leakim971PluritechnicianCommented:
We're using jQuery... Especially for browser compatibilty
I run a test on http://browsershots.org
Currently it look fine on most of browsers.
In slimbrowser it look like JS is not enabled...
0
 
EMB01Author Commented:
Hmm...  I was working until I uncommented the validation part.  There must be some sort of incompatibility between the two.  Perhaps, there's another way of writing the same code?
0
 
EMB01Author Commented:
Thanks so much!  That worked very well.  I can't spot what's different, though.  I'll have to give it a closer inspection.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.