?
Solved

jQuery Validation Plugin - Only validate form that's showing...

Posted on 2011-03-07
4
Medium Priority
?
390 Views
Last Modified: 2012-08-13
In the attached script there's a form with a dropdown box and two sections.  When they select "option one," section one should display (section one should display automatically).  If the select "option two," it should display.  I am using the jQuery validation plugin (http://bassistance.de/jquery-plugins/jquery-plugin-validation/) and I don't want it to validate the fields that aren't showing.  I only want it to validate the fields that are currently displayed according the the selection the user made.
<script type="text/javascript">

$().ready(function() {
	
	// validate signup form on keyup and submit
	$("#signupForm").validate({
		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">

<!-- 
WHEN THE USER HITS OPTION ONE OR TWO, IT WILL REVEAL THE CORRESPONDING FORM FIELDS.  I ONLY WANT THE VALIDATION PLUGIN TO VALIDATE THE FIELDS THAT ARE DISPLAYING.  I DON'T WANT IT TO TRY TO VALIDATE THE FIELDS THAT AREN'T SHOWING. 
-->

<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

0
Comment
Question by:EMB01
[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
  • 3
4 Comments
 
LVL 3

Expert Comment

by:ccwill88
ID: 35066066
You can add "disabled " attribute in your tag.

<input style="display:none" disabled type='text' name='test1' />

Open in new window

0
 
LVL 3

Expert Comment

by:ccwill88
ID: 35066095
Another way:
You can add
ignore:":hidden",

Open in new window

in your validate setting.

Like this:

$("#signupForm").validate({
                ignore:":hidden",
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			}
		},...

Open in new window

0
 
LVL 14

Author Comment

by:EMB01
ID: 35068724
So, how do I make the dropdown box display and hide the correct section?
0
 
LVL 3

Accepted Solution

by:
ccwill88 earned 2000 total points
ID: 35076076
You can add <div> tag in every section,and when <select> onchange to display and hide the correct section,
like this:
   <select onchange="$('div').hide();$('#option_'+this.value).show();">
    <option value="volvo">Option one</option>
    <option value="saab">Option two</option>
   </select>

 <!-- BEGIN OPTION ONE -->
<DIV id='option_volvo' style="display:block">
        <p>
            <label for="firstname">Firstname for option 1</label>
            <input id="firstname" name="firstname" />
        </p>
        <p>
            <label for="lastname">Lastname  for option 1</label>
            <input id="lastname" name="lastname" />
        </p>
</DIV>
<!-- END OPTION ONE -->

<!-- BEGIN OPTION TWO -->
 <DIV id='option_saab'  style="display:none">
        <p>
            <label for="firstname">Firstname  for option 2</label>
            <input id="firstname" name="firstname" />
        </p>
        <p>
            <label for="lastname">Lastname  for option 2</label>
            <input id="lastname" name="lastname" />
        </p>
</DIV>
<!-- END OPTION TWO -->

Open in new window

0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question