jQuery - Why the validation rule doesn't support predefined value?
<p>I defined two jQuery validation functions as follows:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

/////////////////////////////////////////////////////
function LessThanValidator(event)
{
  var lowID = event.data.lowID;
  var highID = event.data.highID;
  var formID  = event.data.formID;
  var lowValue = parseInt( $(lowID).val() );
  //var lowValue = parseInt( $(lowID).attr("value") ); // this doesn't fix

  if ( isNaN(lowValue) ) {
    lowValue = 0;
    }

  $(highID).rules('remove', 'min');
  $(highID).rules('add', { min: lowValue });
  $(formID).validate().element( highID );

  return false;  
}

function LargerThanValidator(event)
{
  var lowID = event.data.lowID;
  var highID = event.data.highID;
  var formID  = event.data.formID;
  var highValue = parseInt( $(highID).val() );  
  //var highValue = parseInt( $(highID).attr("value") );  // this doesn't fix

  if ( isNaN(highValue) ) {
    highValue = 0;
    }

  $(lowID).rules('remove', 'max');
  $(lowID).rules('add', { max: highValue });
  $(formID).validate().element( lowID );  

  return false;
}


$(document).ready( function() {

    // validate the #regFormBody form when it is submitted
    $("#regFormBody").validate({
    debug: true,
    errorPlacement: function(error, element) {
      error.insertAfter( element.parent() );
    },
    rules: {
        confeelow: { required: true, digits: true, maxlength: 10, max: isNaN(parseInt($("#confeehigh"))) ? 0 : parseInt($("#confeehigh")) },
       confeehigh: { required: true, digits: true, maxlength: 10, min: isNaN(parseInt($("#confeelow")))  ? 0 : parseInt($("#confeelow")) }
    },

    messages: {      
    confeelow: { max: "Please enter a value less than or equal to To (US$)" },
   confeehigh: { min: "Please enter a value greater than or equal to From (US$)" }
    }
  }); 

  ///////////////////////////////////////////////////////////////
    $("#confeelow").bind("change", {lowID: "#confeelow", highID: "#confeehigh", formID: "#regFormBody"}, LessThanValidator);
    $("#confeehigh").bind("change", {lowID: "#confeelow", highID: "#confeehigh", formID: "#regFormBody"}, LargerThanValidator);
});
&lt;/script&gt;

&lt;style type="text/css"&gt;
.error 
{
    color:red;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
 &lt;div id="mainContent"&gt;
  &lt;form id="regFormBody" name="regFormBody" method="post" action=""&gt;
   &lt;fieldset&gt;
    &lt;div id="conFeeLowFld" class="row "&gt;
     &lt;label for="confeelow" class="label"&gt;Desired Consulting Fee From (US$) &lt;span class="asterisk"&gt;*&lt;/span&gt;&lt;/label&gt;
     &lt;div class="collection"&gt;
      &lt;input type="text" class="" maxlength="32" size="32" value="" id="confeelow" name="confeelow" /&gt;
    &lt;/div&gt;
    &lt;div id="conFeeHighFld" class="row "&gt;
     &lt;label for="confeehigh" class="label"&gt;To (US$) &lt;span class="asterisk"&gt;*&lt;/span&gt;&lt;/label&gt;
     &lt;div class="collection"&gt;
      &lt;input type="text" class="" maxlength="32" size="32" value="" id="confeehigh" name="confeehigh" /&gt;
    &lt;/div&gt;
   &lt;/fieldset&gt;
   &lt;fieldset class="fieldsCollection" id="saveMyProfileFld"&gt;
      &lt;input type="submit"  value="Save My Profile" id="savemyprofile" name="savemyprofile" class="saveprofile"/&gt;
   &lt;/fieldset&gt;
  &lt;/form&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Basically, I use the above functions to make sure that the value of lowID is always less or equal to highID.</p>

<p>I use the following script to set up the validation.</p>

<pre><code>  $("#confeelow").bind("change", { lowID: "#confeelow", highID: "#confeehigh", formID: "#profileFormBody" }, LessThanValidator);
  $("#confeehigh").bind("change", { lowID: "#confeelow", highID: "#confeehigh", formID: "#profileFormBody" }, LargerThanValidator);
</code></pre>

<p>These two functions work pretty well. However, if I predefine the values for #confeehigh and #confeelow, then these fields cannot pass the validation test. I really cannot figure out why. Because without pre-populated values, these validation functions work well.</p>

<p>Here the HTML script that causes the problems:</p>

<pre><code>&lt;input type="text" class="" maxlength="32" size="32" value="12" id="confeelow" name="confeelow" /&gt;
&lt;input type="text" class="" maxlength="32" size="32" value="23" id="confeehigh" name="confeehigh" /&gt;
</code></pre>

<p>In other words, if I manually enter 12 for confeelow and 23 for confeehigh, then the validation works well.</p>

<p>Without predefined value, I don't have any problems:</p>

<pre><code>&lt;input type="text" class="" maxlength="32" size="32" value="" id="confeelow" name="confeelow" /&gt;
&lt;input type="text" class="" maxlength="32" size="32" value="" id="confeehigh" name="confeehigh" /&gt;
</code></pre>

<p>Can anyone give me some hints why it doesn't work for predefined value?</p>

<p>Thank you</p>

<pre><code>///////////////// Update-001 ////////////////////
</code></pre>

<p>Some people may have this question for me: Why you have to use a default value if the code works with new entered data. Here is reason</p>

<pre><code>1&gt; First the user will be allowed to enter data 
2&gt; Second the user will submit the form and store in DB 
3&gt; When next time the user logins again

I have to repopulate the text field by using some code similar as follows:

&lt;input type='text' value='&lt;?php echo $fee; ?&gt;' /&gt;
</code></pre>

<p>And this default value causes me validation problems.
Thank you</p>
