Vérifiez si les entrées sont vides à l'aide de jQuery


493

J'ai un formulaire dans lequel je voudrais que tous les champs soient remplis. Si un champ est cliqué puis non rempli, je voudrais 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 quel que soit le champ rempli ou non.

Qu'est-ce que je fais mal?


Réponses:


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

Et vous n'avez pas nécessairement besoin de .lengthvoir si c'est le cas, >0car une chaîne vide est évaluée à false de toute façon, mais si vous le souhaitez à des fins 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 l'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 lethis mot-clé si vous voulez simplement une référence à un élément isolé (à condition qu'il y ait un champ de texte dans les descendants / enfants du contexte).


2
Je pense que cela fonctionnera mieux si vous passez de: if (! $ (This) .val ()) à: if (! $ (This) .val () && $ (this) .val ()! = "" )
alfasin

2
$ (this) .val (). length <1
Tomas

3
YourObjNameSpace.yourJqueryInputElement.keyup (function (e) {if ($. Trim ($ (this) .val ())) {// la valeur rognée est la vérité} else {// la valeur rognée est falsey}}
Frankie Loscavio

Je valide si rarement la longueur des champs que j'ai complètement ignoré .val().lengthet que j'utilisais plutôt .length()l'élément lui-même.
Tass du

Pour plus de robustesse, j'ajouterais également .trim () à la fin
HQuser

155

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 mauvaise, et une entrée de 5 espaces pourrait être marquée comme correcte sans $ .trim. Bonne chance.


18
Absolument raison. Le découpage est nécessaire, en particulier lors de l'utilisation d'éditeurs WYSIWYG pointilleux (comme jWYSIWYG, par exemple).
Josh Smith

Puis-je suggérer de changer la valeur en val ---> if (! $. Trim (this.val) .length) {// chaîne de longueur nulle APRÈS un trim $ (this) .parents ('p'). AddClass (' Attention'); }
K. Kilian Lindberg

this.valserait undefinedlà. Il faudrait que ce soit le cas $(this).val()- mais il n'y a aucun avantage inter-navigateur à cela, donc je l'ai laissé de côté pour la brièveté / la vitesse.
Alex Sexton

33

Le faire sur flou est trop limité. Il suppose qu'il y avait un accent sur le champ du formulaire, donc je préfère le faire sur soumettre et mapper via l'entrée. Après des années à gérer des astuces de flou fantaisie, 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..    
});

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

TypeError non capturé: impossible de lire la «longueur» de la propriété non définie
Chuck D

@ChuckD J'obtenais la même erreur et j'ai compris que je $if (('input:text').val().length == 0) {if ($('input:text').val().length == 0) {
manquais

16

vous pouvez également utiliser ..

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

si vous avez des doutes sur les espaces, essayez ..

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

9

pourquoi personne n'a mentionné

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

me semble plus jquery-like


3
Cela ne fonctionne pas dans jQuery 1.9+ car ils ont changé le fonctionnement du filtre de sélection. Jsfiddle.net/6r3Rk
Wick

2
Je suggère $ (this) .not ('[value]'). AddClass ('warning') for 1.9 jsfiddle.net/znZ9e
Jamie Pate

1
Je crois que ne teste que si le champ a commencé avec un attribut de valeur. Il ne teste pas la valeur réelle du champ de formulaire comme vous en auriez besoin pour la validation. jsfiddle.net/T89bS ... le champ sans attribut value est giflé avec du saumon peu importe si vous tapez quelque chose dedans.
Wick

5

L'événement keyup détectera si l'utilisateur a également effacé la case (c'est-à-dire que le retour arrière déclenche l'événement mais que le retour arrière ne déclenche pas l'événement de pression de touche dans IE)

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

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

4

Envisagez plutôt d' utiliser le plug-in de validation jQuery . Il est peut-être un peu exagéré pour les champs obligatoires simples, mais il est suffisamment mature pour gérer les cas de bord auxquels vous n'avez même pas encore pensé (et aucun de nous ne le ferait avant de les rencontrer).

Vous pouvez étiqueter les champs obligatoires avec une classe de "requis", exécuter un $ ('formulaire'). Validate () dans $ (document) .ready () et c'est tout ce qu'il faut.

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


3

Le :emptypseudo-sélecteur 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');
     }
});

3

Il y a une autre chose à laquelle vous voudrez peut-être penser, actuellement, il ne peut ajouter la classe d'avertissement que s'il est vide, que diriez-vous de supprimer à nouveau la classe 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

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


2

Voici un exemple d'utilisation des touches pour l'entrée sélectionnée. Il utilise également une garniture pour s'assurer qu'une séquence de caractères blancs ne déclenche pas une réponse véridique. Ceci est un exemple qui peut être utilisé pour commencer une zone 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
$(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


1

Vous pouvez essayer quelque chose comme ceci:

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

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


Bonne solution, mais sachez que cela ne fonctionne que si l'entrée n'est pas vide lors de l'appel de fonction et également uniquement si la valeur est enregistrée dans l'attribut "valeur" de l'entrée.
Fabian von Ellerts

0
<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>// :)

Vous devrez probablement également couper l'espace blanc.
Raptor le

0

Avec HTML 5, nous pouvons utiliser une nouvelle fonctionnalité «requise», il suffit de l'ajouter à la balise que vous souhaitez être requise comme:

<input type='text' required>


2
Et tous les navigateurs ne le supportent pas ... Vous devez ajouter un chèque js ET un chèque côté
serveur

Titre de la question, "Vérifier si les entrées sont vides à l'aide de jQuery"
JoshYates1980

0

Grande collection de réponses, j'aimerais ajouter que vous pouvez également le faire en utilisant le :placeholder-shownsélecteur CSS. Un peu plus propre pour utiliser IMO, surtout si vous utilisez déjà jQ et 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 :validet :invalidsi vous avez des entrées requises. Vous pouvez utiliser ces sélecteurs si vous utilisez l'attribut requis sur une entrée.


0

Une solution propre uniquement CSS, ce serait:

input[type="radio"]:read-only {
        pointer-events: none;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.