Et la condition pour jQuery ne fonctionne pas - jquery, formulaires, validation

Je développe un formulaire multipage. J'essaye d'écrire un if état:

$(".next").click(function() {
if ($("input[required]:visible").each().val() == false) {
alert("Not all required fields are filled");
} else {
$(".next").show();
$("form.idealforms").idealforms("nextStep");
}
});

jsfiddle

Cela fonctionne bien avec input type=text. Ensuite, j'essaie d'ajouter la même condition pour <textarea>:

$(".next").click(function() {
if ($("input[required]:visible").val() == false && $("textarea[required]:visible").val() == false) {
alert("Not all required fields are filled");
} else {
$(".next").show();
$("form.idealforms").idealforms("nextStep");
}
});

jsFiddle pour cela

Maintenant, il nécessite une zone de texte OU une entrée à remplir, mais devrait fonctionner avec les deux, n'est-ce pas? Que fais-je de mal?

Réponses:

Dans votre jsFiddle, vous avez du contenu dans le textarea (espaces vides). Je pense que votre meilleur pari serait de couper les valeurs avant de les vérifier, puis de les comparer à la chaîne vide "".

if ($("input[required]:visible").val().trim() == "" || $("textarea[required]:visible").val().trim() == "") {
...
}

J'ai aussi changé votre and à un or, c'est ce dont je pense que vous avez besoin.

jQuery .val() vous donne le contenu de Textbox ou Textarea, pas booléen. Vous pouvez donc utiliser jQuery .trim().length. Il supprimera d'abord l'espace blanc, puis il comptera la longueur de Textbox ou Textarea. Cela garantit que même l'espace est là, cela fonctionnera. Travail du violon

$(".next").click(function(){

if($("input[required]:visible").val().trim().length==0 || $("textarea[required]:visible").val().trim().length==0) {
alert("Not all required fields are filled");
}
else{
alert("All required fields are filled");
}
});

Vous devriez trim la valeur avant de comparer.

Vous trouverez ci-dessous le code pour gérer les entrées requises (pour la case à cocher, le bouton radio nécessite une manipulation différente).

$(".next").click(function() {
var valid = true;
$.each($("[required]:visible"), function() {
if (!$.trim($(this).val())) {
valid = false;
return false;
}
});

if (!valid) {
alert("Not all required fields are filled");
} else {
alert("All required fields are filled");
}
});