Question

仅在至少一个字段的值大于0时，我才尝试提交表单

所有输入字段的名称和类别均与产品循环相同。所有字段的默认值为0，因此至少一个输入字段的值应大于0。

这是我的代码的样子。

$('#form').on('submit', function(e) {
  $('input.test').each(function() {
    if ($(this).val() == 0) {
      return false;
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <table>
    <tbody>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input type="submit"></td>
      </tr>
    </tbody>
  </table>
</form>

Answer 1

尝试减少：

$('#form').on('submit', function(e) {
  var sum = $('input.test').toArray().reduce(function(sum, element) {
    var num = isNaN(element.value)?0:+element.value; // find the number
    return sum + num;
  }, 0);
  console.log(sum);
  if (sum===0) e.preventDefault(); // stop submission
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <table>
    <tbody>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input type="submit"></td>
      </tr>
    </tbody>
  </table>
</form>

如果您不想遍历所有事物（即，在填满某些内容后立即离开，则可以使用确实允许提交1，a，c

$('#form').on('submit', function(e) {
  var sum = 0;
  $('input.test').each(function() {
    sum += isNaN(this.value)?0:+this.value; // find the number
    return !sum; // leave the each when it is truthy
  });  
  console.log(sum);
  if (sum===0) e.preventDefault(); // stop submission
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <table>
    <tbody>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input type="submit"></td>
      </tr>
    </tbody>
  </table>
</form>

Answer 2

存储一个布尔值以跟踪是否应该继续提交，如果不符合条件，请使用preventDefault取消提交表单：

$('#form').on('submit', function(e) {
  let proceed = false;
  
  $('input.test').each(function() {
    if (!isNaN(this.value) && this.value > 0){
      proceed = true;
      return false;
    }
  });
  
  !proceed && e.preventDefault()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <table>
    <tbody>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input class="test" name="price[]" type="text"></td>
      </tr>
      <tr>
        <td><input type="submit"></td>
      </tr>
    </tbody>
  </table>
</form>

jQuery仅在至少一个输入字段的值大于0

2 个答案: