Modal to inform users that registration was successful

Well, I wanted the user to register in the system and if it worked out, a modal saying that:

  

Registered user successfully

If already exists the matricula or email informed will appear a modal with something like:

  

Enroll or Existing Email

And if the user informs the password empty or the passwords do not match a modal with something like:

  

Password does not match

<?php 

include("includes/conexao.php");//conexão com o banco

if(isset($_POST["registrar"])) {
    //Busca no banco a quantidade de usuarios que tenham a mesma matricula OU o mesmo email
    $querySelect = "SELECT * FROM usuario WHERE matricula = ?  OR email = ?";

     //prepara a query
    $statement = $connection->prepare($querySelect);

    $statement->bindValue(1, $_POST['matricula']);
    $statement->bindValue(2, $_POST['email']);
    $statement->execute();
    $total = $statement->rowCount();

    //Verificase o valor retornado é 0 (Nenhum usuário igual cadastrado)
 if($total == 0){
        $senha           = $_POST['senha'];
        $confirma_senha  = $_POST['confirma_senha'];
        if (empty($senha)) {
            $mensagem = "<span class='aviso'><b>Aviso</b>: Senha não foi alterada!</span>";
        } else if ($senha == $confirma_senha) {
            $query = "INSERT INTO usuario (nome, sobrenome, matricula, email, senha) 
                  VALUES (:nome, :sobrenome, :matricula, :email, :senha)";

            $statement = $connection->prepare($query);


            $valores = array();
            $valores[':nome'] = (isset($_POST['primeiroNome']) ? $_POST['primeiroNome'] : '');
            $valores[':sobrenome'] = (isset($_POST['sobrenome']) ? $_POST['sobrenome'] : '');
            $valores[':matricula'] = (isset($_POST['matricula']) ? $_POST['matricula'] : '');
            $valores[':email'] = (isset($_POST['email']) ? $_POST['email'] : '');
            $valores[':senha'] = (isset($_POST['senha']) ? $_POST['senha'] : '');

            $result = $statement->execute($valores);

            if(!empty($result)){
                $mensagem = "<span class='aviso'><b>Sucesso</b>: deu certo!</span>";
            }
        } else {
             $mensagem = "<span class='aviso'><b>Aviso</b>: Senha e repetir senha são diferentes!</span>";

        }

    }

}


?>

  

The alert to inform if passwords are the same

<script> 
        function validarSenha(){
        senha = document.formulario.senha.value
        confirma_senha = document.formulario.confirma_senha.value
        if (senha == confirma_senha){
            alert("Usuário cadastrado com sucesso!!")
            return true;


        }
        else{ 
            alert("As Senha não correspondem!!")
            return false;
        }
    }
   </script>

  

code that I wanted to reuse

 <script src="vendor/jquery/jquery.min.js"></script>
        <script>
        $(document).ready(function () {
            // evento de "submit"
            $("#b_enviar").click(function (e) {
                // parar o envio para que possamos faze-lo manualmente.
                e.preventDefault();
                // captura o formulário
                var form = $('#caixa')[0];
                // cria um FormData {Object}
                var data = new FormData(form);
                // processar
                $.ajax({
                    type: "POST",
                    url: "http://localhost/nsi/registro.php", //acerte o caminho para seu script php
                    data: data,
                    processData: false, // impedir que o jQuery tranforma a "data" em querystring
                    contentType: false, // desabilitar o cabeçalho "Content-Type"
                    //cache: false, // desabilitar o "cache"
                    // manipular o sucesso da requisição
                }).done(function(retorno){
                    console.log(retorno);
                    retorno = parseInt(retorno);  


                    if(retorno==1)
                      {
                        //alert("Formulário enviado com sucesso");
                        $("#myModalSucess").modal('show');
                         console.log();
                        $(':input','#caixa')
                          .not(':button, :submit, :reset, :hidden')
                          .val('')
                          .removeAttr('checked')
                          .removeAttr('selected');
                      }
                       else
                      {
                        //alert("erro ao enviar formulário");
                        $("#myModalError").modal('show'); 


                      }


                });
            });
        });
        </script>

  

Form

 <form method="POST" id="caixa" action="registro.php" onsubmit="return validarSenha()"name="formulario">
            <div class="form-group">
               <div class="form-row">
                  <div class="col-md-6">
                     <label for="primeiroNome">Primeiro nome</label>
                     <input type="text" class="form-control" id="primeiroNome" name="primeiroNome" placeholder="Digite seu primeiro nome" required="required">
                  </div>
                  <div class="col-md-6">
                     <label for="Sobrenome">Sobrenome</label>
                     <input type="text" class="form-control" id="Sobrenome" name="sobrenome" placeholder="Digite seu Sobrenome" required="required" autofocus="autofocus">
                  </div>
               </div>
            </div>
            <div class="col-md-6" id="matricula">
               <label for="primeiroNome">Matrícula</label>
               <input type="text" class="form-control"  name="matricula" placeholder="Digite sua matrícula" required="required" autofocus="autofocus">
            </div>
            <div class="form-group">
               <label for="email">E-mail</label>
               <input type="email" class="form-control" id="email" name="email" placeholder="Digite seu email" required="required" autofocus="autofocus">
            </div>
            <div class="form-group">
               <div class="form-row">
                  <div class="col-md-6">
                     <label for="senha">Senha</label>
                     <input type="password" class="form-control" id="senha" name="senha" placeholder="Digite sua senha" required="required" autofocus="autofocus">
                  </div>
                  <div class="col-md-6">
                     <label for="confirma_senha">confirmar senha</label>
                     <input type="password"  class="form-control" id="confirmaSenha" name="confirma_senha" placeholder="Confirme sua senha" required="required" autofocus="autofocus">
                  </div>
               </div>
            </div>
            <div>
               <input type="submit" id="b_enviar" class="btn btn-primary btn-block" name="registrar" value="Registra-se"/>
            </div>
            <div class="text-center">
               <a href="#" class="d-block small mt-3">Esqueceu sua senha?</a>
               <a href="login.php" class="d-block small mt-3">Login?</a>
            </div>
         </form>