title: Jquery Custom Rules Validation with Depends and Param Properties
body: <p>So i have a html drop down box with 4 values A,B,C and D. And 4 pre filled text-boxes(P1,P2,P3,P4) with some texts in them, and 4 blank text boxes(B1,B2,B3 and B4).</p>
  
  <p>I want validations to be applied on the basis of what value is selected in dropdownbox.</p>
  
  <p>if drop-down value is A, i want to only check that value in the Blank Textbox B1 is not equal to value in pre populated text box P1 and B1 can't be left as blank as well.</p>
  
  <p>Same for Dropdown box value with B - > P2.val != B2.val, and B2 shouldn't be blank. and same applies for other.</p>
  
  <p>And i came up with this method for One textbox, but its not working somehow, not sure what is wrong. Would appreciate a solution to my problem. </p>
  
  <p>And the intended result for the below code piece is, when dropdownbox has value A in it, it should only then, proceed to check that the value in two text boxes is same, i.e. in P1 and B1. !!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form&gt;
      &lt;select class="inlineEdit" name="Dropdownbox" id="Dropdownbox"&gt;
      &lt;option value="A"&gt;
          A
      &lt;/option&gt;&lt;option value="B"&gt;
          B
      &lt;/option&gt;&lt;option value="C"&gt;
          C
      &lt;/option&gt;&lt;option value="D"&gt;
          D
      &lt;/option&gt;
  &lt;/select&gt;
      &lt;br/&gt;&lt;br/&gt;
      &lt;input type="text"  name="P1" value="Old Value" /&gt;
      &lt;br/&gt;&lt;br/&gt;
      &lt;input type="text"  name="B1" /&gt;
      &lt;button type="submit"&gt;Test&lt;/button&gt;
  &lt;/form&gt;​​​​​​​​​​​
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>jQuery.validator.addMethod("change", function(value, element, param) {
  alert(param + " " + value);
      return this.optional(element) || value != param;
  }, jQuery.format("You must enter {0}"));
  
  
  $("form").validate({
      rules: {
          B1: {
              required: function(element) {
                  return $("#Dropdownbox").val() == "A";
              },
              change: {
                  param: $("#P1").val(),
                  depends: function(element) {
                      return $("#Dropdownbox").val() == "A";
                  }
              }
          }
      },
  
      debug: true
  });​
  </code></pre>
  
  <p>........</p>
  
  <p>One can try to run the above code here at : <a href="http://jsfiddle.net/" rel="nofollow">http://jsfiddle.net/</a></p>
  
  <p><strong>THe Problem is $("#P1").val is sending true, and not the actual value in param, that is why it is not working. If i hard code the values in param, the code works fine. any solutions ???</strong></p>
  
  <p>Thanks,</p>