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?
$('#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).
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');
}
});