Solved

Validate a field, based on a user dropdown selection

Posted on 2013-12-05

JavaScript

1 solution

254 Views

Last Modified: 2013-12-05

Hi,

I would like the form below to validate the colour2 field, if the colour field is set to other. At present its not working. The contents of the validate2.js script is also below:

Form:

<html>

<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/validate2.js"></script>
<title>Registration Form</title>

<style type="text/css">
<!--
	label
{
		display: block;
		color: #FF0000;
		font-style: bold;
}
		-->
</style>
</head>

<body>
<form method="POST" id="registerForm" action="next_stage.php">

<select size="1" name="colour">
						<option selected value="">Select....</option>
						<option value="blue">Blue</option>
						<option value="red">Red</option>
						<option value="other">Other</option>
						</select>
					<input type="text" name="colour2" id="colour2"/>

<input type="submit" value="Submit" name="B1">
</form>
</body>

</html>

validate2.js:

$(document).ready(function(){
        $("#registerForm").validate({
        rules: {
               colour: "required",
               colour2: {
	               required: function(element) {
	              var flag = false;
	                 if($("#colour").val()=="other")
	                  {
	                    if($("#colour2").val()=="")
	                    flag = true;
	                  } 
	                  return flag;
	                     }
	                            
                       }

}
});
});

Open in new window

Any help would be greatly appreciated.

Comment

Question by:bootneck2222

[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

Join The Community

4 Comments

LVL 20

Expert Comment

by:chaitu chaitu

ID: 396977332013-12-05

define id for select box

<select size="1" name="colour" id="colour">
<option selected value="">Select....</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="other">Other</option>
</select>

LVL 20

Accepted Solution

by:chaitu chaitu

chaitu chaitu earned 300 total points

ID: 396977362013-12-05

after define the id for select box then you can call like this.
<select size="1" name="colour" id="colour">

if($("#colour").val()=="other")

LVL 19

Expert Comment

by:Rikin Shah

ID: 396977372013-12-05

Hi,

You have set the function to be called when the document is ready. Set it to index change event of colour and check.

Author Closing Comment

by:bootneck2222

ID: 396977492013-12-05

Many thanks chaituu

Featured Post

Question has a verified solution.

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

Get Started with JavaScript

Article by: Experts Exchange

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …

JavaScript

Improved Form Tokens to Guard Against CSRF and Screen Scrapers

Article by: Ray

Nothing in an HTTP request can be trusted, including HTTP headers and form data. A form token is a tool that can be used to guard against request forgeries (CSRF). This article shows an improved approach to form tokens, making it more difficult to…

Introduction to jQuery (Part 1)

Video by: Jason

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)

Introduction to jQuery (Part 2)

Video by: Jason

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…