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

Question

J'ai un formulaire que je voudrais remplir tous les champs. Si un champ est cliqué et n'est pas 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 étant rempli ou non.

Qu'est-ce que je fais mal?

Answer 1

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

Et vous ne devez pas nécessairement .length ou voir si elle est >0 depuis une chaîne vide est fausse de toute façon, mais si vous souhaitez pour des raisons de lisibilité:

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

Si vous êtes Bien sûr, il fonctionnera toujours sur un élément de champ de texte alors vous pouvez simplement utiliser this.value.

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

Aussi, vous devez prendre note que $('input:text') saisit plusieurs éléments, spécifiez un contexte ou utiliser le mot-clé this si vous voulez juste une référence à un élément seul (à condition qu'il y a un TextField descendants/enfants du contexte).

Answer 2

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

Answer 3

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

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

Answer 4

Pensez à utiliser the jQuery validation plugin à la place. Il est peut-être un peu exagéré pour les champs obligatoires, mais il est suffisamment mature pour gérer les bords que vous n'avez même pas encore imaginés (et aucun d'entre nous ne le devinera).

Vous pouvez marquer 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 même hébergé sur la livraison Microsoft CDN aussi, pour rapide: http://www.asp.net/ajaxlibrary/CDN.ashx

Answer 5

Tout le monde a la bonne idée, mais je veux ê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 obtenir marqué comme mauvais, et une entrée de 5 places pourrait obtenir marqué comme correct sans .trim $. Bonne chance.

Answer 6

Vous pouvez essayer quelque chose comme ceci:

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

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

Answer 7

Il y a une autre chose que vous pourriez vouloir penser, Actuellement il peut seulement ajouter la classe d'avertissement si elle est vide, comment enlever la classe encore quand le formulaire n'est plus vide.

comme ceci:

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

Answer 8

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 facilité d'utilisation 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 9

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

Answer 10

comment se fait personne n'a mentionné

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

semble plus Avec HTML 5, nous pouvons utiliser une nouvelle fonctionnalité jquery semblable me

Answer 11

"nécessaire" le juste ajouter à la tag que vous souhaitez utiliser:

<input type='text' required>

Answer 12

Voici un exemple d'utilisation du code pour l'entrée sélectionnée. Il utilise également un ajustement pour s'assurer qu'une séquence de caractères d'espace blanc ne déclenche pas une réponse véridique. Ceci est un exemple qui peut être utilisé pour commencer une boîte 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 
    } 
} 

Answer 13

$(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 append ON ou OFF sur Filter_button

Answer 14

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

Answer 15

vous pouvez également utiliser ..

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

si vous avez le doute sur les espaces, essayez ..

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

Answer 16

L'événement keyup détecte si l'utilisateur a autorisé la boîte et (à savoir backspace soulève l'événement mais le retour arrière ne déclenche pas l'événement keypress dans IE)

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

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