How to check if either select box or text inputs are empty with jQuery

Question

I have a form with 2 select boxes and a text input. On change of any of those 3 elements I want to run a check to see if any of the elements are empty(no value) and then change a variable. Here's what I have tried so far:

var emptyFields = true;

var inputs = $('input[type="text"], select').on('keyup change', function() {

  inputs.each(function() {
    var elm = $(this),
    val = elm.val();

    if ((val != '0' && elm.is('select')) || (val != '' && elm.is('input'))) {
      emptyFields = false;
      return false;
    }
  });

  $('.info span').text(emptyFields);
});

.info {
margin-top:20px;
}
span {
font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option selected disabled>SELECT AN OPTION</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>

<select>
<option selected disabled>SELECT AN OPTION</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
</select>

<input type="text" />

<div class="info">Empty fields? <span></span></div>

The issue I am having now is that the variable is changing to false even before all 3 elements have a value. If you are completing the elements from left to right, the variable should not return false until you've entered a character into the text input after making a selection in each select box.

Barmar · Accepted Answer · 2017-10-16 20:51:13Z

First problem: Once you set the variable to false during a check, you never change it back to true in future checks. You should use a local variable, which you initialize each time you call the function.

Second problem: You have your check backwards. Since you want to show true if any of the fields are empty, you need to initialize the variable to false, then set it to true when you find an empty field.

var inputs = $('input[type="text"], select').on('keyup change', function() {
  var emptyFields = false;
  inputs.each(function() {
    var elm = $(this),
    val = elm.val();

    if ((val == '0' && elm.is('select')) || (val == '' && elm.is('input'))) {
      emptyFields = true;
      return false;
    }
  });

  $('.info span').text(emptyFields);
});

.info {
margin-top:20px;
}
span {
font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option selected disabled>SELECT AN OPTION</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>

<select>
<option selected disabled>SELECT AN OPTION</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
</select>

<input type="text" />

<div class="info">Empty fields? <span></span></div>

Collectives™ on Stack Overflow

How to check if either select box or text inputs are empty with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related