Question Vérifiez si les entrées sont vides en utilisant jQuery


J'ai un formulaire que j'aimerais que tous les champs soient remplis. Si un champ est cliqué puis non 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 indépendamment du champ rempli ou non.

Qu'est-ce que je fais mal?


432
2017-12-06 06:34


origine


Réponses:


$('#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 car une chaîne vide est de toute façon fausse, 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 champ de texte, vous pouvez simplement utiliser this.value.

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

Aussi, vous devriez prendre note que $('input:text') saisit plusieurs éléments, spécifie un contexte ou utilise le this mot-clé si vous voulez juste une référence à un élément solitaire (à condition qu'il y ait un champ de texte dans les descendants / enfants du contexte).


662
2017-12-06 06:37



Tout le monde a la bonne idée, mais j'aime être un peu plus explicite et 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, une entrée de "0" peut être signalée comme étant incorrecte, et une entrée de 5 espaces peut être marquée comme étant ok sans $ .trim. Bonne chance.


137
2017-12-06 06:51



Le faire sur le flou est trop limité. Il suppose qu'il y avait un accent sur le champ de formulaire, donc je préfère le faire sur soumettre, et mapper à travers l'entrée. Après des années de traitement de flou, de mise au point, d'astuces, etc., le fait de simplifier les choses donnera plus de convivialité là où ça 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..    
});

30
2017-07-21 19:21



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

18
2017-12-06 06:37



comment se fait-il que personne n'a mentionné

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

semble plus jquery-like à moi


8
2017-11-30 04:58



vous pouvez utiliser aussi ..

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

Si vous avez des doutes sur les espaces, alors essayez ..

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

7
2018-05-17 06:33



Penser à utiliser le plugin de validation jQuery au lieu. Il peut être légèrement excessif pour les champs obligatoires simples, mais il est suffisamment mature pour gérer les cas que vous n’avez même pas encore pensé (et aucun d’entre nous tant que nous n’en aurons jamais rencontré).

Vous pouvez marquer les champs requis avec une classe de "required", exécutez un $ ('form'). Validate () dans $ (document) .ready () et c'est tout ce qu'il faut.

Il est même hébergé sur le CDN de Microsoft, pour une livraison rapide: http://www.asp.net/ajaxlibrary/CDN.ashx


4
2017-12-06 06:49



L'événement keyup détectera si l'utilisateur a également désactivé la case (c'est-à-dire que backspace déclenche l'événement mais que backspace ne déclenche pas l'événement keypress dans IE)

    $("#inputname").keyup(function() {

if (!this.value) {
    alert('The box is empty');
}});

4
2017-09-29 17:24



le :empty pseudo-sélecteur est utilisé pour voir si un élément ne contient aucun enfant, vous devriez vérifier la valeur:

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

3
2017-12-06 06:38



Il y a une autre chose à laquelle vous voudrez peut-être penser. Actuellement, il ne peut ajouter la classe d'avertissement que si elle est vide.

comme ça:

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

3
2018-06-12 10:53