Sélection d'une entrée de texte vide à l'aide de jQuery

Question

Sélection d'une entrée de texte vide à l'aide de jQuery

Demandé el 19 de Août, 2009: Quand la question a-t-elle été
51455 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Comment identifier les zones de texte vides à l'aide de jQuery ? J'aimerais le faire en utilisant des sélecteurs si cela est possible. De plus, je dois sélectionner sur l'id puisque dans le code réel où je veux utiliser ceci, je ne veux pas sélectionner toutes les entrées de texte.

Dans les deux exemples de code suivants, le premier affiche avec précision la valeur saisie par l'utilisateur dans la zone de texte "txt2". Le deuxième exemple identifie qu'il y a une zone de texte vide, mais si vous la remplissez, il la considère toujours comme vide. Comment cela se fait-il ?

Cela peut-il être fait en utilisant uniquement des sélecteurs ?

Ce code rapporte la valeur dans la zone de texte "txt2" :

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    alert($('[id=txt2]').val());
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

Ce code rapporte toujours la boîte de texte "txt2" comme étant vide :

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    if($('[id^=txt][value=""]').length > 0) {
                        if (!confirm("Are you sure you want to submit empty fields?")) {
                            if (event.preventDefault) {
                                event.preventDefault();
                            } else {
                                event.returnValue = false;
                            }
                        }
                    }
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

Demandé el 19 de Août, 2009 par Cros

6 votes

Quelqu'un sait-il si '[value=]' ignore l'entrée de l'utilisateur et vérifie seulement ce qui est dans la source ?

Commenté el 19 de Août, 2009 par Cros

0 votes

Ai-je raison de penser que le filtre :empty est fait pour ce travail ? $('input[type=text]:empty').doStuff() ;

Commenté el 21 de Août, 2009 par Antony Carthy

1 votes

Lire la documentation - docs.jquery.com/Selectors/empty . Empty est pour les éléments qui n'ont pas d'enfants, PAS de valeur.

Commenté el 21 de Août, 2009 par Russ Cam

Answer 1

5 Réponses

Answer 2

206voto

Russ Cam Points 58168

Un autre moyen

$('input:text').filter(function() { return $(this).val() == ""; });

ou

$('input:text').filter(function() { return this.value == ""; });

ou

// WARNING: if input element does not have the "value" attribute or this attribute was removed from DOM then such selector WILL NOT WORK! 
// For example input with type="file" and file does not selected.
// It's prefer to use "filter()" method.
// Thanks to @AaronLS
$('input:text[value=""]');

Démonstration de travail

code de la démo

jQuery

 $(function() {

  $('#button').click(function() {

    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
    var string = "The blank textbox ids are - \n";

    emptyTextBoxes.each(function() {
      string += "\n" + this.id;
    });
    alert(string);
  });

});

Répondu el 19 de Août, 2009 par Russ Cam (58168 Points )

0 votes

Pour moi : if($('[id^=txt]').filter(function() { return $(this).val() == "" ; }).length > 0) { alert('WARNING') ; }

Commenté el 19 de Août, 2009 par Cros

0 votes

Qu'est-ce qui différencie votre dernier exemple du second ? J'ai besoin de sélectionner sur l'id, puisque dans le code réel, je ne regarderai pas toutes les entrées de texte. Mon deuxième exemple ne fonctionne pas avec les entrées utilisateur, mais le vôtre oui.

Commenté el 19 de Août, 2009 par Cros

0 votes

Pourquoi $('input:text[value=""]') ; fonctionne-t-il, alors que $('[id^=txt][value=""]') ; ne fonctionne pas ?

Commenté el 19 de Août, 2009 par Cros

Afficher 7 autres commentaires

Answer 3

26voto

James Wiseman Points 18347

Vous pouvez également le faire en définissant votre propre sélecteur :

$.extend($.expr[':'],{
    textboxEmpty: function(el){
        return $(el).val() === "";
    }
});

Et puis accédez-y comme ceci :

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection

Répondu el 19 de Août, 2009 par James Wiseman (18347 Points )

0 votes

Je suis un peu préoccupé par les performances. Mais c'est probablement la réponse la plus simple !

Commenté el 3 de Août, 2017 par aliqandil

Answer 4

20voto

cletus Points 276888

$(":text[value='']").doStuff();

?

Au fait, votre appel de :

$('input[id=cmdSubmit]')...

peut être grandement simplifié et accéléré :

$('#cmdSubmit')...

Répondu el 19 de Août, 2009 par cletus (276888 Points )

0 votes

Je suppose qu'il manque un crochet de fermeture. Une source commune de jQuery ne fonctionnant pas comme prévu, difficile à repérer :-/

Commenté el 19 de Août, 2009 par OregonGhost

0 votes

Votre premier exemple est en fait ce que fait mon exemple qui ne fonctionne pas. Je veux savoir si l'utilisateur a ajouté du texte dans le champ de saisie, votre exemple ne le fait pas.

Commenté el 19 de Août, 2009 par Cros

0 votes

J'ai été hâtif, votre exemple semble fonctionner, mais il ne sélectionne pas sur l'id, ce que je dois faire.

Commenté el 19 de Août, 2009 par Cros

Afficher 3 autres commentaires

Answer 5

12voto

thirdender Points 1813

Comme mentionné dans l'article le mieux classé, ce qui suit fonctionne avec le moteur Sizzle.

$('input:text[value=""]');

Dans les commentaires, il a été noté que la suppression du :text du sélecteur entraîne l'échec du sélecteur. Je pense que ce qui se passe, c'est que Sizzle s'appuie en fait sur le moteur de sélection intégré au navigateur lorsque cela est possible. Lorsque :text est ajouté au sélecteur, il devient un sélecteur CSS non standard et doit donc être géré par Sizzle lui-même. Cela signifie que Sizzle vérifie la valeur actuelle de l'INPUT, au lieu de l'attribut "value" spécifié dans le HTML source.

Il s'agit donc d'un moyen astucieux de vérifier les champs de texte vides, mais je pense qu'il repose sur un comportement spécifique au moteur Sizzle (celui d'utiliser la valeur actuelle de l'INPUT au lieu de l'attribut défini dans le code source). Alors que Sizzle pourrait retourner les éléments qui correspondent à ce sélecteur, document.querySelectorAll ne retournera que les éléments qui ont value="" dans le HTML. Caveat emptor.

Répondu el 2 de Décembre, 2011 par thirdender (1813 Points )

Answer 6

6voto

2astalavista Points 7092

`$("input[type=text][value=]")`

Après essayer de nombreuses versions J'ai trouvé que c'était le plus logique.

Notez que text est sensible à la casse.

Répondu el 29 de Juin, 2012 par 2astalavista (7092 Points )

Sélection d'une entrée de texte vide à l'aide de jQuery

Réponses

`$("input[type=text][value=]")`

Questions en vedette

Top Tags

Prograide.com

Powered by:

Sélection d'une entrée de texte vide à l'aide de jQuery

Réponses

$("input[type=text][value=]")

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by:

`$("input[type=text][value=]")`