Vérifier si les entrées sont vides en utilisant jQuery

Question

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 ?

Answer 1

$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

Et vous n'avez pas nécessairement besoin .length ou 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 qu'il fonctionnera toujours sur un élément de type champ de texte, vous pouvez simplement utiliser this.value .

$('#apply-form input').blur(function()
{
      if( !this.value ) {
            $(this).parents('p').addClass('warning');
      }
});

Vous devez également prendre note que $('input:text') saisit plusieurs éléments, spécifie un contexte ou utilise la commande this si vous voulez juste une référence à un élément unique (à condition qu'il y ait un champ de texte dans les descendants/enfants du contexte).

Answer 2

Tout le monde a la bonne idée, mais j'aime être un peu plus explicite et découper les valeurs.

$('#apply-form input').blur(function() {
     if(!$.trim(this.value).length) { // zero-length string AFTER a trim
            $(this).parents('p').addClass('warning');
     }
});

Si vous n'utilisez pas .length , alors une entrée de '0' peut être signalée comme mauvaise, et une entrée de 5 espaces pourrait être marquée comme correcte sans le $.trim . Bonne chance.

Answer 3

Le faire sur le flou est trop limité. Cela suppose qu'il y a eu une mise au point sur le champ du formulaire, donc je préfère le faire sur submit, et faire une cartographie de l'entrée. Après des années de manipulation d'astuces fantaisistes de flou, de mise au point, etc., garder les choses plus simples donnera plus de convivialité là où cela compte.

$('#signupform').submit(function() {
    var errors = 0;
    $("#signupform :input").map(function(){
         if( !$(this).val() ) {
              $(this).parents('td').addClass('warning');
              errors++;
        } else if ($(this).val()) {
              $(this).parents('td').removeClass('warning');
        }   
    });
    if(errors > 0){
        $('#errorwarn').text("All fields are required");
        return false;
    }
    // do the ajax..    
});

Answer 4

if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}

Answer 5

Comment se fait-il que personne n'ait mentionné

$(this).filter('[value=]').addClass('warning');

me semble plus proche de Jquery