Tenho o seguinte HTML:
<form action="cadastro/cadastrando.php" method="post">
<div class="elemf">
<label>Nome</label>
<input id="nome" type="text" name="nome" maxlength="15"/>
<p class="nome_erro">Campo Obrigatório. São permitidos letras e acentos.</p>
</div>
</form>
Quando eu tirar o foco do campo de texto e ele estiver vazio, deve aparecer a mensagem que está com a classe 'nome_erro'
. No entanto ela não aparece, parece que o código executa o método abaixo, mas não muda o valor do atributo display
, continuando 'none'
.
Segue o CSS:
.erro {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #ff0000;
left: 10px;
display: inline-block;
}
.nome_erro {
display: none;
}
E o Javascript:
$(document).on('blur','input, textarea, select', function() {
if($(this).val() === '') {
switch($(this).attr('id')) {
case 'nome':
$('.nome_erro').addClass('erro');
break;
}
} else {
switch($(this).attr('id')) {
case 'nome':
$('#nome_erro').removeClass('erro');
break;
}
}
});