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

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?

$('#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).

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.

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..    
});

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

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');
    }
});

pourquoi personne n'a mentionné

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

me semble plus jquery-like

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');
}});

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

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');
     }
});

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');
    }
});

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
    }
}

$(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

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.

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

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>

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.

Une solution propre uniquement CSS, ce serait:

input[type="radio"]:read-only {
        pointer-events: none;
}