Предотвращение пустых входов от прохождения пустых строк javascript

Question

Итак, если у меня есть такая форма

<form action='/admin' method='post'>
  <input class='form-control' name='truckNumber' type='number'></input>
  <input class='form-control' name='truckNumber' type='number'></input>
  <input class='form-control' name='truckNumber' type='number'></input>
  <input class='form-control' name='truckNumber' type='number'></input>
  <input class='btn btn-primary' type='submit'></input>
</form>

Если пользователь не заполняет ни одно из полей, я отправляю массив со значениями ['', '', '', '']. Есть ли способ предотвратить публикацию значений, если ввод оставлен пустым?

Answer 1

При отправке проверьте наличие пустых входных данных и присвойте им атрибут disabled. Отключенные входные данные не будут отправлены.

Пример:

document.querySelector('.btn-primary').addEventListener('click', function(e) {
  e.preventDefault();
  var inputs = document.querySelectorAll('.form-control');
  inputs.forEach(function(item, i) {
    if (item.value.length == 0) item.setAttribute('disabled', 'disabled');
  });
  // document.querySelector("form").submit();
});

input:disabled {
  border: 1px solid red;
}

<form action='/admin' method='post'>
  <input class='form-control' name='truckNumber' type='number'>
  <input class='form-control' name='truckNumber' type='number'>
  <input class='form-control' name='truckNumber' type='number'>
  <input class='form-control' name='truckNumber' type='number'>
  <input class='btn btn-primary' type='submit'>
</form>

Answer 2

использовать требуется как это:

<form action='/admin' method='post'>
  <input class='form-control' name='truckNumber' type='number' required></input>
  <input class='form-control' name='truckNumber' type='number' required></input>
  <input class='form-control' name='truckNumber' type='number' required></input>
  <input class='form-control' name='truckNumber' type='number' required></input>
  <input class='btn btn-primary' type='submit'></input>
</form>

Answer 3

Вы можете использовать required атрибут html в каждом элементе ввода. Если вы хотите сделать это с JavaScript, просто просмотрите массив и проверьте, является ли какое-либо значение пустым.