Skip to main content
2 de 4
adicionou 20 caracteres ao conteúdo

Lamborghini Aventador, tenho um código que criei em JS que utiliza junto com o Jquery Validator, onde ele valida todos os campos do formulário que estejam com o atributo required, desta maneira você não precisa ficar validando um a um.

A única desvantagem é que não possui mensagem de erro específica para cada campo e valida apenas se o campo foi preenchido ou não, mas acredito que já possa ajudar.

Como o @Papa Charlie falou, é uma validação mais estética.

$('form').not('.no-validate').each(function(key, form) {
    $(form).data('validator', $(form).validate({
        ignore : "",
        errorElement : false,
        highlight : function(field) {
            $(field).closest('.form-group, .input-group').addClass('has-error').removeClass('has-success');
        },
        unhighlight : function(field) {
            $(field).closest('.form-group, .input-group').removeClass("has-error").addClass('has-success');
        },
        errorPlacement : function() {
        }
    }));
 });

Para que este código funcione basta você ter o input dentro de uma div com a classe form-group ou input-group, e ter em seu css a classe has-error e has-success criada, veja abaixo como criei as classes.


.has-error .form-control, .has-error input[type="email"]{
    border-color: #A94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

Estas duas classes estão presentes no bootstrap, caso utilize.

Neste código você pode melhorar adicionando uma div com a mensagem de erro que deseja, ou esconder a div caso o campo esteja preenchido, etc.

É só uma idéia e uma forma simples e rápida para validar se os campos obrigatórios foram preenchidos.

Espero ter ajudado

Abs