Check all values in an array are same

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 bett开发者_如何转开发er one. If it is a good approach how do I check all values in a javascript array are the same?

Thanks

This sounds like a good approach. You can check for equal elements in a javascript array using this simple javascript function. You may paste this to a firebug console to check its functionality.

// check if all elements of my_array are equal, my_array needs to be an array
function check_for_equal_array_elements(my_array){
  if (my_array.length == 1 || my_array.length == 0) {
     return true;
  }
  for (i=0;i<my_array.length;i++){
     if (i > 0 && my_array[i] != my_array[i-1]) {
       return false;
     }
  }
  return true;
}

//Example:
var my_array = [];
my_array.push(5);
my_array.push(5);

// will alert "true"
alert("all elements equal? "+check_for_equal_array_elements(my_array));

my_array.push(6);
// will alert "false"
alert("all elements equal? "+check_for_equal_array_elements(my_array));

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');
});        

First of if you dynamically create n textboxes you should use live() or delegate() methods of jQuery to inform of new DOM elements added.

Secondly your approach is just fine but instead of an array you can set param of inputs with wrong text and then disable button if there are any elements with wrong text. I think it will be faster than looping though all textboxes all over.

I would use validation to achieve this.

http://docs.jquery.com/Plugins/Validation#Demos

If you can validate client-side great - either use one of the existing jQuery validation functions shown in the link above, or write your own.

If you must validate server side via ajax, then you could build this into a custom validation routine.

Then in the call that shows/hides the button - make a call to $('#formid).validate() - returns false if any validation fails.