CODEWITHSUNDEEP
javascriptjquery
Shri
Shri

Reputation: 752

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

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?

Upvotes: 2

Views: 1591

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

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?"

    // 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>

Upvotes: 2

charlietfl
charlietfl

Reputation: 171679

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" />

Upvotes: 1

Lapskaus
Lapskaus

Reputation: 1721

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" />

Upvotes: 2

Francesco Vallone
Francesco Vallone

Reputation: 9

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?");
    }
});

Upvotes: -2

Related Questions