jQuery - Trouver une entrée avec une classe donnée qui n'a aucune valeur

Question

J'ai un script de validation (très) basique. Je veux fondamentalement vérifier toutes les entrées avec la classe .required pour voir si les valeurs sont a) vide ou b) 0 et si oui, retourner false sur mon formulaire de soumission. Ce code ne semble pas retourner faux:

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

cette fonction à Adjonction mon gestionnaire onSubmit de ma forme ne renvoie aucun résultat. Tout éclairage sur ce sujet sera apprécié.

Je suis fondamentalement après une fonction qui itère à travers toutes les entrées avec la classe .required, et si ANY ont des valeurs vides ou 0, retourne false sur mon submit et change la couleur de fond de toutes les entrées mal comportées en orange.

Answer 1

Votre code obtient actuellement le .val() pour la première .required, de the .val() documentation:

la valeur courante du premier élément dans l'ensemble des éléments correspondants.

Vous devez filtrer à travers chacun individuellement au lieu, comme ceci:

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

Ou une version un peu plus compact:

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

Answer 2

Essayez ce sélecteur jQuery:

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

Answer 3

Vous pouvez aussi le faire en définissant votre propre sélecteur jQuery personnalisé:

$(document).ready(function(){ 

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

et d'y accéder ensuite comme ceci:

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

que vous pourriez mettre un .each sur eux:

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