Question

我定义了两个jQuery验证函数，如下所示：

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

/////////////////////////////////////////////////////
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);
});
</script>

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

基本上，我使用上面的函数来确保lowID的值总是小于或等于highID。

我使用以下脚本来设置验证。

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

这两个功能非常有效。但是，如果我预定义#confeehigh和#confeelow的值，则这些字段无法通过验证测试。我真的无法弄清楚为什么。因为没有预先填充的值，这些验证功能都可以正常工作。

此处导致问题的HTML脚本：

<input type="text" class="" maxlength="32" size="32" value="12" id="confeelow" name="confeelow" />
<input type="text" class="" maxlength="32" size="32" value="23" id="confeehigh" name="confeehigh" />

换句话说，如果我为confeelow手动输入12，为confeehigh手动输入23，那么验证效果很好。

没有预定义值，我没有任何问题：

<input type="text" class="" maxlength="32" size="32" value="" id="confeelow" name="confeelow" />
<input type="text" class="" maxlength="32" size="32" value="" id="confeehigh" name="confeehigh" />

任何人都可以给我一些提示，说明为什么它不能用于预定义的值？

谢谢

///////////////// Update-001 ////////////////////

有些人可能会遇到这个问题：如果代码使用新输入的数据，为什么必须使用默认值。这是理由

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

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

<input type='text' value='<?php echo $fee; ?>' />

此默认值会导致验证问题。谢谢

Answer 1

您的问题是您从未收到change事件。

由于parseInt函数无法获取jQuery对象，因此未设置初始最大值和最小值。
您需要将parseInt($("#confeehigh"))更改为parseInt($("#confeehigh").val())

jQuery - 为什么验证规则不支持预定义的值？

1 个答案: