Modal display when submitting form. No loading page

Question

I have the code below. I would like to display a modal once I submit the form and if all fields are filled in. If any field has not been filled in it is already showing a Popover in the field indicating that it is wrong. I thank you for the contribution.

<form id="form" role="form" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
                    <div class="form-group">
                      <label for="nome_empresa">
                        Nome da empresa
                      </label>
                      <input type="text" placeholder="Nome da empresa" id="nome_empresa" name="nome_empresa" class="form-control required body" data-placement="right" data-trigger="manual" data-content="Possível erro">
                    </div>
                    <div class="form-group">
                      <label for="repre_empresa">
                        Representante da empresa
                      </label>
                      <input type="text" placeholder="Representante da Empresa" id="repre_empresa" name="repre_empresa" class="form-control required body" data-placement="right" data-trigger="manual" data-content="Possível erro">
                    </div>
                    <div class="form-group">
                      <label for="email_representante">
                        Email do Representante
                      </label>
                      <input type="text" placeholder="Email do Representante" id="email_representante" name="email_representante" class="form-control required email" data-placement="right" data-trigger="manual" data-content="Possível erro">
                    </div>
                    <div class="form-group">
                      <label for="tel_comercial">
                        Telefone Comercial
                      </label>
                      <input type="text" placeholder="99-9999-9999" id="tel_comercial" name="tel_comercial" class="form-control tel_comercial" data-placement="right" data-trigger="manual" data-content="Possível erro">
                    </div>
                    <div class="form-group">
                      <label for="cel_representante">
                        Celular do Representante
                      </label>
                      <input type="text" placeholder="99-99999-9999" id="cel_representante" name="cel_representante" class="form-control cel_representante" data-placement="right" data-trigger="manual" data-content="Possível erro">
                    </div>
                    <div class="form-group">
                      <label for="horario_visita">
                        Horário Preferencial da Visita
                      </label>
                      <select name="horario_visita" id="horario_visita" class="form-control required name" data-placement="right" data-trigger="manual" data-content="Possível erro">
                        <option value="">Escolha o melhor horário</option> 
                        <option value="Manha">Manhã</option> 
                        <option value="Tarde">Tarde</option> 
                        <option value="Noite">Noite</option> 
                      </select>
                    </div>
                    <div class="form-group">
                      <label for="num_funcionarios">
                        Número de Funcionários da empresa
                      </label>
                      <select name="num_funcionarios" id="num_funcionarios" class="form-control required name" data-placement="right" data-trigger="manual" data-content="Possível erro">
                        <option value="">Selecione a quantidade de funcionários</option> 
                        <option value="ZeroACinco">0-5</option> 
                        <option value="CincoADez">5-10</option> 
                        <option value="DezAVinte">10-20</option> 
                        <option value="VinteATrinta">20-30</option>
                        <option value="AcimaDeTrinta">Acima de 30</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <label for="serv_interesse">
                        Serviço de maior interesse
                      </label>
                      <select name="serv_interesse" id="serv_interesse" class="form-control required name" data-placement="right" data-trigger="manual" data-content="Possível erro">
                        <option value="">Escolha a área de maior interesse</option> 
                        <option value="ServicoUm">Serviço 01</option> 
                        <option value="ServicoDois">Serviço 02</option> 
                        <option value="ServicoTres">Serviço 03</option> 
                        <option value="ServicoQuatro">Serviço 04</option>
                        <option value="ServicoCinco">Serviço 05</option>
                      </select>
                    </div>
                  <input id="submit" name="submit" type="submit" value="Enviar" class="modal-toggle btn btn-info" data-toggle="modal">               
                </form>

Answer 1

I would add the attribute required="required" in every field.

To validate in the back end, you would do an ajax check. If there are blank fields, return the error in real-time.

You can do something in jQuery tbm:

$("#campo").blur(function(){
  var valor = $("#campo").val();
  if (valor == null)
    $("#erro").html("Campo xyz obrigatório não preenchido.");
});