Skip to main content
Remoção de saudações (as respostas são para toda internet, não só para o autor da pergunta). Formatação.
Fonte Link
brasofilo
  • 6,7mil
  • 5
  • 30
  • 50

@LamborghiniAventador, tenhoTenho 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 inputinput dentro de uma divdiv com a classe form-groupform-group ou input-groupinput-group, e ter em seu cssCSS a classe has-errorhas-error e has-successhas-success criada, veja abaixo como criei as classes.


 .has-error .form-control, .has-error input[type="email"]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 bootstrapBootstrap, 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.

@LamborghiniAventador, 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.

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.

removeu 24 caracteres do conteúdo
Fonte Link
jpmnteiro
  • 6,2mil
  • 3
  • 31
  • 41

Lamborghini Aventador@LamborghiniAventador, tenho um código que criei em JS que utiliza junto com o JqueryjQuery Validator, onde ele valida todos os campos do formulário que estejam com o atributo requiredrequired, 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@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 bootstrapbootstrap, caso utilize.

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

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

Espero ter ajudado

Abs

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

@LamborghiniAventador, 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.

adicionou 20 caracteres ao conteúdo
Fonte Link

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"]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);
}

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

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

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

Fonte Link
Carregando