Patterns for avoiding jQuery silent fails

Question

Is there any good practice to avoid your jQuery code silently fail?

For example:

$('.this #is:my(complexSelector)').doSomething();

I know that every time this line get executed, the selector is intended to match at least one element, or certain amount of elements. Is there any standard or good way to validate that?

I thought about something like this:

var $matchedElements = $('.this #is:my(complexSelector)');
if ($matchedElements.length < 1)
    throw 'No matched elements';
$matchedElements.doSomething();

Also I think unit testing would be a valid option instead of messing the code.

My question may be silly, but I wonder whether there is a better option than the things that I'm currently doing or not. Also, maybe I'm in the wrong way checking if any element match my selector. However, as the page continues growing, the selectors could stop matching some elements and pieces of functionality could stop working inadvertently.

Answer 1

It's not necessarily wrong when a selector matches nothing; it depends on your application. You could write your own validateNonEmpty plugin:

jQuery.fn.validateNonEmpty = function() {
  if (this.length == 0)
    throw "Empty list detected - selector: " + this.selector;
  return this; // thanks @Matt
};

Then you can do:

$('something something').validateNonEmpty().doSomething();

Also, note that you want to check to see if the length is 0, not less than 0.

Answer 2

You could write a plugin:

jQuery.fn.requireElements = function (amount, exactMatch) {
    if (amount === undefined) {
        amount = 1;
    };

    if (this.length < amount || this.length > amount && exactMatch) {
        throw new Error(this.length " elements instead of " (exactMatch ? "at least " : "") + amount);
    };

    return this;
};

Then:

$('yourSelector').requireElements(2).bind('click', function () {

});

Answer 3

I would recommend using jQuery lint.

for example

$(function(){
  var foo = $('.this #is:my(complexSelector)');
});

will complain both that you have an invalid selector (as given example selector is in fact invalid, though I assume you know that :)), and that no elements where in fact found.

See http://js.azatoth.net/test/lint.html for an example.