Jquery validation select box conditional
Hi,
Please check the following code,
i wanted to validate "name" select box only when sport select box has some value other than none.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery validation Test</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$("#commentForm").validate({
rules: {
name: {
select: function() {
return $('select[name=sport]').val() != 'none';
}
},
agree: "required"
}
});
jQuery.validator.addMethod(
"select",
function(value, element) {
if (element.value == "none")
{
return false;
}
else return true;
},
"Please select an option."
);
});
</script>
<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error { margin-left: 253px; float: none; color: red; padding-left: .5em; vertical-align: top;}
#commentForm { width: 670px; }
#commentForm label.error {
margin-left: 10px;
width: auto;
display: block;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<p>
<label for="cname">Name </label>
<select name="name" id="name">
<option value="none">none</option>
<option value="Volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<p>
<label for="ccSelect">ccSelect</label>
<select name="sport" id="sport">
<option value="none">none</option>
<option value="Volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</body>
</html>
The above code is not working, always name select box is getting validated without verifying sport select box
If i change the above code like the below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery validation Test</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$("#commentForm").validate({
rules: {
name: {
select: true
},
agree: "required"
}
});
jQuery.validator.addMethod(
"select",
function(value, element) {
if (element.value == "none")
{
return false;
}
else return true;
},
"Please select an option."
);
});
</script>
<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error { margin-left: 253px; float: none; color: red; padding-left: .5em; vertical-align: top;}
#commentForm { width: 670px; }
#commentForm label.error {
margin-left: 10px;
width: auto;
display: block;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<p>
<label for="cname">Name </label>
<select name="name" id="name">
<option value="none">none</option>
<option value="Volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<p>
<label for="ccSelect">ccSelect</label>
<select name="sport" id="sport">
<option value="none">none</option>
<option value="Volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
It works,
There is a difference between the below blocks, if i hardcode to true or false, it works as expected but when the function returns a value, it is not working
name: {
select: true
},
name: {
select: function() {
return $('select[name=sport]').val() != 'none';
}
},
Please include jquery.js and jquery.validate.js