Auswahl der leeren Texteingabe mit jQuery

103

Wie identifiziere ich leere Textfelder mit jQuery? Ich würde es gerne mit Selektoren machen, wenn es überhaupt möglich ist. Außerdem muss ich die ID auswählen, da ich im realen Code, in dem ich diese verwenden möchte, nicht alle Texteingaben auswählen möchte.

In meinen folgenden zwei Codebeispielen zeigt das erste den vom Benutzer in das Textfeld "txt2" eingegebenen Wert genau an. Das zweite Beispiel zeigt, dass ein leeres Textfeld vorhanden ist. Wenn Sie es jedoch ausfüllen, wird es weiterhin als leer angesehen. Warum ist das?

Kann dies nur mit Selektoren erfolgen?

Dieser Code gibt den Wert im Textfeld "txt2" an:

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

Dieser Code meldet das Textfeld "txt2" immer als leer:

<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>
jquery css-selectors Cros
quelle
6
Weiß jemand, ob '[value =]' Benutzereingaben ignoriert und nur prüft, was in der Quelle enthalten ist?
Cros
Habe ich recht, dass der: leere Filter für diesen Job gemacht wurde? $ ('input [type = text]: empty'). doStuff ();
Antony Carthy
1
Lesen Sie die Dokumente - docs.jquery.com/Selectors/empty . Leer ist für Elemente, die keine Kinder haben, KEIN Wert
Russ Cam

Antworten:

196

Ein anderer Weg 

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

oder 

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

oder

// 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=""]');

Arbeitsdemo

Code aus der Demo

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

});
Russ Cam
quelle
Für mich: if ($ ('[id ^ = txt]'). Filter (function () {return $ (this) .val () == "";}). Length> 0) {alert ('WARNING' ); }
Cros
Was unterscheidet Ihr letztes Beispiel von meinem zweiten? Ich muss die ID auswählen, da ich im realen Code nicht alle Texteingaben betrachte. Mein zweites Beispiel funktioniert nicht mit Benutzereingaben, aber mit Ihrem.
Cros
1
Der Arbeits-Selektor scheint mit folgendem Text zu tun zu haben: Text im Selektor - Wenn Sie die Arbeits-Demo öffnen und der URL hinzufügen / bearbeiten, können Sie mit dem verwendeten Selektor spielen. Wenn Sie den Text: entfernen, funktioniert der Selektor auch mit $ ('input [value = ""]') nicht mehr richtig. Möglicherweise ein Fehler in der Sizzle-Auswahlmaschine, aber ich habe keine Zeit, dies zu untersuchen. Übrigens würde ich vorschlagen, ein Element-Tag im Selektor zu verwenden, andernfalls wird jedes Element überprüft, um festzustellen, ob die Attributwerte übereinstimmen.
Russ Cam
3
Gute Antwort! Möglicherweise möchten Sie aber auch sicherstellen, dass der Wert des Eingabeelements buchstäblich null ist (Leerzeichen!). Stellen Sie sicher, dass Sie in diesem Fall die Leerzeichen ausschneiden. So etwas in der Art$('input:text').filter(function() { return $(this).val().trim() == ""; });
Vineeth Pradhan
31
Beachten Sie, dass der [value=""]Selektor nicht funktioniert , wenn das Element vorhanden ist, aber kein Wertattribut hat, da es kein Wertattribut findet. Die Filtertechnik funktioniert jedoch in diesem Szenario.
AaronLS
26

Sie können dies auch tun, indem Sie Ihren eigenen Selektor definieren:

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

Und dann wie folgt darauf zugreifen:

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
James Wiseman
quelle
Ich bin ein wenig besorgt über die Leistung. Aber wahrscheinlich die einfachste Antwort!
Aliqandil
19 
$(":text[value='']").doStuff();

?

Übrigens, Ihr Anruf von:

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

kann stark vereinfacht und beschleunigt werden mit:

$('#cmdSubmit')...
Cletus
quelle
Ich denke, es fehlt eine schließende eckige Klammer. Eine häufige Quelle für jQuery, die nicht wie erwartet funktioniert, schwer zu erkennen: - /
OregonGhost
Ihr erstes Beispiel ist im Grunde das, was mein nicht funktionierendes Beispiel tut. Ich möchte wissen, ob der Benutzer dem Eingabefeld Text hinzugefügt hat. Ihr Beispiel tut dies nicht.
Cros
Ich war voreilig, Ihr Beispiel scheint zu funktionieren, aber es wählt nicht die ID aus, was ich tun muss.
Cros
"Eingabe [id = ..]" ist nicht dasselbe wie "#". # gibt Ihnen kein Array von Objekten.
Dev4life
@ dev4life Wenn Sie mehrere Elemente auf einer Seite mit derselben ID verwenden, machen Sie es falsch
Sean Kendle
12

Wie im hochrangigen Beitrag erwähnt, funktioniert das Folgende mit der Sizzle-Engine.

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

In den Kommentaren wurde angemerkt, dass das Entfernen des :textTeils des Selektors dazu führt, dass der Selektor ausfällt. Ich glaube, was passiert, ist, dass Sizzle sich nach Möglichkeit tatsächlich auf die integrierte Auswahl-Engine des Browsers verlässt. Wenn :textes dem Selektor hinzugefügt wird, wird es zu einem nicht standardmäßigen CSS-Selektor und muss daher von Sizzle selbst behandelt werden. Dies bedeutet, dass Sizzle den aktuellen Wert des INPUT anstelle des im Quell-HTML angegebenen Attributs "value" überprüft.

Es ist also eine clevere Möglichkeit, nach leeren Textfeldern zu suchen, aber ich denke, es beruht auf einem Verhalten, das für die Sizzle-Engine spezifisch ist (das Verwenden des aktuellen Werts von INPUT anstelle des im Quellcode definierten Attributs). Während Sizzle möglicherweise Elemente zurückgibt, document.querySelectorAlldie diesem Selektor entsprechen, werden nur Elemente zurückgegeben, die value=""im HTML enthalten sind. Vorbehalt Emptor.

Thirdender
quelle
4

Aufbauend auf der Antwort von @James Wiseman verwende ich Folgendes: 

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

Dadurch werden Eingaben abgefangen, die nur Leerzeichen enthalten, zusätzlich zu denen, die "wirklich" leer sind.

Beispiel: http://jsfiddle.net/e9btdbyn/

Gruffy
quelle
3

Ich würde empfehlen:

$('input:text:not([value])')
TM.
quelle
2
Dies funktioniert nicht, da [Attribut] nach dem Vorhandensein eines Attributs sucht - nicht, ob es einen Wert hat oder nicht. <input value="">wird noch übereinstimmen.
Ben Hull
Dies war hilfreich für mich, wenn ich Laravel zum Generieren von Formularfeldern verwendete (z. B. {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}), da Laravel kein 'Wert'-Attribut hinzufügt, wenn es leer ist. Also habe ich dann verwendet: $('input:text:not([value]):visible:enabled:first');um das erste sichtbare leere aktivierte Texteingabefeld zu finden.
Ryan
3

Es gibt hier viele Antworten, die auf so etwas hinweisen, [value=""]aber ich denke nicht, dass das tatsächlich funktioniert. . . oder zumindest ist die Verwendung nicht konsistent. Ich versuche etwas Ähnliches zu tun, indem ich alle Eingaben mit IDs auswähle, die mit einer bestimmten Zeichenfolge beginnen und auch keinen eingegebenen Wert haben. Ich habe es versucht:

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

aber es funktioniert nicht. Sie werden auch nicht umgekehrt. Sehen Sie diese Geige . Die einzigen Möglichkeiten, alle Eingaben mit IDs, die mit einer Zeichenfolge beginnen und keinen eingegebenen Wert haben, korrekt auszuwählen, waren:

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

und

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

aber offensichtlich machen die doppelten Negative das wirklich verwirrend. Wahrscheinlich ist die erste Antwort von Russ Cam (mit einer Filterfunktion) die klarste Methode.

Tandrewnichole
quelle
1

Dadurch werden leere Texteingaben mit einer ID ausgewählt, die mit "txt" beginnt:

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

Da das Erstellen eines JQuery-Objekts für jeden Vergleich nicht effizient ist, verwenden Sie einfach:

$.expr[":"].blank = function(element) {
    return element.value == "";
};

Dann können Sie tun:

$(":input:blank")
Reifen
quelle