title: How to pass variables to jQuery validation
body: <p>Building off of <a href="https://stackoverflow.com/questions/1366858/jquery-validation-plugin-custom-method-multiple-parameters"><strong>this SO question</strong></a>, I'm trying to pass two variables to a custom validator method.  Using <code>console.log</code> I can see that the upper &amp; lower ranges are defined in the HTML, but are not being passed correctly to the options, instead I'm getting <code>NaN</code> instead.  </p>
  
  <p>The problem seems to be that the values of the two text boxes are not defined or set yet (when they're sent in the validation rules below), but are when they arrive to the validator (this is just a guess, and I haven't been able to come up with a method to sniff their values prior to the validation attempt).  So if I log them inside the validator method, they show up fine, but if I pass them as variables, they show up as NaN inside the PCBID object (Chrome browser):</p>
  
  <pre><code>Object {PCBID: Object}
      PCBID: Object
          lower: NaN
          upper: NaN
      __proto__: Object
      __proto__: Object
  </code></pre>
  
  <p>Here's the validator, there are other rules set to prevent anything from integers being entered, so that shouldn't be the problem:</p>
  
  <pre><code>//this validator checks to make sure the user has entered the PCBIDs in 
  //the correct order in the range form.
  $.validator.addMethod("highLowCheck", function (value, element, options)
  {
  console.log("Inside highLowCheck validator");
  console.log(parseInt($('#pcbid_range_lower').val(),10)); //shows expected values
  console.log(parseInt($('#pcbid_range_upper').val(),10)); //shows expected values
  
  console.log(options.PCBID.upper); //NaN
  console.log(options.PCBID.lower); //NaN
  //evaluates to false because NaN is falsey
  console.log(options.PCBID.upper &gt; options.PCBID.lower); 
  console.log("Done logging");
  return options.PCBID.upper &gt; options.PCBID.lower;
  }
  );
  </code></pre>
  
  <p>Here are the variables I'm trying to pass:</p>
  
  <pre><code>            pcbid_range_upper: {
              required: true,
              digits: true,
              rangelength: [3, 6],
              highLowCheck:
              { PCBID:
                  {
                      //this doesn't work                        
                      lower: parseInt($('#pcbid_range_lower').val(),10), 
                      upper: parseInt($('#pcbid_range_upper').val(),10)
                  }
              },
  </code></pre>
  
  <p>If I pass in primitive values like this:</p>
  
  <pre><code>            highLowCheck:
              { PCBID:
                  {
                      lower: 1000, //works
                      upper: 2000
                  }
              },
  </code></pre>
  
  <p>This method works, but it's not very useful because users can enter any value they like so I have to be able to pass them in as variables.  I also need this to work with variables because I need to call it from more than one validation routine, otherwise I'd just use the variables in the validator directly (as I was before the need for more than one form to use the validator).</p>
  
  <p>In case it's useful, here is the HTML for the two inputs:</p>
  
  <pre><code>&lt;div data-role="fieldcontain" data-controltype="textinput" class="pcbid_selections" tabindex="2"&gt;
      &lt;label for="pcbid_range_lower"&gt;Starting PCBID *&lt;/label&gt;
      &lt;input name="pcbid_range_lower" id="pcbid_range_lower" class="create_group" placeholder="52759" value="" type="text" data-mini="true" /&gt;
  &lt;/div&gt;
  &lt;div data-role="fieldcontain" data-controltype="textinput" class="pcbid_selections" tabindex="3"&gt;
      &lt;label for="pcbid_range_upper"&gt;Ending PCBID *&lt;/label&gt;
      &lt;input name="pcbid_range_upper" id="pcbid_range_upper" class="create_group" placeholder="52769" value="" type="text" data-mini="true"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The Question:</strong>
  How can I pass variables inside a rule to a custom validator?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p><strong>The Solution:</strong> with thanks to @Sparky &amp; Mathletics</p>
  
  <p>The validator method was changed to only receive the strings of the <em>names</em> of the two variables I wanted to pass, <em>not their contents</em>.  Then using @Mathletic's suggestion, I simply put them into jQuery variable form <em>inside</em> the validator:</p>
  
  <pre><code>//this validator checks to make sure the user has entered the PCBIDs in the 
  //correct order in the range form.
  $.validator.addMethod("highLowCheck", function (value, element, options){
  return parseInt($('#' + options.PCBID.upper).val(), 10) &gt; 
         parseInt($('#' + options.PCBID.lower).val(), 10);
  }
  );
  </code></pre>
  
  <p>And called them from the rules like so:</p>
  
  <pre><code>highLowCheck:
      {
          PCBID:
          {
              lower: 'pcbid_range_lower',
              upper: 'pcbid_range_upper'
          }
      },
  </code></pre>
  
  <p>Just an FYI to anyone who finds this, I tried passing in the pound sign ("#") with the strings from the rules (EG:  <code>'#pcbid_range_lower'</code>), but that didn't seem to work.  This method does, and you can just prepend the "#" in the validator method instead which works well.</p>