Eu tenho um formulário que gostaria que todos os campos fossem preenchidos. Se um campo for clicado e depois não for preenchido, eu gostaria de exibir um fundo vermelho.
Aqui está o meu código:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
Aplica a classe de aviso independentemente do campo estar ou não preenchido.
O que estou a fazer mal?
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});
E você não'não precisa necessariamente de .length
ou ver se ele's >0
já que uma string vazia avalia como falsa de qualquer forma, mas se você'gostaria de para fins de legibilidade:
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});
Se você'tem certeza de que ele sempre irá operar em um elemento de campo de texto, então você pode apenas utilizar este.valor
.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
Você também deve observar que $('input:text')
agarra múltiplos elementos, especifica um contexto ou utiliza a palavra-chave `esta' palavra se você quiser apenas uma referência a um elemento isolado (desde que ali's um campo de texto no contexto's descendentes/filhos).
O pseudo-seletor `:vazio' é utilizado para ver se um elemento não contém crianças, você deve verificar o valor :
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});