web-dev-qa-db-fra.com

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

Comment identifier les zones de texte vides à l'aide de jQuery? Je voudrais le faire en utilisant des sélecteurs si cela est possible. De plus, je dois sélectionner id. 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 dans la zone de texte "txt2" par l'utilisateur. Le deuxième exemple identifie qu'il y a une zone de texte vide, mais si vous la remplissez, elle la considère toujours comme vide. Pourquoi est-ce?

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 indique toujours que la zone de texte "txt2" est 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>
jquerycss-selectors
100
Cros

Autrement

$('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émo 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);
  });

});
191
Russ Cam

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

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

Et puis y accéder comme ceci:

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
26
James Wiseman
$(":text[value='']").doStuff();

?

Au fait, votre appel de:

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

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

$('#cmdSubmit')...
19
cletus

Comme mentionné dans le message classé le plus haut, ce qui suit fonctionne avec le moteur Sizzle.

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

Dans les commentaires, il a été noté que la suppression du :text Une partie du sélecteur fait échouer le 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é du navigateur, lorsque cela est possible. Quand :text est ajouté au sélecteur, il devient un sélecteur CSS non standard et doit donc être traité par Sizzle lui-même. Cela signifie que Sizzle vérifie la valeur actuelle de INPUT au lieu de l'attribut "value" spécifié dans le code HTML source.

C'est donc un moyen astucieux de vérifier les champs de texte vides, mais je pense que cela repose sur un comportement spécifique du moteur Sizzle (utiliser la valeur actuelle de INPUT au lieu de l'attribut défini dans le code source). Bien que Sizzle puisse renvoyer des éléments correspondant à ce sélecteur, document.querySelectorAll retournera uniquement les éléments qui ont value="" dans le code HTML. Caveat emptor.

12
thirdender

En me basant sur la réponse de @James Wiseman, j'utilise ceci:

$.extend($.expr[':'],{
    blank: function(el){
        return $(el).val().match(/^\s*$/);
    }
});

Cela capturera les entrées qui ne contiennent que des espaces, en plus de celles qui sont "vraiment" vides.

Exemple: http://jsfiddle.net/e9btdbyn/

4
Gruffy

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

Après essayant beaucoup de version je trouvais cela le plus logique.

Notez que text est sensible à la casse.

4
user669677

Il y a beaucoup de réponses ici suggérant quelque chose comme [value=""] mais je ne pense pas que cela fonctionne réellement. . . ou du moins, l'utilisation n'est pas cohérente. J'essaie de faire quelque chose de similaire, en sélectionnant toutes les entrées dont l'identifiant commence par une certaine chaîne et pour laquelle aucune valeur n'a été entrée. J'ai essayé ceci:

$("input[id^='something'][value='']")

mais ça ne marche pas. Ni les inverser. Voir ceci violon . Les seules façons que j'ai trouvées de sélectionner correctement toutes les entrées dont l'identifiant commence par une chaîne et sans valeur entrée sont les suivantes:

$("input[id^='something']").not("[value!='']")

et

$("input[id^='something']:not([value!=''])")

mais évidemment, les doubles négatifs rendent cela très déroutant. Probablement, la première réponse de Russ Cam (avec une fonction de filtrage) est la méthode la plus claire.

3
tandrewnichols

Je recommanderais:

$('input:text:not([value])')
3
TM.

Cela sélectionnera les entrées de texte vides avec un identifiant commençant par "txt":

$(':text[value=""][id^=txt]')
1
Cros