2

Por exemplo, no meu código php está assim:

if( @$_SERVER['REQUEST_METHOD'] == 'POST' ) {
  $sobrenome =      $_POST['sobrenome'];
  $erro = '';

  if( $nome == 'Qual é o seu sobrenome' ) {
     $erro .= '';
  } elseif ( strlen( $sobrenome ) < 2 ) {
     $erro .= 'Insira um sobrenome existente<br>';
  }
?>

O resultado é esse, a interface não é agradável inserir a descrição da imagem aqui

Gostaria que através do jquery Validate ficaria assim uma label error, uma interface mais agradável. inserir a descrição da imagem aqui

11
  • Ao que tudo indica, sua validação está apenas sendo feita pelo PHP, não há, ou não informou o uso de nenhum plugin de validação. De qualquer forma, você pode validar pelo PHP e fazer uso de um ToolTip para criar o 'balão' sobre o campo que contém erro. Commented 8/11/2014 às 22:53
  • era disso que precisava @PapaCharlie
    – ndroid
    Commented 8/11/2014 às 22:57
  • 2
    Certamente você não tem noção do que está falando, mas tudo bem. Não vou alongar os comentários aqui, mas se quiser usar o bate papo pode me chamar. Commented 8/11/2014 às 23:18
  • 1
    @PapaCharlie Muito obrigado entendi bem é uma maneira bem simples, era oque eu estava exatamente procurando
    – ndroid
    Commented 10/11/2014 às 4:51
  • 2
    Bacana. Foi um modelo básico, basta incrementar conforme a sua necessidade. Commented 10/11/2014 às 4:58

2 Respostas 2

2

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.

-1

Neste caso, indico tratar essas validações antes de chegar no PHP com próprio plugin que sugeriu, pois se deixar para validar no PHP, vai ter que escrever códigos HTML em código PHP para tentar melhorar o visual, que ficaria muito desagradável, ou teria que lançar as exceções para o jQuery tratar novamente.

5
  • o meu formulário tem captcha esses plugins valida captcha também?
    – ndroid
    Commented 8/11/2014 às 23:00
  • 1
    E se o usuário desabilitar o javascript? Commented 8/11/2014 às 23:00
  • 1
    Sim é possível usar captacha. @Papa Charlie tem que validar dos dois lados, sempre digo que validações do lado cliente são apenas estéticas para um resultado mais imediato e amigável, validar o lado servidor é primordial. Você também poderia não permitir o acesso caso o Javascript estivesse desabilitado e se houvesse interações muito dependentes dele, é o que acontece com outros sites como de email, mas ainda sim as validações no servidor devem existir. Commented 8/11/2014 às 23:08
  • @vcrzy Me indica um site bacana pra fazer download desse plugin
    – ndroid
    Commented 8/11/2014 às 23:19
  • 1
    Olha aqui amigo, github.com/jzaefferer/jquery-validation ensina até como usa-lo. Abrs Commented 8/11/2014 às 23:22

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 .