Jeg har en formular, som jeg gerne vil have, at alle felter skal være udfyldt. Hvis der klikkes på et felt, som ikke er udfyldt, vil jeg gerne have en rød baggrund.
Her er min kode:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
Den anvender advarselsklassen, uanset om feltet er udfyldt eller ej.
Hvad gør jeg forkert?
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});
Og du behøver ikke nødvendigvis .length
eller se, om den er >0
, da en tom streng alligevel evalueres til false, men hvis du gerne vil af hensyn til læsbarheden:
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});
Hvis du'er sikker på, at det altid vil fungere på et tekstfeltelement, kan du bare bruge this.value
.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
Du bør også være opmærksom på, at $('input:text')
tager fat i flere elementer, angiv en kontekst eller brug nøgleordet this
, hvis du bare vil have en reference til et enkelt element (forudsat at der er et tekstfelt i kontekstens efterkommere/børn).
Pseudo-selektoren :empty
bruges til at se, om et element ikke indeholder nogen børn, du bør kontrollere værdien :
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});