JQuery Validation when Selected

Question

How can I validate other fields when a box is selected. I have tried the below but to no avail. I only want AnimalName2 to be validated when Horse or Pony is selected. Thanks in advance.

HTML :

 <select class="vars" data-hint="" name="Registration2">
  <option data-price="0.00" selected="selected" value="">
    None
  </option>

  <option data-price="5.00" value="Horse">
    Horse
  </option>

  <option data-price="5.00" value="Pony">
    Pony
  </option>
</select> <span class="clear">clear</span>

<div class="quarter">
  <label style="font-weight: bold; display: inline;">Name</label><br>
  <input autocomplete="off" data-hint="" maxlength="254" name="AnimalName2"
  placeholder="" type="text">
</div>

I am using jquery.validate.min.js

<script>
(function($, W, D) {
  var JQUERY4U = {};
  JQUERY4U.UTIL = {
      setupFormValidation: function() {
        //form validation rules
        $("#addriderform").validate({
          rules: {
            AnimalName2: {
              required: "Registration2:selected"
            },
            agree: "required"
          }
          submitHandler: function(form) {
            form.submit();
          }
        });
      }
    }
    //when the dom has loaded setup form validation rules
  $(D).ready(function($) {
    JQUERY4U.UTIL.setupFormValidation();
  });
})(jQuery, window, document);
</script>

Answer 1

Give id to Dropdown , use depends parameter of jQuery validate :

Working fiddle HERE

HTML

<form id="addriderform" method="post"> 
<select class="vars" data-hint="" name="Registration2" id="Registration2">
  <option data-price="0.00" selected="selected" value="">
    None
  </option>

  <option data-price="5.00" value="Horse">
    Horse
  </option>

  <option data-price="5.00" value="Pony">
    Pony
  </option>
</select> 
    <span class="clear">clear</span>

<div class="quarter">
  <label style="font-weight: bold; display: inline;">Name</label><br>
  <input autocomplete="off" data-hint="" maxlength="254" name="AnimalName2"
    placeholder="" type="text"/>
    <input type="submit"/>
</div>
    </form>

jQuery

 //form validation rules

  $("#addriderform").validate({
      rules: {
        AnimalName2: {
          required: {
               depends: function(element) {
                  if($("#Registration2").val() != "")//If Pony or Horse selected
                  {
                     return true;
                  }
                  else
                  {
                     return false;
                  }
               }
          } 
        },
        //Registration2:{required:true} 
      },
     messages: {

        AnimalName2: {
            required: "Please fill TEXTBOX" 
        },
        Registration2:{
            required: "Please select DROPDOWN ."    
        } 

    },
    errorPlacement: function(error, element) {
        error.appendTo( element.parent() );
    },

      submitHandler: function(form) {
        form.submit();
      }
});

It means required Attribute of "AnimalName2" This textbox depends upon condition inside it. See below it checks whether "None" is selected or not .IF None is selected from Dropdown, return false ,means required attribute becomes false , else becomes true ,so validation applies to textbox.

 function(element) {
                  if($("#Registration2").val() != "")//If Pony or Horse selected
                  {
                     return true;
                  }
                  else
                  {
                     return false;
                  }
               }

For more , check HERE