An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!
Solved
Code to make fields invisible... (jQuery)
Posted on 2011-03-08
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>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
9
8
17 Comments
Active 6 days ago
You may use :
Test page :
$("select").change(function() {
$(".section").hide();
var indexOfToShow = $("select>option:selected").index("select>option");
$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
});
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>
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?
This is the validator I'm using, by the way:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
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>
Active 6 days ago
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>
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
ss030811.jpg
Active 6 days ago
Try to clear your cache. Tested on IE8 :
leakim971-417779.flv
leakim971-417779.flv
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?
Active 6 days ago
Did you cleared your cache? I've the same version.
Clipboard02.gif
Clipboard02.gif
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?
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?
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...
Active 6 days ago
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...
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...
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?
Active 6 days ago
> 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 :
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>
Featured Post
![[Webinar] Lessons on Recovering from Petya](https://filedb.experts-exchange.com/files/public/2017/7/11/dcb3272a-62a8-4274-a34e-d1771610ec3b.png)
Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month8 days, 2 hours left to enroll
715 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.