J'ai un formulaire dont je voudrais que tous les champs soient remplis. Si l'on clique sur un champ et qu'il n'est pas rempli, j'aimerais afficher un fond rouge.
Voici mon code :
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
Il applique la classe d'avertissement, que le champ soit rempli ou non.
Qu'est-ce que je fais de mal ?
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});
Et vous n'avez pas nécessairement besoin de .length
ou de voir si c'est >0
puisqu'une chaîne vide est évaluée à false de toute façon mais si vous le souhaitez, pour des raisons de lisibilité :
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});
Si vous êtes sûr que l'opération se fera toujours sur un élément textfield, vous pouvez simplement utiliser this.value
.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
Vous devez également noter que $('input:text' ;)
saisit plusieurs éléments, spécifiez un contexte ou utilisez le mot-clé this
si vous voulez juste une référence à un seul élément (à condition qu'il y ait un champ de texte dans les descendants/enfants du contexte).
Le pseudo-sélecteur :empty
est utilisé pour voir si un élément ne contient aucun enfant, vous devez vérifier la valeur :
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});