jQuery - Encuentre cualquier entrada con una clase dada que no tenga ningún valor

Question

Tengo un script de validación (muy) básico. Básicamente, quiero verificar si hay entradas con la clase requerida para ver si los valores son a) en blanco o b) 0 y, en caso afirmativo, devuelva falso en mi formulario. Este código no parece return false:

function myValidation(){ 
    if($(".required").val() == "" || $(".required").val() == 0){ 
    $(this).css({ backgroundColor:'orange' }) ; 
    return false; 
    } 
} 

Al añadir esta función a mi manejador onSubmit de mi forma no devuelve ningún resultado. Cualquier luz arrojada sobre este asunto será apreciada.

Básicamente estoy después de una función que recorre todas las entradas con la clase .required, y si CUALQUIER tiene valores en blanco o 0, devuelve falso en mi envío y cambia el color de fondo de todas las entradas mal conducidas a naranja.

Answer 1

Su código actualmente obtiene el .val() para la primera .required, desde the .val() documentation:

obtener el valor actual del primer elemento en el conjunto de los elementos coincidentes.

Es necesario filtrar a través de cada uno en su lugar de forma individual, como esto:

function myValidation(){ 
    var allGood = true; 
    $(".required").each(function() { 
    var val = $(this).val(); 
    if(val == "" || val == 0) { 
     $(this).css({ backgroundColor:'orange' }); 
     allGood = false; 
    } 
    }); 
    return allGood; 
} 

O un poco versión más compacta:

function myValidation(){ 
    return $(".required").filter(function() { 
    var val = $(this).val(); 
    return val == "" || val == 0; 
    }).css({ backgroundColor:'orange' }).length === 0; 
} 

Answer 2

probar este selector de jQuery:

$ ('.required [value = ""], .required [value = 0]')

Answer 3

También puede hacerlo mediante la definición de su propia aduana jQuery selector:

$(document).ready(function(){ 

    $.extend($.expr[':'],{ 
     textboxEmpty: function(el){ 
      return ($(el).val() === ""); 
     } 
    }); 
}); 

y luego acceder a ellos de esta manera:

alert($('input.required:textboxEmpty').length); //alerts the number of input boxes in your selection 

por lo que podría poner un .each en ellos:

$('input.required:textboxEmpty').each(function(){ 
    //do stuff 
});