Question

尝试使用jQuery验证插件自行创建比较表中的Gross和Tare值的验证。皮重应始终小于毛重。

这是JS代码：

$.validator.addMethod('lessThan', function (value, element, param) {
if (this.optional(element)) return true;
var i = parseInt(value);
var j = parseInt($(param).val());
return i <= j;
}, "Tare must less than Gross");

$('#myForm').validate({rules: {tare: {lessThan: ".gross"}}});

我的HTML：

<form id="myForm">
    <table id="lineItemTable">
        <thead>
        <th>
            <tr>
                <td>Gross</td>
                <td>Tare</td>
            </tr>
        </th>
        </thead>
        <tbody>
        <tr>
            <td><input type="text" name='gross' class="gross"/></td>
            <td><input type="text" name='tare' class="tare"/></td>
        </tr>
        <tr>
            <td><input type="text" name='gross' class="gross"/></td>
            <td><input type="text" name='tare' class="tare"/></td>
        </tr>
        </tbody>
    </table>
</form>

当只涉及一行时，此代码可以正常工作。当有两个表行时，它将第二行皮重值与第一行总值进行比较。显然我希望它将第二行皮重值与第二行毛重值进行比较。由于某种原因，错误消息显示在第1行。

以下是一个屏幕截图：

请告知我如何更改代码以使其正常运行。

这是我正在使用的CDN：

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>

Answer 1

查找$('.gross').val()将始终检索第一个匹配元素的值（在整个文档中）。

相反，只查看包含要验证的元素的行：

var j = parseInt($(element).closest('tr').find(param).val());

＆＃13;

$.validator.addMethod('lessThan', function(value, element, param) {
  console.log(element);
  if (this.optional(element)) return true;
  var i = parseInt(value);
  var j = parseInt($(element).closest('tr').find(param).val());
  return i <= j;
}, "Tare must less than Gross");

$('#myForm').validate({
  rules: {
    tare: {
      lessThan: ".gross"
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>

<form id="myForm">
  <table id="lineItemTable">
    <thead>
      <th>
        <tr>
          <td>Gross</td>
          <td>Tare</td>
        </tr>
      </th>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="text" name='gross' class="gross" />
        </td>
        <td>
          <input type="text" name='tare' class="tare" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" name='gross' class="gross" />
        </td>
        <td>
          <input type="text" name='tare' class="tare" />
        </td>
      </tr>
    </tbody>
  </table>
</form>

＆＃13;

自定义验证插件失败，有多个表行

1 个答案: