"Any" boolean function in jquery

Profile picture for Wilson
Wilson

Is there any easy way to check if any elements in a jquery selector fulfill a condition? For instance, to check if any textboxes in a form are empty (kind of pseudo, not real jquery):

$('input.tb').any(val().length == 0);

Note: I know it could be done with a helper method, just curious if it was possible in one statement.

The problem with jQuery's built-in filtering functions like .is(), .has(), and .filter() is that none of them short circuit as soon as the criteria is met.

This is good use case where we can reach for a native ES6 method like Array.some() by converting to an array first:

$(":input").toArray().some((el) => $(el).val().length === 0)

If you really wanted, you could write an extension method like this:
<sup>(though it's probably not necessary)</sup>

jQuery.fn.some = function(filter) {
    return this.toArray().some(filter)
}

// then use it like this:
var someEmpty = $(":input").some(function(el) { 
    return $(el).val().length === 0
});

Working demo in Stack Snippets

<!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js --> 
jQuery.fn.some = function(filter) {
    return this.toArray().some(filter)
}

function checkEmpty() {
    var someEmpty = $(":input").some(function(el) { 
      return $(el).val().length === 0
    });

    console.log("Some Empty: ", someEmpty);
}

$(function() {
  $(":input").change(checkEmpty)
  checkEmpty() // fire once on init
})
<!-- language: lang-html --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>

<input type="text" value="">
<input type="text" value="">
<!-- end snippet -->

Related Posts