Selezione di un input di testo vuoto utilizzando jQuery

103

Come si identificano le caselle di testo vuote utilizzando jQuery? Mi piacerebbe farlo usando i selettori, se possibile. Inoltre, devo selezionare su id poiché nel codice reale in cui voglio usarlo non voglio selezionare tutti gli input di testo.

Nei miei due esempi di codice seguenti, il primo visualizza accuratamente il valore digitato nella casella di testo "txt2" dall'utente. Il secondo esempio identifica che c'è una casella di testo vuota, ma se la riempi, la considera ancora vuota. Perchè è questo?

È possibile farlo utilizzando solo selettori?

Questo codice riporta il valore nella casella di testo "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>

Questo codice segnala sempre la casella di testo "txt2" come vuota:

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

6

Qualcuno sa se "[value =]" ignora l'input dell'utente e controlla solo cosa c'è nella sorgente?

— Cros

Ho ragione che il filtro: vuoto è fatto per questo lavoro? $ ( 'input [type = text]: vuoto'). doStuff ();

— Antony Carthy,

1

leggi i documenti - docs.jquery.com/Selectors/empty . Vuoto è per gli elementi che non hanno figli, NON nessun valore

— Russ Cam

196

Un altro modo

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

o

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

o

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

Demo funzionante

codice dalla 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
fonte

Per me: if ($ ('[id ^ = txt]'). Filter (function () {return $ (this) .val () == "";}). Length> 0) {alert ('WARNING' ); }

— Cros

Cosa separa il tuo ultimo esempio dal secondo? Devo selezionare su id, poiché nel codice reale non guarderò tutti gli input di testo. Il mio secondo esempio non funziona con l'input dell'utente, ma il tuo sì.

— Cros

1

Il selettore funzionante sembra avere a che fare con: testo nel selettore: se apri la demo funzionante e aggiungi / modifichi l'URL, puoi giocare con il selettore utilizzato. Se rimuovi il testo:, il selettore non funziona più correttamente, anche con $ ('input [value = ""]'). Forse un bug nel motore di selezione di Sizzle, ma non ho tempo per indagare. A proposito, suggerirei di utilizzare un tag elemento nel selettore, altrimenti ogni elemento verrà controllato per vedere se esiste una corrispondenza per i valori degli attributi.

— Russ Cam

3

Bella risposta! Ma potresti anche voler assicurarti che il valore dell'elemento di input sia letteralmente nullo (spazi vuoti!). Assicurati di ritagliare gli spazi vuoti in quel caso. Qualcosa di simile$('input:text').filter(function() { return $(this).val().trim() == ""; });

— Vineeth Pradhan,

31

Nota che se l'elemento è presente ma non ha un attributo di valore, il [value=""]selettore non funziona poiché non trova un attributo di valore. Tuttavia la tecnica .filter funziona in questo scenario.

— AaronLS

26

Puoi anche farlo definendo il tuo selettore:

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

E poi accedili in questo modo:

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

— James Wiseman
fonte

Sono un po 'preoccupato per la performance. Ma probabilmente la risposta più semplice!

— aliqandil

19

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

?

A proposito, la tua chiamata di:

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

può essere notevolmente semplificato e velocizzato con:

$('#cmdSubmit')...

— Cletus
fonte

Immagino che manchi una parentesi quadra di chiusura. Una fonte comune di jQuery non funziona come previsto, difficile da individuare: - /

— OregonGhost

Il tuo primo esempio è fondamentalmente ciò che fa il mio esempio non funzionante. Voglio sapere se l'utente ha aggiunto del testo al campo di input, il tuo esempio non lo fa.

— Cros

Sono stato frettoloso, il tuo esempio sembra funzionare, ma non seleziona su id, cosa che devo fare.

— Cros

Fare "input [id = ..]" non è la stessa cosa di "#". # non fornisce un array di oggetti.

— dev4life

@ dev4life se stai usando più elementi su una pagina con lo stesso ID, lo stai sbagliando

— Sean Kendle

12

Come accennato nel post in cima alla classifica, quanto segue funziona con il motore Sizzle.

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

Nei commenti, è stato notato che la rimozione della :textparte del selettore causa il fallimento del selettore. Credo che quello che sta succedendo sia che Sizzle si affida effettivamente al motore di selezione integrato del browser quando possibile. Quando :textviene aggiunto al selettore, diventa un selettore CSS non standard e quindi deve essere gestito da Sizzle stesso. Ciò significa che Sizzle controlla il valore corrente di INPUT, invece dell'attributo "value" specificato nell'HTML di origine.

Quindi è un modo intelligente per verificare la presenza di campi di testo vuoti, ma penso che si basi su un comportamento specifico del motore Sizzle (quello di utilizzare il valore corrente di INPUT invece dell'attributo definito nel codice sorgente). Sebbene Sizzle possa restituire elementi che corrispondono a questo selettore, document.querySelectorAllrestituirà solo elementi che hanno value=""nell'HTML. Avvertimento emptor.

— thirdender
fonte

5

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

Dopo aver provato molte versioni ho trovato questa la più logica.

Nota che textfa distinzione tra maiuscole e minuscole.

4

Basandomi sulla risposta di @James Wiseman, sto usando questo:

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

Questo catturerà gli input che contengono solo spazi bianchi oltre a quelli che sono "veramente" vuoti.

Esempio: http://jsfiddle.net/e9btdbyn/

— Gruffy
fonte

3

Io consiglierei:

$('input:text:not([value])')

— TM.
fonte

2

Questo non funzionerà, perché [attributo] cerca la presenza di un attributo, non se ha un valore o meno. <input value="">corrisponderà ancora.

— Ben Hull

Questo mi è stato utile quando si utilizza Laravel per generare campi modulo (ad esempio {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}) perché Laravel non aggiunge un attributo "valore" se è vuoto. Quindi ho usato: $('input:text:not([value]):visible:enabled:first');per trovare il primo campo di immissione di testo abilitato vuoto visibile.

— Ryan

3

Ci sono molte risposte qui che suggeriscono qualcosa di simile, [value=""]ma non penso che funzioni davvero. . . o almeno, l'utilizzo non è coerente. Sto cercando di fare qualcosa di simile, selezionando tutti gli input con ID che iniziano con una certa stringa che non hanno alcun valore inserito. Ho provato questo:

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

ma non funziona. Né li inverte. Vedi questo violino . Gli unici modi che ho trovato per selezionare correttamente tutti gli input con ID che iniziano con una stringa e senza un valore inserito erano

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

e

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

ma ovviamente, i doppi negativi lo rendono davvero confuso. Probabilmente, la prima risposta di Russ Cam (con una funzione di filtro) è il metodo più chiaro.

— tandrewnichols
fonte

1

Questo selezionerà input di testo vuoti con un ID che inizia con "txt":

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

— Cros
fonte

0

Poiché la creazione di un oggetto JQuery per ogni confronto non è efficiente, è sufficiente utilizzare:

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

Quindi puoi fare:

$(":input:blank")

— Pneumatici
fonte