如何使用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.

Answer 1

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>