Keep values in fields during Jquery/PHP validation

Asked

Viewed 55 times

0

I have a form that I validate using jQuery/PHP. After 50 years using, I realized that during the validation the values of the fields are erased. How would I keep the values in the fields during validation? See the code:

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>
jquery

  • Why are you cleaning the value of inputs? $('#nome').val(''); and the others

  • What is the code of enviar.php? Is this where you do the validation? If it is, it doesn’t make much sense for you to clear the values of the fields as Killerjack commented.

  • You are answering me with questions that are the same as I expect the answers r... That’s why I posted, because I need help in code ;). But come on. First question. I clean the values after the email is sent, but I saw that it is wrong. Second and third question. The sending code does the validation, but it is not the problem in it, but in jquery. The goal of clearing the fields is after sending, but as I said, after a while I went to see that was wrong and so I am here.

1 answer

2


Talk buddy, here’s what you gotta do. In send.php you will make the validation checks, if there is any exception you for the execution of the code and returns a json, example below:

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

Done this, in your jQuery code, you search for this error.

$.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
})

  • Thank you ericrj.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.