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 quel que soit le champ renseigné 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 forcément besoin de .length ou voyez 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 que cela 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'); } }); 

Vous devriez également noter que $('input:text') saisit plusieurs éléments, spécifie un contexte ou utilise le mot this clé this si vous voulez simplement une référence à un élément seul (à 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(!$.sortingm(this.value).length) { // zero-length ssortingng AFTER a sortingm $(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 $ .sortingm. Bonne chance.

Le faire sur le flou est trop limité. Cela suppose que l’on se soit concentré sur le champ de formulaire, alors je préfère le faire sur soumettre et mapper sur l’entrée. Après des années passées à gérer des astuces de flou, de concentration, etc., garder les choses plus simples vous offrira plus de facilité d’utilisation 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.. }); 
 if ($('input:text').val().length == 0) { $(this).parents('p').addClass('warning'); } 

comment se fait-il que personne n’ait mentionné

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

me semble plus jquery

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().sortingm() == '' ) { $(this).parents('p').addClass('warning'); } }); 

Envisagez d’utiliser le plug-in de validation jQuery à la place. 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 jusqu’à ce que nous les renconsortingons).

Vous pouvez marquer les champs requirejs 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 Microsoft, pour une livraison rapide: http://www.asp.net/ajaxlibrary/CDN.ashx

L’événement keyup détectera si l’utilisateur a également désactivé la case (c.-à-d. 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'); }}); 

Le pseudo-sélecteur :empty permet de 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 ssortingng $(this).parents('p').addClass('warning'); } }); 

Il y a une autre chose à laquelle vous voudrez peut-être penser. Actuellement, il ne peut append la classe d’avertissement que si elle est vide, que diriez-vous de la supprimer à 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'); } }); 
 function checkForm() { return $('input[type=text]').filter(function () { return $(this).val().length === 0; }).length; } 

Voici un exemple d’utilisation du keyup pour l’entrée sélectionnée. Il utilise également un découpage 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 lancer un champ de recherche ou quelque chose lié à ce type de fonctionnalité.

 YourObjNameSpace.yourJqueryInputElement.keyup(function (e){ if($.sortingm($(this).val())){ // sortingmmed value is truthy meaning real characters are entered }else{ // sortingmmed 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érifier si tous les champs sont vides et append ON ou OFF sur Filter_button

Vous pouvez essayer quelque chose comme ça:

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

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

 // :) 

Avec HTML 5, nous pouvons utiliser une nouvelle fonctionnalité “requirejse”, il suffit de l’append à la balise dont vous souhaitez avoir besoin, par exemple: