How to change the input color using jquery Validate?

Navigation
4

I'm implementing a jquery form, and I want it when the validate executes and the class error is appended to the label leaving the red font, I'm going to send a picture representing how I want it. 

<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><scripttype="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><scripttype="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>

    
asked by anonymous 28.10.2016 / 16:28

3 answers

1

I usually do this using the very classes that jQuery Validate implements on elements with errors. 

$("#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><scriptsrc="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>

Running on CodePen

    
31.10.2016 / 19:34
5

Just use the callbacks highlight and 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><scripttype="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script><scripttype="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><scripttype="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>
    
28.10.2016 / 18:53
3

A simple way to do this is to assign classes through object parameters, using errorClass or validClass , and set the color of these classes in 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 */
}

Example in the JSFIDDLE

Source of SOen problem >

To get the 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
            }
    }
});

Example on JSFIDDLE

    
31.10.2016 / 19:09
Inheritance class Object Use out-of-function variables