Solved: Validate a field, based on a user dropdown selection

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.