HTML form - JQuery - Bootstrap

I have this layout:

  

Modal

<div class="modal fade" id="message" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="tituloModal" style="font-weight: bold">Recuperar contraseña</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Se ha enviado un correo electrónico a su dirección de e-mail :)</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

  

Fields

<div class="login-box-body">
  <p class="login-box-msg">Ingrese su correo electrónico</p>
  <form method="POST" id="mi_form">
    <div class="form-group has-feedback">
      <input type="email" class="form-control" placeholder="E-mail">
      <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
    </div>
    <div class="row">      
      <div class="col-xs-12">
        <button type="submit" name="recuperar" id="recuperar" class="btn btn-primary btn-block btn-flat" data-toggle="modal" data-target="#message">Enviar</button>
      </div>
    </div>
  </form>
</div>

And this JQuery script:

  

JQuery Script

<script type="text/javascript">
  //Muestra el modal 
  $('#recuperar').on('click', function(ev){
   $('#message').show();
 });
  //Re-direcciona cuando se cierra el modal de bootstrap
  $('#message').on('hidden.bs.modal', function(ev) {
    $('form').submit();
    window.location.href = './dame-codigo-de-recuperacion.php';
  })

</script>

The problem is that I interpret the JQuery code as long as I do not put an "@" in the field type mail (and when I do not put an arroba, the checkup jumps and then the modal, something half ugly). The idea would be that, a user enter their email address (I check if it exists in the system), a modal is shown informing you that an email will be sent to your email, when you 'dismisee' the modal you redirect it automatically to the page 'give me-code-of-recovery.php' where you will insert the code that came to the email and you can re-access your account.

Note : I have already seen that there are some very nice / versatile plugins for alerts with confirmation in JQuery, but I do not think I need them much (only for these two pages ['I-just-forgot -my-password.php 'and' give me-code-of-recovery.php ']).

Any help / suggestion / correction (s)? Of course, thank you very much:).