5

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;
        }
    }
});
0

5 Respostas 5

10

Você têm um conflito de prioridades. Use assim:

display: inline-block !important;

O !important força o display a ser inline-block, sobrepondo-se a none

Exemplo online: http://jsfiddle.net/uY2eq/


Nota: Como o LeoFelipe apontou e bem, mudei também no segundo switch o indicador de ID # para classe ., ou seja de

$('#nome_erro').removeClass('erro'); 

para

$('.nome_erro').removeClass('erro');
4
  • 1
    Ainda está faltando a alteração que @LeoFelipe comentou na resposta dele. Trocar o seletor de # para . no else . 5/06/2014 às 14:12
  • Realmente, estava ocorrendo o conflito, mas o estranho é que em outro locais do projeto que estou fazendo, não estava com este problema, de certa forma estranho 5/06/2014 às 14:15
  • 1
    essa parte do # e . , foi que esqueci de desfazer as alterações, antes de postar a pergunta 5/06/2014 às 14:17
  • Lembrando que a declaração !important é desencorajada, já que pode gerar efeitos indesejados e erros de estilo "complexos" em projetos com muitas linhas / arquivos CSS.
    – Kazzkiq
    15/06/2014 às 4:26
4

As respostas do Sergio e do LeoFelipe estão corretas. De minha parte vou propor uma forma diferente de fazer a mesma coisa, com menos código:

var nome_erro = $(".nome_erro");
$("#nome").blur(function () {
    nome_erro.toggle(!this.value);
});

A primeira linha transforma o elemento numa variável, assim você não executa uma query a cada execução do blur. Isso melhora a performance.

2
  • 1
    Pode usar somente: !this.value. Boa optimização +1
    – Sergio
    5/06/2014 às 14:18
  • @Sergio tem razão. Gosto de código curto e simples, vou mudar para essa forma. 5/06/2014 às 14:19
3

1º) Seu remove Class tá setando #nome_erro e deveria ser .nome_erro.

2º) Eu costumo usar .show() e .hide(). Exemplo:

$('.nome_erro').hide();

if($(this).val() === ''){
    switch($(this).attr('id')){
        case 'nome':
            $('.nome_erro').show(); break;
    }
}
else{
    switch($(this).attr('id')){
        case 'nome':
            $('.nome_erro').hide(); break;
    }
}
1

Notei que em seu código você está validando todos os campos input,select ..., há um problema nisto, se houveram campos não obrigatórios, isto te trará problemas, se você pretende criar seu próprio validate, vou deixar uma dica, apenas didática, que você pode tomar como base e implementá-lo.

Form

<form name="form" id="form">
   <label for="nome">Nome <small>(obrigatório)</small></label>
   <input type="text" name="nome" data-required="true" />
   <small class="erro">Nome obrigatório</small>
   <label for="end">Endereço <small>(Não obrigatório)</small></label>
   <input type="text" name="end"/>
   <label for="end">Mensagem <small>(Obrigatório)</small></label>
   <textarea name="msg" data-required="true"></textarea>
   <small class="erro">Mensagem obrigatória</small>
   <button type="submit">Enviar</button>
</form>

CSS

label,input,textarea,button{display: block;}
small.erro {display:none; color:red;}

Jquery

$.validate = {
    classErro: '.erro', //classe padrão de exibição de erros
    start: function(form){ // função para inicializar a validação
        //testa todos os campos que tiverem o atributo data-required
        $(form+' *[data-required]').on('blur',function(){
            if ($(this).val() == ''){ // se o campo estiver vazio, mostra erro
                $(this).next($.validate.classErro).show();
            } else { 
                $(this).next($.validate.classErro).hide(); 
            }
        });
        $(document).ready(function(){
           //testa o form no momento do submit
           $(form).submit(function(event){
               if(!$.validate.validSubmit(form)){
                   //se não passar na validação impede o submit
                   event.preventDefault();
               }
           });
        });
      },
      //função para validar no momento do submit
      validSubmit: function(form){
         // procura por campos com attr required
         $(form+' *[data-required]').each(function(){ 
             if ($(this).val() == ''){
                 $(this).next($.validate.classErro).show();
             } else { 
                 $(this).next($.validate.classErro).hide(); 
             }
         });
         // se houver erro retorna falso
         if($(form+' small.erro:visible').length > 0){ 
             return false;
         }
         return true;
       }
  };

// inicia a função passando como parametro o id do form
$.validate.start('#form'); 

Exemplo: JSFiddle

Tomando como base este exemplo, você poderá criar outras funções para validar por exemplo:

  • Datas
  • Email
  • Telefone
  • CPF e CPNJ

Entre outros, boa sorte!

1

O CSS respeita a lei da sobrescrição, ou seja, o que vem por último é que tem prioridade. Sendo assim, a solução seria inverter a ordem das classes:

.nome_erro {
    display: none;
}
.nome_erro.erro {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    color: #ff0000;
    left: 10px;
    display: inline-block;
}

Exemplo: FIDDLE

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .