jQuery Отправляйте форму, только если хотя бы одно поле ввода имеет значение больше 0

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

Сохраните логическое значение, чтобы отслеживать, следует ли вам продолжить отправку, и если вы не соответствуете условию, используйте 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>

Answer 2

Попробуйте уменьшить:

$('#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,а, с например

$('#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>