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 @PapaCharlie 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 ideia e uma forma simples e rápida para validar se os campos obrigatórios foram preenchidos.