Controllare se gli input sono vuoti usando jQuery

Ho un modulo che vorrei che tutti i campi fossero compilati. Se un campo viene cliccato e poi non viene compilato, vorrei visualizzare uno sfondo rosso.

Ecco il mio codice:

$('#apply-form input').blur(function () {
  if ($('input:text').is(":empty")) {
    $(this).parents('p').addClass('warning');
  }
});

Applica la classe di avviso indipendentemente dal fatto che il campo sia compilato o meno.

Cosa sto facendo di sbagliato?

Danil Speransky
Domanda modificata 1º settembre 2012 в 11:14
Programmazione
jquery validation
6º dicembre 2009 в 6:34
13 visualizzazioni
Soluzione
$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

E non avete necessariamente bisogno di .length o di vedere se è >0 dato che una stringa vuota valuta comunque false, ma se volete per motivi di leggibilità:

$('#apply-form input').blur(function()
{
    if( $(this).val().length === 0 ) {
        $(this).parents('p').addClass('warning');
    }
});

Se sei sicuro che opererà sempre su un elemento textfield allora puoi semplicemente usare this.value.

$('#apply-form input').blur(function()
{
      if( !this.value ) {
            $(this).parents('p').addClass('warning');
      }
});

Inoltre dovresti prendere nota che $('input:text') afferra elementi multipli, specifica un contesto o usa la parola chiave this se vuoi solo un riferimento a un elemento solo (a condizione che ci sia un campo di testo nei discendenti/figli del contesto).

Paul Roub
Risposta modificata 9º gennaio 2017 в 6:42
Commentari (4)
 
if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}
Graviton
Risposta modificata 6º dicembre 2009 в 6:51
Commentari (2)

Lo pseudo-selettore :empty è usato per vedere se un elemento non contiene figli, si dovrebbe controllare il valore :

$('#apply-form input').blur(function() {
     if(!this.value) { // zero-length string
            $(this).parents('p').addClass('warning');
     }
});
Commentari (0)