Jquery validation select box conditional

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