web-dev-qa-db-fra.com

Vérifier si les entrées sont vides avec jQuery

J'ai un formulaire dans lequel je souhaiterais que tous les champs soient remplis. Si un champ est cliqué puis non rempli, j'aimerais afficher un arrière-plan 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 renseigné ou non.

Qu'est-ce que je fais mal?

jqueryvalidation
452
Keith Donegan
$('#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, car 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 textfield, vous pouvez simplement utiliser this.value.

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

Notez également que $('input:text') saisit plusieurs éléments, spécifiez un contexte ou utilisez le mot clé this si vous souhaitez simplement faire référence à un élément isolé (à condition qu'un champ de texte se trouve dans les descendants/enfants du contexte).

693
meder omuraliev

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

145
Alex Sexton

Le faire sur le flou est trop limité. Cela suppose que le champ du formulaire était ciblé. Je préfère donc le faire lors de la soumission et la mapper à l'aide de l'entrée. Après des années à gérer les astuces de flou de fantaisie, de mise au point, etc., garder les choses simples simplifie la 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
drewdeal
if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}
18
Graviton

vous pouvez aussi utiliser ..

$('#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');
    }
});
12
Zigri2612

comment se fait-il que personne ne soit mentionné

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

me semble plus jquery

8
Jamie Pate

L’événement keyup détectera également si l’utilisateur a vidé la case correspondante (c’est-à-dire que backspace déclenche l’événement mais que backspace ne déclenche pas l’événement de pression dans IE)

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

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

Pensez à utiliser le plugin de validation jQuery à la place. C'est peut-être un peu excessif pour les champs obligatoires simples, mais il est suffisamment mûr pour qu'il puisse traiter les cas Edge auxquels vous n'avez même pas encore pensé (et aucun d'entre nous ne les aurait rencontrés avant de les avoir rencontrés).

Vous pouvez baliser les champs obligatoires avec une classe de "requis", exécuter un $ ("formulaire"). Validate () dans $ (document) .ready () et c'est tout ce dont vous avez besoin.

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

4
Dave Ward

Le pseudo-sélecteur :empty permet de voir si un élément ne contient pas d'enfants, vous devriez vérifier la valeur

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

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. Pourquoi ne pas supprimer la classe à nouveau lorsque le formulaire n'est plus 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
xorinzor

function checkForm() {
  return $('input[type=text]').filter(function () {
    return $(this).val().length === 0;
  }).length;
}

3
Vanilla
$(function() {
  var fields = $('#search_form').serializeArray();
  is_blank = true;
  for (var i = 0; i < fields.length; i++) {
    // excluded fields
    if ((fields[i].name != "locale") && (fields[i].name != "utf8")) {
      if (fields[i].value) {
        is_blank = false;
      }
    }
  }
  if (is_blank) {
    $('#filters-button').append(': OFF');
  }
  else {
    $('#filters-button').append(': ON');
  }
});

Vérifiez si tous les champs sont vides et ajoutez ON ou OFF sur Filter_button

2
Mauro

Voici un exemple d'utilisation de keyup pour l'entrée sélectionnée. Il utilise également un ajustement pour s’assurer qu’une séquence composée uniquement de caractères d’espace ne déclenche pas une réponse véridique. Ceci est un exemple qui peut être utilisé pour commencer un champ de recherche ou quelque chose lié à ce type de fonctionnalité.

YourObjNameSpace.yourJqueryInputElement.keyup(function (e){
   if($.trim($(this).val())){
       // trimmed value is truthy meaning real characters are entered
    }else{
       // trimmed value is falsey meaning empty input excluding just whitespace characters
    }
}
2
Frankie Loscavio

Vous pouvez essayer quelque chose comme ça:

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

Il appliquera l'événement .blur() uniquement aux entrées avec des valeurs vides.

1
Konstantin Kalbazov

Grande collection de réponses, voudrait ajouter que vous pouvez également le faire en utilisant le sélecteur CSS :placeholder-shown. Un peu plus propre pour utiliser IMO, surtout si vous utilisez déjà jQ et que vous avez des espaces réservés sur vos entrées.

if ($('input#cust-descrip').is(':placeholder-shown')) {
  console.log('Empty');
}

$('input#cust-descrip').on('blur', '', function(ev) {
  if (!$('input#cust-descrip').is(':placeholder-shown')) {
    console.log('Has Text!');
  }
  else {
    console.log('Empty!');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">

Vous pouvez également utiliser les sélecteurs :valid et :invalid si vous avez des entrées requises. Vous pouvez utiliser ces sélecteurs si vous utilisez l'attribut requis sur une entrée.

0
Mark Carpenter Jr

Avec HTML 5, nous pouvons utiliser une nouvelle fonctionnalité "obligatoire", simplement l’ajouter à la balise que vous souhaitez utiliser comme:

<input type='text' required>

0
Atlantiz
<script type="text/javascript">
$('input:text, input:password, textarea').blur(function()
    {
          var check = $(this).val();
          if(check == '')
          {
                $(this).parent().addClass('ym-error');
          }
          else
          {
                $(this).parent().removeClass('ym-error');  
          }
    });
 </script>// :)
0
Maher