2011-06-08 28 views
6

Tengo una página web que tiene un cuadro de texto.Compruebe todos los valores en una matriz son los mismos

Cuando el usuario introduce información en él, hace una llamada AJAX para ver si la entrada es válida, si no la desactiva.

También pueden agregar hasta 10 cuadros de texto que se realiza a través de plantillas de jQuery. Por el momento cada cuadro de texto tiene una clase de serie y cuando un cuadro de texto en serie está borroso hace esta comprobación.

Si ingresan una serie no válida, deshabilitará el botón, pero si agregan un nuevo cuadro de texto y es válido, el botón ahora está habilitado, lo cual es incorrecto ya que todavía hay uno inválido.

La única forma en que puedo pensar para hacer esto es agregar un 1 o 0 a una matriz para cada cuadro de texto y una vez que todos los elementos en la matriz son 1, habilite el botón. Es ese un buen enfoque, si no, por favor explique uno mejor. Si es un buen enfoque, ¿cómo puedo verificar que todos los valores en una matriz de JavaScript sean los mismos?

Gracias

+0

¿Puedes aclarar a qué te refieres con 'cuando un cuadro de texto en serie está ** borroso **'? –

+0

@Charles Cuando se desencadena el evento de desenfoque en ese cuadro de texto ... –

+0

sí, creo que sería correcto establecer 0 1 para verificar el estado de cada cuadro de texto y debe hacer un bucle de arrastre de javascript para averiguar cuál es 0 o 1 –

Respuesta

2

asumiré que tienen una función isValid(str) que devuelve un valor lógico.

Dado que está utilizando jQuery, usted puede tomar ventaja de la función de jQuery filter() comprobar fácilmente si cualquier entrada no son válidos cada vez que difumina una entrada:

$('.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); 

}); 

Demostración: http://jsfiddle.net/3RNV6/


Concepto similar, pero para usar con 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'); 
});   
+0

El problema es que no estoy verificando el valor del cuadro de texto del lado del cliente, solo sé si es válido por la respuesta de mi solicitud AJAX, así que todo lo que tengo es Y o N – Jon

+0

@Jon, perdóname el requisito de AJAX. En ese caso, debe desactivar el botón en 'change' y' removeClass ('valid') '. También 'addClass ('valid')' a la entrada cuando retorna la solicitud AJAX. Una vez que lo hagas, simplemente devuelve '$ (this) .hasClass ('valid')' de la función de filtro. –

+0

¿Cómo obtengo una referencia al cuadro de texto que realizó la llamada AJAX en el método correcto para hacer addClass ("válido")? – Jon

0

En primer lugar si crea dinámicamente n cuadros de texto, debe usar los métodos live() o delegate() de jQuery para informar sobre los nuevos elementos DOM añadidos.

En segundo lugar, su enfoque está bien, pero en lugar de una matriz puede configurar el parámetro de entradas con texto incorrecto y luego desactivar el botón si hay elementos con texto incorrecto. Creo que será más rápido que hacer un bucle en todos los cuadros de texto de todo.

4

Esto suena como un buen enfoque. Puede verificar elementos iguales en una matriz de javascript utilizando esta sencilla función de JavaScript. Puede pegar esto en una consola Firebug para verificar su funcionalidad.

// 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)); 
+0

+1 para javascript puro y la lógica. – alix

0

Me gustaría utilizar la validación para lograrlo.

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

Si se puede validar el lado del cliente grande - o bien utilizar una de las funciones de validación de jQuery existentes se muestran en el enlace de arriba, o escribir el suyo propio.

Si debe validar el lado del servidor a través de ajax, entonces puede construir esto en una rutina de validación personalizada.

Luego, en la llamada que muestra/oculta el botón, realice una llamada a $ ('# formid) .validate() - devuelve falso si falla alguna validación.

Cuestiones relacionadas