4

estou implementando um formulário jquery, e eu quero que quando o Valida execute e a class error seja acrescentada no label deixando a font vermelha, vou enviar uma foto representando de como eu quero.

<html>
    <head>
        <title>Como Validar um Formulário dinamicamente com jQuery</title>        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>           
        <script type="text/javascript">
            $(function () {
                
                $("#my-form").validate({
                    focusCleanup: true,
                    errorLabelContainer: "input .labell",
                    errorElement: "div",
                    rules: {
                        nome: {
                            minlength: 3,
                            maxlength: 50
                        },
                        empresa: {
                            minlength: 4
                        }
                    },
                    messages: {
                        nome: {
                            required: "",
                            minlength: "Insira seu nome completo!"
                        },
                        cpf: {
                            required: ""
                        },
                        empresa: {
                            required: "",
                            minlength: "Preencha no mínimo 4 caracteres!"
                        }
                    }
                });
            });
        </script>
    </head>
    <body class="container">
        <form class="text-uppercase" role="form" id="my-form" method="post" action="add_pess.php"><br><br>
            <div class="row">
                <div class="col-md-12">
                    <label class="labell" id="lb_nome" for="nome">Nome Completo:</label>                                  
                    <input type="text" class="form-control required" id="nome" name="nome" placeholder="Digite seu nome completo">
                </div>
            </div><br>
            <div class="row">
                <div class="col-md-12">
                    <label id="lb_cpf" class="labell" for="cpf">CPF:</label>
                    <input type="tel" class="form-control required" id="cpf" name="cpf" placeholder="Digite o CPF">
                </div>
            </div><br>  
            <div class="row">
                <div class="col-md-12">
                    <label id="lb_empresa" class="labell" for="empresa">Empresa:</label>                 
                    <input type="text" class="form-control required" id="empresa" name="empresa" placeholder="Digite o nome da empresa">
                </div>
            </div><br>
            <div class="row">                          
                <div class="col-md-12">
                    <label>Relacionamento:</label>            
                    <select name="tipo" id="tipo" class="form-control">
                        <option value="CLIENTE">CLIENTE</option>
                        <option value="FORNECEDOR">FORNECEDOR</option>
                        <option value="PARCEIRO">PARCEIRO</option>
                        <option value="OUTRO">OUTRO</option>
                    </select>
                </div>                 
            </div><br>
            <div class="row">
                <div class="col-md-12">
                    <label for="ob">Observações:</label>                 
                    <textarea rows="5" class="form-control" id="ob" name="ob" placeholder="Se caso haver alguma observação digite aqui"></textarea>
                </div>
            </div><br>
            <div class="text-right col-md-12">
                <button id="submit" type="submit" class="btn btn-primary">Enviar</button>
            </div><br>
        </form> 
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
    </body>
</html>

inserir a descrição da imagem aqui

3
  • Teu código está dando erro na hora de executar. Poderia corrigí-lo? Commented 28/10/2016 às 16:01
  • { "message": "Uncaught SyntaxError: Unexpected token <", "filename": "stacksnippets.net/js", "lineno": 38, "colno": 9 } Commented 28/10/2016 às 16:02
  • Sim vou corrigi-lo.
    – Sr. Bigode
    Commented 28/10/2016 às 16:17

3 Respostas 3

6

Basta utilizar os callbacks highlight e unhighlight:

<html>
    <head>
        <title>Como Validar um Formulário dinamicamente com jQuery</title>        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>           
        <script type="text/javascript">
            $(function () {
                
                $("#my-form").validate({
                    highlight: function(element) {
                        $(element).parent().parent().addClass('has-error');
                    },
                    unhighlight: function(element) {
                        $(element).parent().parent().removeClass('has-error');
                    },
                    focusCleanup: true,
                    errorLabelContainer: "input .labell",
                    errorElement: "div",
                    rules: {
                        nome: {
                            minlength: 3,
                            maxlength: 50
                        },
                        empresa: {
                            minlength: 4
                        }
                    },
                    messages: {
                        nome: {
                            required: "",
                            minlength: "Insira seu nome completo!"
                        },
                        cpf: {
                            required: ""
                        },
                        empresa: {
                            required: "",
                            minlength: "Preencha no mínimo 4 caracteres!"
                        }
                    }
                });
            });
        </script>
    </head>
    <body class="container">
        <form class="text-uppercase" role="form" id="my-form" method="post" action="add_pess.php"><br><br>
            <div class="row">
              <div class="form-group">
                <div class="col-md-12">
                    <label class="labell" id="lb_nome" for="nome">Nome Completo:</label>                                  
                    <input type="text" class="form-control required" id="nome" name="nome" placeholder="Digite seu nome completo">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <div class="col-md-12">
                    <label id="lb_cpf" class="labell" for="cpf">CPF:</label>
                    <input type="tel" class="form-control required" id="cpf" name="cpf" placeholder="Digite o CPF">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <div class="col-md-12">
                    <label id="lb_empresa" class="labell" for="empresa">Empresa:</label>                 
                    <input type="text" class="form-control required" id="empresa" name="empresa" placeholder="Digite o nome da empresa">
                </div>
              </div>
            </div>
            <div class="row">     
              <div class="form-group">                     
                <div class="col-md-12">
                    <label>Relacionamento:</label>            
                    <select name="tipo" id="tipo" class="form-control">
                        <option value="CLIENTE">CLIENTE</option>
                        <option value="FORNECEDOR">FORNECEDOR</option>
                        <option value="PARCEIRO">PARCEIRO</option>
                        <option value="OUTRO">OUTRO</option>
                    </select>
                </div>  
              </div>               
            </div>
            <div class="row">
              <div class="form-group">
                <div class="col-md-12">
                    <label for="ob">Observações:</label>                 
                    <textarea rows="5" class="form-control" id="ob" name="ob" placeholder="Se caso haver alguma observação digite aqui"></textarea>
                </div>
              </div>
            </div>
            <div class="text-right col-md-12">
                <button id="submit" type="submit" class="btn btn-primary">Enviar</button>
            </div>
        </form> 
    </body>
</html>

13
  • Não funcionou, você pode me explicar porque colocou essa parte: .closest('.form-group')
    – Sr. Bigode
    Commented 31/10/2016 às 17:47
  • Esse método é o que busca qual tag deve ter a classe alterada após a validação, porém como reparei que estava usando bootstrap e essa classe é usada sempre na criação de forms, passou batido que não as tinha no seu código, editei a parte do html, caso não funcione, retorne com o erro ou alguma informação relevante para que possamos ir acertando... Commented 31/10/2016 às 18:04
  • Infelizmente não funcionou novamente amigo, já conferi tudo a class has-error está dessa forma no css: .has-error{ color: #ed3237!important; }, e mesmo assim não esta funcionando, você quer que eu te envie meu codigo pra você ver esse erro?
    – Sr. Bigode
    Commented 31/10/2016 às 18:08
  • Você está executanto em qual browser? dê um f12 e veja se tem algum erro de execução no javascript. Mesmo que a regra esteja criada no css, você precisa ter certeza que a classe esta sendo adicionada no elemento... Commented 31/10/2016 às 18:11
  • Sim eu verifiquei e não esta com nenhum erro na execução.
    – Sr. Bigode
    Commented 31/10/2016 às 18:17
3

Uma maneira simples de fazer isso, é atribuir as classes através dos parâmetros do objeto, usando errorClass ou validClass, e definir a cor destas classes no CSS:

jQuery:

$("#my-form").validate({
   errorClass: "my-error-class",
   validClass: "my-valid-class"
});

CSS:

.my-error-class {
    color:#FF0000;  /* red */
}
.my-valid-class {
    color:#00CC00; /* green */
}

Exemplo no JSFIDDLE

Fonte do problema no SOen

Para pegar o label:

$("#my-form").validate({
    errorClass: "my-error-class",
    validClass: "my-valid-class",
    highlight: function (element, errorClass, validClass) {
          //element.id é a ID do input
        $(element.form).find('label[for="lb_'+element.id+'"]')
        .addClass(errorClass);
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element.form).find('label[for="lb_'+element.id+'"]')
        .removeClass(errorClass);
    },
    rules: {
            test: {
                required: true,
                minlength: 12
            }
    }
});

Exemplo no JSFIDDLE

4
  • Vou tentar aqui amigo, só um minuto!
    – Sr. Bigode
    Commented 31/10/2016 às 18:24
  • Eu tenho é que mudar o Label do input que não foi preenchido entendeu amigo?
    – Sr. Bigode
    Commented 31/10/2016 às 18:31
  • Como no exemplo que eu mandei a foto, pro favor me ajude.
    – Sr. Bigode
    Commented 31/10/2016 às 18:32
  • Editei a pergunta, para no caso, você mudar o label, lembrando que você pode passar a id no for: .find('label[for="'+element.id+'"]') Commented 31/10/2016 às 19:01
1

Geralmente eu faço isso usando as próprias classes que o jQuery Validate implementa nos elementos com erros.

$("#form-validate").validate({
    rules: {
      nome: "required",
      telefone: "required"
    }
});
label.error{
  display: none!important;
}

.error{
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js"></script>
<form id="form-validate"> 
    <labe>Nome</label>
    <input type="text" name="nome" /> 
  
  <label>Telefone</label>
    <input type="text" name="telefone" /> 
  
   <input type="submit" value="Enviar">
</form>

Funcionando no CodePen

1
  • Não sei porquê, mas não funciona no Sandbox do SOpt. Mas no Codepen está de boa. Commented 31/10/2016 às 18:36

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 .