I'm trying to check if the form inputs are all empty. It works fine when any input has value (returns true) but doesn't return false when input gets empty again.

var data;

$('form :input').on('input', function() {
    data = $('form').serialize();
    console.log(data.indexOf('=&') > -1)
})

<script src=".1.1/jquery.min.js"></script>
<form>
  <input type="text" name="in-1" />
  <input type="text" name="in-2" />
  <input type="text" name="in-3" />
  <input type="text" name="in-4" />
  <input type="text" name="in-5" />
  <input type="text" name="in-6" />
  <input type="text" name="in-7" />
  <input type="text" name="in-8" />
</form>

I'm trying to check if the form inputs are all empty. It works fine when any input has value (returns true) but doesn't return false when input gets empty again.

var data;

$('form :input').on('input', function() {
    data = $('form').serialize();
    console.log(data.indexOf('=&') > -1)
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="in-1" />
  <input type="text" name="in-2" />
  <input type="text" name="in-3" />
  <input type="text" name="in-4" />
  <input type="text" name="in-5" />
  <input type="text" name="in-6" />
  <input type="text" name="in-7" />
  <input type="text" name="in-8" />
</form>

• javascript
• jquery
• html

3 Answers 3

(data.indexOf('=&') > -1

will return true when at least one of the fields is blank - you're checking for the existence of the =&, and as soon as one field is blank, this string will exist. However, relying on the serialised version of the data is a bit of a hack anyway IMHO. Much better to check the inputs directly:

$('form :input').on('input', function() {
  var allBlank = true; //assume they're all blank until we discover otherwise
  //loop through each of the inputs matched
  $('form :input').each(function(index, el)
  {
    if ($(el).val().length != 0) allBlank = false; //they're not all blank anymore
  });
  console.log(allBlank);
});

var serialized = $(form).serialize();

if(serialized.indexOf('=&') > -1 || serialized.substr(serialized.length - 1) == '='){
   //you've got empty values
}

Using jQuery, you can test it before serializing:

$(form).find('input').each(function(index, elem){
   if($(elem).val().length == 0){
       //this field is empty
   }
});

data.split('&').every(e => { return e.indexOf('=') === (e.length - 1); })