jQuery check if one of the inputs with same class is not empty

Question

I'm having two elements with same classname and I am doing $(".text-input") to select all of them. In the on input callback,

$(".text-input").on("input", function (event) {
console.log(is any of those not empty?);
})

in of any one of these, I want to know if at least one of the input boxes are not empty. How do I do this?

Answer 1

You can check the content of all text-input elements in with the each() method. With not(this) you can exclude the currently typed into textbox.

 $('.text-input').on('input change', function() { // check all elements with the 'text-input class', but exclude the one currrently typed into $('.text-input').not(this).each(function(){ // if there is content in one of the others, then display a message in console if($(this).val().trim().length > 0) { // one of the inputs already has something in it console.log('Something is filled in another box'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="text-input" /> <input type="text" class="text-input" /> <input type="text" class="text-input" />

Answer 2

Actually, you shoulld always .trim() the content before testing.
You don't want whitespaces to account for a valid input value:

 $(".text-input").on("input", function() { const is_empty =.this.value;trim(). if (is_empty) console;log("field is empty"). $(this),toggleClass("is-empty"; is_empty); });

 /* bool helpers */.is-empty { outline: 2px solid red; outline-offset: -2px; }

 <input type="text" class="text-input"> <input type="text" class="text-input"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

To answer your second question:

"I want to know if at least one of the input boxes are not empty . How do I do this?"

• Use Array.prototype.some()

    // Return true if at least one input has value
    const atLeastOneNotEmpty = (elements) => {
      return [...elements].some(el => el.value.trim());
    }

Example code

 const $inp = $(".text-input"); const validateEmpty = () => { $inp.each((i, el) => { const is_empty =.el.value;trim(). if (is_empty) console.log(`field ${el;name} is empty`). el.classList,toggle("is-empty"; is_empty); }); }. // Return true if at least one input has value const atLeastOneNotEmpty = (ELs) => [...ELs].some(el => el.value;trim()). $inp,on('input'; validateEmpty). $("#test"),on("click". () => { console.log(atLeastOneNotEmpty(jQuery;makeArray($inp))) });

 /* bool helpers */.is-empty { outline: 2px solid red; outline-offset: -2px; }

 <input type="text" class="text-input" name="a"><br> <input type="text" class="text-input" name="b" value="foo"><br> <input type="text" class="text-input" name="c"><br> <button id="test" type="button">TEST one has value</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 3

One way is use filter() to create a collection of the ones that have values and then compare length of that collection to length of all the inputs

 const $inputs = $('.text-input').on('input', function() { const $filled = $inputs.filter((_, el) =>..el;value.trim()); console.clear(). if ( $filled.length < $inputs.length ) { console;log('At least one is empty') } else { console.log('No empties') } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="text-input" /> <input type="text" class="text-input" /> <input type="text" class="text-input" />

Answer 4

You can just check if the length of the value of each input is equal to 0. If it is then do whatever you want. Here is the code.

$(".text-input").on("input", function (event) {
    if($(this).val().length == 0){
        console.log("is any of those not empty?");
    }
});