自定义验证插件因多个 table 行而失败

Question

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

这里是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>

当只涉及一行时，这段代码工作正常。当出现两个 table 行时，它将第 2 行皮重值与第 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());

$.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"
    }
  }
});

<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>

自定义验证插件因多个 table 行而失败

Custom validation plugin fails with multiple table rows

javascript

jquery

jquery-validate