tengo esto maquetado:
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>
Campos
<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>
Y este script JQuery:
Script JQuery
<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>
El problema es que me interpreta el código JQuery siempre y cuando no ponga un "@" en el campo tipo mail (y cuando no pongo un arroba, salta la comproboación y luego el modal, algo medio feo). La idea sería que, un usuario ingrese su dirección de correo electrónico (compruebo luego si existe en el sistema), se muestre un modal informandole que se enviará un e-mail a su correo electrónico, cuando 'dismisee' el modal lo re-direccione automáticamente a la página 'dame-codigo-de-recuperacion.php' donde insertará el código que le llegó al correo y podrá volver a acceder a su cuenta.
Nota: Ya he visto que hay algunos plugins muy lindos/versátiles para alertas con confirmación en JQuery, pero no creo necesitarlos mucho (solo para estas dos páginas ['me-acabo-de-olvidar-mi-contraseña.php' y 'dame-codigo-de-recuperacion.php']).
¿Alguna ayuda/sugerencia/corrección(es)? Desde ya, muchas gracias :).