Question

I have a webpage that has a textbox.

When the user enters information into it, it makes a AJAX call to see if the entry is valid, if not it disables a button.

They can also add up to 10 textboxes which is done via jQuery Templates. At the moment each textbox has a class of serial and when a serial textbox is blurred it does this check.

If they enter a invalid serial it will disable the button but if they add a new textbox and that is valid the button is now enabled which is wrong as there is one still invalid.

The only way I can think to do this is to add a 1 or 0 to an array for each textbox and once all elements in the array are 1 then enable the button. Is that a good approach, if not please explain a better one. If it is a good approach how do I check all values in a javascript array are the same?

Thanks

Answer 1

I will assume you have a isValid(str) function that returns a boolean.

Since you’re using jQuery, you can take advantage of jQuery’s filter() function to easily check if any inputs are invalid whenever an input blurs:

$('.serial').live('blur', function () {

    // Get an array of all invalid inputs
    var invalids = $('.serial').filter(function () {
        return !isValid($(this).val());
    });

    // Does the array contain anything?
    $('#button').prop('disabled', invalids.length);

});

Demo: http://jsfiddle.net/3RNV6/

---

Similar concept, but for use with AJAX:

$('.serial').live('blur', function () {
    var me = this;

    $.ajax({
       // ajax config
       success: function (data) {
           if (data === 'Y') $(me).addClass('valid');

           // Get an array of all invalid inputs
           var invalids = $('.serial').filter(function () {
               return !$(this).hasClass('valid');
           });

           // Enable if none invalid
           if (invalids.length === 0) $('#button').prop('disabled', false);
       }
    });
});

$('.serial').live('keypress', function () {
    $('#button').prop('disabled', true);
    $(this).removeClass('valid');
});