La sélection de vide de saisie de texte à l'aide de jQuery

Comment puis-je identifier les zones de texte vides à l'aide de jQuery? Je voudrais le faire en utilisant les sélecteurs si il est possible de tout. Aussi, je dois sélectionner l'id depuis dans le code réel où je veux l'utiliser je ne veux pas sélectionner tout le texte d'entrées.

Dans mes deux exemples de code suivants la première affiche avec précision la valeur saisie dans la zone de texte "txt2" par l'utilisateur. Le deuxième exemple indique qu'il existe une zone de texte vide, mais si vous le remplissez en elle la considère encore comme vide. Pourquoi est-ce?

Cela peut-il être réalisés en utilisant les sélecteurs?

Ce code les rapports de 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 signale toujours textbox "txt2" vides:

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

Personne ne sait si " [value=]' ignore la saisie de l'utilisateur et vérifie seulement ce qui est dans la source?
Suis-je en droit que l' :filtre vide est fait pour ce travail? $('input[type=text]:vide').doStuff();
lire les docs - docs.jquery.com/Selectors/empty. Vide est pour les éléments qui n'ont pas d'enfants, PAS de valeur
ce serait formidable si

InformationsquelleAutor Cros | 2009-08-19

css-selectors jquery

190

Une autre façon
```
$('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=""]');
```
Travail Démo

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

});
```
- Pour moi: if($('[id^=txt]').filter(function() { return $(this).val() == ""; }).length > 0) { alert ("AVERTISSEMENT");}
- Ce qui sépare votre dernier exemple de mon second? J'ai besoin de sélectionner l'id, puisque dans le code réel je ne vais pas regarder toutes les saisies de texte. Mon deuxième exemple ne fonctionne pas avec la saisie de l'utilisateur, mais le vôtre ne.
- Pourquoi ne $('input:text[value=""]'); travail, lorsque $('[id^=txt][value=""]'); est-ce pas?
- Le sélecteur de travail semble être de faire avec :texte dans le sélecteur - si vous ouvrez le travail de démonstration et d'ajouter /modifier l'URL, vous pouvez jouer avec le sélecteur utilisé. Si vous prenez le texte, le sélecteur ne fonctionne plus correctement, même avec $('input[value=""]'). Probablement un bug dans le Grésillement sélecteur de moteur, mais je n'ai pas le temps d'étudier. En passant, je vous recommande d'utiliser une balise d'élément dans le sélecteur, sinon, chaque élément sera vérifiée pour voir si il y a un match pour les valeurs d'attribut.
- Merci! C'est comme vous le dites, et j'ai ajouté ma propre réponse à cette information. Bon conseil sur les balises d'élément ainsi.
- Pourquoi êtes-vous les gars ce qui rend la vie si compliquée? Il n'est pas besoin pour cela de beaucoup de code.
- montrer une meilleure façon et je vais upvote il
- Belle réponse! Mais vous pourriez aussi vous voulez vous assurer que l'élément d'entrée de la valeur est littéralement null(vide des espaces!). Assurez-vous de couper les espaces vides dans ce cas. Quelque chose comme ceci $('input:text').filter(function() { return $(this).val().trim() == ""; });
- Notez que si l'élément est présent mais n'a pas de valeur d'attribut, puis [value=""] sélecteur ne fonctionne pas car il ne trouve pas la valeur de l'attribut. Cependant, l' .filtre de la technique de travail dans ce scénario.
- Pouvez-vous écrire es6 avec une flèche fonction ici?
- si votre cible les navigateurs prennent en charge ECMAScript 6, oui
InformationsquelleAutor Russ Cam
26

Vous pouvez aussi le faire en définissant votre propre sélecteur:
```
$.extend($.expr[':'],{
    textboxEmpty: function(el){
        return $(el).val() === "";
    }
});
```
Puis d'y accéder comme ceci:
```
alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
```
- Je suis un peu préoccupé par la performance. Mais sans doute la réponse la plus facile!
InformationsquelleAutor James Wiseman
19
```
$(":text[value='']").doStuff();
```
?

Par ailleurs, votre appel de:
```
$('input[id=cmdSubmit]')...
```
peut être grandement simplifié et accéléré avec:
```
$('#cmdSubmit')...
```
- Je pense qu'il y a un crochet de fermeture manquants. Une source commune de jQuery ne fonctionne pas comme prévu, difficile à repérer :-/
- Votre premier exemple est, fondamentalement, ce que je n'avais pas de travail exemple ne. Je veux savoir si l'utilisateur ajout de texte dans le champ de saisie, votre exemple ne pas faire cela.
- J'ai été vite en besogne, votre exemple semble fonctionner, mais il ne sélectionnez pas l'id, qui je dois le faire.
InformationsquelleAutor cletus
12

Comme mentionné dans le haut du classement de poste, les ouvrages suivants, avec le Grésillement du moteur.
```
$('input:text[value=""]');
```
Dans les commentaires, il a été noté que la suppression de la :text partie de la sélection provoque le sélecteur à l'échec. Je crois que ce qui se passe est que le Grésillement réellement s'appuie sur le navigateur intégré dans le sélecteur moteur lorsque cela est possible. Lorsque :text est ajouté pour le sélecteur, il devient un non-standard sélecteur CSS et ce qui doit être traitée par le Grésillement lui-même. Cela signifie que le Grésillement vérifie la valeur actuelle de l'ENTRÉE, à la place de la "valeur" de l'attribut spécifié dans la source HTML.

Donc, c'est une manière intelligente de vérifier pour vider les champs de texte, mais je pense qu'il s'appuie sur un comportement spécifique pour le Grésillement du moteur (en utilisant la valeur actuelle de l'ENTRÉE à la place de l'attribut défini dans le code source). Alors que le Grésillement peut retourner les éléments qui correspondent à ce sélecteur, document.querySelectorAll, vous obtiendrez uniquement les éléments qui ont value="" dans le code HTML. Caveat emptor.

InformationsquelleAutor thirdender
4

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

Après essayer un tas de version j'ai trouvé, c'est la plus logique.

Noter que text est sensible à la casse.

InformationsquelleAutor
4

Bâtiment sur @James Wiseman réponse, je suis en utilisant ceci:
```
$.extend($.expr[':'],{
    blank: function(el){
        return $(el).val().match(/^\s*$/);
    }
});
```
Cela va attraper les entrées qui contiennent uniquement des espaces en plus de ceux qui sont "vraiment" vide.

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

InformationsquelleAutor Gruffy
3

Je le recommande:
```
$('input:text:not([value])')
```
- Cela ne fonctionne pas, parce que [l'attribut] recherche la présence d'un attribut, pas de savoir si elle a une valeur ou non. <input value=""> sera toujours correspondre.
- Cela a été utile pour moi lors de l'utilisation de Laravel pour générer des champs de formulaire (par exemple,{{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}) parce que Laravel ne pas ajouter une 'valeur' de l'attribut s'il est vide. J'ai donc utilisé: $('input:text:not([value]):visible:enabled:first'); pour trouver le premier visible vide activé champ de saisie de texte.
InformationsquelleAutor TM.
3

Il y a beaucoup de réponses ici, ce qui suggère quelque chose comme [value=""] mais je ne pense pas que qui fonctionne réellement . . . ou au moins, l'utilisation n'est pas conforme. Je suis en train de faire quelque chose de similaire, sélectionner toutes les entrées avec des id à partir d'une certaine chaîne de caractères qui aussi n'ont pas de valeur entrée. J'ai essayé ceci:
```
$("input[id^='something'][value='']")
```
mais ça ne fonctionne pas. Ni l'inversion entre eux. Voir ce violon. Les seuls moyens que j'ai trouvé correctement, sélectionnez toutes les entrées avec les identifiants commençant par une chaîne de caractères et sans valeur saisie ont été
```
$("input[id^='something']").not("[value!='']")
```
et
```
$("input[id^='something']:not([value!=''])")
```
mais de toute évidence, la double négation faire que vraiment déroutant. Probablement, Russ Cam première réponse (avec une fonction de filtrage) est le plus clair de méthode.

InformationsquelleAutor tandrewnichols
1

Cela va sélectionner de texte vide entrées avec un id qui commence par "txt":
```
$(':text[value=""][id^=txt]')
```
InformationsquelleAutor Cros

Vous devez vous connecter pour publier un commentaire.

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

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