防止空输入传递空字符串javascript

Question

So, if I have a form like this

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

If the user doesn't fill out any of the fields, I get an array posted with values ['','','','']. Is there a way to prevent the values from being posted if the input is left blank?

Answer 1

You can use required attribute of html within each input element. If you want to do it with JavaScript then simply traverse array and check if any value is empty.

Answer 2

On submit, check for empty inputs and give them the disabled attribute. Disabled inputs will not be submitted.

Example:

 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 3

use required like this:

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