Question

The following is some code for making sure people can’t submit if the value of an input with the attribute data-fill="fill" is equal to ”. My problem is that it checks the IF statement from first to last input. This means that if the first input has a value, the form will submit; if the first two inputs are filled, it will submit and so forth… If the first input isn’t filled, it works fine for the other inputs. Is it possible to ensure that it checks all inputs before returning true or false?

$('form').submit(function() {
     var input = $('input, textarea');

     if (input.data('fill') == 'fill' && input.val() == '') {
         return false;
     } 
});

I know I can solve this problem by targeting each input individually with “else if”, but that just seems like the wrong way to do it.

Answer 1

To consider all of the input values use the each method.

$('form').submit(function() {    
   var allFilled = true;
   $('input, textarea').each(function () {
     if ($(this).data('fill') === 'fill' && $(this).val() === '') {
       allFilled = false;
     }
   });

   return allFilled;
});