Validate form and send email

Question

I have a code where I validate the blank fields, but I wanted to know how to do it so that when the fields are filled submit to the page send php.

Form:

 <form method="post" action="send.php">
<div class="form-group">                    
    <div class="row">
        <div class="col-md-12">
            <label>Nome</label>
            <input type="text" class="form-control" id="nome" name="nome" placeholder="Insira seu Nome">
        </div>
    </div>
</div>
<div class="form-group" hidden>   
    <div class="row">
        <div class="col-md-6">
            <label>E-mail</label>
            <input type="fqemail" class="form-control" id="email" name="email" placeholder="Insira seu E-mail">
        </div>
        <div class="col-md-6">
            <label>Celular</label>
            <input type="text" class="form-control" id="celular" name="telefone">
        </div>
    </div>
</div>
<div class="form-group" hidden>   
    <div class="row">
        <select id="pais" hidden></select>
        <div class="col-md-6">
            <label>Estado</label>
            <select class="form-control" id="estado" name="estado">
            </select>
        </div>
        <div class="col-md-6">
            <label>Cidade</label>
            <select type="text" class="form-control" id="cidade" name="cidade" placeholder="Insira sua Cidade">
            </select>
        </div>
    </div>
</div>
<div class="form-group" hidden>   
    <div class="row">
        <div class="col-md-12">
            <label>Mensagem</label>
            <textarea class="form-control" id="mensagem" name="mensagem" rows="3"></textarea>
        </div>
    </div>                 
</div>                  
<button type="button" class="btn btn-primary valida" id="send">Enviar</button>

Validation:

$(".valida").click(function(){    

    // remove as mensagens de erro
    $(".erromsg").remove();

    // verificar se os campos foram preenchidos
    var nome = $("#nome");
    var email = $("#email");
    var celular = $("#celular");
    var estado = $("#estado");
    var cidade = $("#cidade");

    // Mensagem de erro padrão a ser inserida após o campo
    var erromsg = '<div class="erromsg">Por favor, preencha o campo <span></span></div>';

    if(!nome.val() || nome.val().length < 5){
       nome.after(erromsg);
       $(".erromsg span").text("Nome*");
       return;
    }

    if(!email.val()){
       email.after(erromsg);
       $(".erromsg span").text("E-mail*");
       return;
    }


    if(!celular.val()){
       celular.after(erromsg);
       $(".erromsg span").text("Celular*");
       return;
    }

    if(!estado.val()){
       estado.after(erromsg);
       $(".erromsg span").text("Capital*");
       return;
    }

    if(!cidade.val()){
       cidade.after(erromsg);
       $(".erromsg span").text("Estado*");
       return;
    }
});

Answer 1

I set up a base to help solve your problem, you can use the submit(); and use a basic logic of checking false return, when a return false; he will not submit the form if no return false he submits the form.

//  Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {

    // Get the Login Name value and trim it
    var name = $.trim($('#nome').val());

    // Check if empty of not
    if (name === '') {
        alert('O Campo Nome está vazio.');
        return false;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <form method="post" action="send.php">
      <div class="form-group">                    
          <div class="row">
              <div class="col-md-12">
                  <label>Nome</label>
                  <input type="text" class="form-control" id="nome" name="nome" placeholder="Insira seu Nome">
              </div>
          </div>
      </div>
                    
      <button type="submit" class="btn btn-primary valida" id="send">Enviar</button>
  </form>

The validation performed removes the spaces between the first and last letter, and checks if there is any text, and if yes returns an Alert. in your case you put the updated demarcated field.

Test there and see if it works for your case.

Answer 2

Place at the end of the event function click a Trigger of submit:

$(this).closest("form").submit();

How are you using return in all validations, this line above will only be executed if it passes through all if's.

The $(this) is the element that triggered the event (in this case the button). The .closest("form") will fetch the tag form where the button is and the .submit() send the form.

Will stay like this:

$(".valida").click(function(){

   // códigos das validações

   $(this).closest("form").submit(); // última linha da função

});

Answer 3

You can give an id to your form and then do Submit by jQuery

$('#id'). Ubmit();