Имам формуляр, в който искам всички полета да бъдат попълнени. Ако кликнете върху поле, което не е попълнено, искам да се покаже червен фон.
Ето моя код:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
Той прилага предупредителния клас, независимо дали полето е попълнено или не.
Какво правя погрешно?
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});
И не е задължително да се нуждаете от .length
или да проверявате дали е >0
, тъй като празният низ така или иначе се оценява като false, но ако'искате, за целите на четливостта:
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});
Ако сте сигурни, че винаги ще се работи с елемент от текстово поле, тогава можете просто да използвате this.value
.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
Също така трябва да обърнете внимание, че $('input:text')
захваща множество елементи, посочете контекст или използвайте ключовата дума this
, ако искате да получите препратка към самотен елемент (при условие, че в потомците/децата на контекста има едно текстово поле).
if ($('input:text').val().length == 0) {
$(this).parents('p').addClass('warning');
}
Псевдоселекторът :empty
се използва, за да се провери дали даден елемент не съдържа подчинени елементи, като трябва да проверите стойността :
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});