0

Tenho um formulário do qual faço a validação usando jQuery/PHP. Depois de 50 anos usando, fui perceber que durante a validação os valores dos campos se apagam. Como eu faria para manter os valores nos campos durante a validação? Vejam o código:

HTML

<form method="post" name="form" novalidate="" id="contact-form">
    <div id="success"></div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" name="Nome" class="form-control" placeholder="Nome *" id="nome" required="required">                                         
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <input type="email" name="Email" class="form-control" placeholder="E-mail *" id="email" required="required" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">                                          
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" name="Telefone" class="form-control" placeholder="Telefone *" data-inputmask="'mask' : '(99)9999-9999'" id="telefone" required="required">                                           
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" name="Celular" class="form-control" placeholder="Celular *" data-inputmask="'mask' : '(99)99999-9999'" id="celular" required="required">                                         
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <textarea name="Mensagem" class="form-control" placeholder="Mensagem *" id="mensagem" required="required"></textarea>                                           
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="row">
        <div class="col-lg-12 text-center">
            <button type="submit" id="submit" class="btn">Enviar</button>
        </div>
    </div>
</form>

JQUERY

<script type="text/javascript">
  $('#submit').click(function() {
    $.post("enviar.php", $("#contact-form").serialize(), function(response) {
        $('#success').html(response);
        $('#nome').val('');
        $('#email').val('');
        $('#assunto').val('');
        $('#mensagem').val('');
      });
      return false;
  });
</script>
3
  • Por que você tá limpando o value dos inputs? $('#nome').val(''); e os outros
    – KillerJack
    Commented 15/05/2017 às 22:55
  • Qual é o código de enviar.php? É nele que você faz a validação? Se for, não faz muito sentido você limpar os valores dos campos tal como o KillerJack comentou.
    – Woss
    Commented 15/05/2017 às 23:02
  • Vocês estão me respondendo com perguntas que são as mesmas que eu espero as respostas rs rs... Por isso que postei, pois preciso de ajuda no código ;). Mas vamos lá. Primeira pergunta. Limpo os values depois que o e-mail é enviado, mas vi que está errado. Segunda e terceira pergunta. O código enviar faz a validação, porém não é nele o problema e sim no jquery. O objetivo de limpar os campos é após o envio, mas como eu disse, depois de um tempo que fui ver que estava errado e por isso estou aqui.
    – user24136
    Commented 16/05/2017 às 0:31

1 Resposta 1

2

Fala amigo, o que você tem que fazer é o seguinte. No enviar.php você vai fazer os checks da validação, caso haja alguma exceção você para a execução do código e retorna um json, exemplo abaixo:

if(empty($_POST['nome']){  
  echo json_encode(
              array(
                 "error" => true, 
                 "mensagem" => "O campo nome não pode ser vazio"));
  exit;
}

Feito isso, no seu código jQuery, você procura por esse erro.

$.post("enviar.php", $("#contact-form").serialize())
.done(function(response){
//se não houver erro de validação ele limpa os campos e carrega o response.
  if(!response.error){
     $('#success').html(response);
     $('#nome').val('');
     $('#email').val('');
     $('#assunto').val('');
     $('#mensagem').val('');
  }else{
     alert(response.mensagem)
  }
})
.fail(function(xhr, status, error){
  //tratar falha do server
})
1
  • Obrigado ericrj.
    – user24136
    Commented 17/05/2017 às 12:40

Você deve fazer log-in para responder a esta pergunta.