Mám formulář, u kterého bych chtěl, aby se vyplnila všechna pole. Pokud se na některé pole klikne a není vyplněno, chtěl bych, aby se zobrazilo červené pozadí.
Zde je můj kód:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
Třída upozornění se použije bez ohledu na to, zda je pole vyplněno, nebo ne.
Co dělám špatně?
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});
A nemusíte nutně potřebovat .length
nebo zjišťovat, jestli je to >0
, protože prázdný řetězec se stejně vyhodnotí jako false, ale pokud byste to chtěli kvůli čitelnosti:
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});
Pokud'sis jistý, že to bude vždy fungovat na prvku textového pole, pak můžeš prostě použít this.value
.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
Také byste měli vzít na vědomí, že $('input:text')
chytá více prvků, zadejte kontext nebo použijte klíčové slovo this
, pokud chcete pouze odkaz na osamělý prvek (za předpokladu, že v potomcích kontextu'je jedno textové pole).
Pseudoselektor :empty
slouží ke zjištění, zda element neobsahuje žádné potomky, měli byste zkontrolovat hodnotu :
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});