Ik heb een formulier dat ik wil dat alle velden ingevuld zijn. Als een veld wordt aangeklikt en vervolgens niet wordt ingevuld, wil ik een rode achtergrond laten zien.
Hier is mijn code:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
Het past de waarschuwingsklasse toe, ongeacht of het veld ingevuld is of niet.
Wat doe ik verkeerd?
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});
En je hebt niet per se .length
nodig of te zien of het >0
is, aangezien een lege string toch al op false evalueert, maar als je'zou willen voor de leesbaarheid:
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});
Als je'er zeker van bent dat het altijd op een textfield element zal werken dan kun je gewoon this.value
gebruiken.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
Ook moet je er rekening mee houden dat $('input:text')
meerdere elementen pakt, specificeer een context of gebruik het this
sleutelwoord als je alleen een verwijzing naar een eenzaam element wilt (mits er'één textfield in de context's descendants/children zit).
De :empty
pseudo-selector wordt gebruikt om te zien of een element geen childs bevat, je moet de waarde controleren :
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});