Evitar que la pagina se recargue al aceptar la verificación

kasher · #1 (**permalink**) 05/10/2014, 23:32

Hola a todos

Estoy haciendo una pagina web por lo que solo la he probado en mi localhost, resulta que tengo una pagina de inicio en la cual existe un input type text , en el cual se ingresa un e-mail para que mas adelante se pueda enviar un correo electrónico al e-email que se ingreso, por ahora solo estoy validando ese campo mediante una función de jquery , en la cual me valida efectivamente el campo, pero al momento de validar o mandar un error y hacer click en el recuadro del error, la pagina se recarga automáticamente ya sea por que el e-mail que se ingreso fue correcto, por que fue erróneo, o por que no se ingreso ninguno.

lo que yo quiero evitar es que se recargue cada vez que se hace clic al botón aceptar del recuadro de error, osea, presionar el botón para validar y si es que aparece la ventana de error, presionar aceptar y volver a la pagina en la que se ingresa el e-mail y sin recargar la pagina

a continuación dejo el código html y la función

de antemano muchas gracias y espero que me puedan ayudar :)

index.html

Cita:

<!DOCTYPE html>



<html lang="en">
<head>

<meta charset="UTF-8">
<title>OptimusTime</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57.png">
<link rel="shortcut icon" href="images/ico/favicon.ico">

<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/countdown.js"></script>
<script src="js/owlcarousel.js"></script>
<script src="js/uikit.scrollspy.js"></script>
<script src="js/scripts.js"></script>
<script src="js/ingresar.js"></script>
<script src="js/validarcorreo.js"></script>

</head>
<body id="backtotop">

<div class="fullwidth clearfix">
<div id="topcontainer" class="bodycontainer clearfix" data-uk-scrollspy="{cls:'uk-animation-fade', delay: 300, repeat: true}">

<p><span class="fa fa-signal"></span></p>
<h1><span>OptimusTime</span><br />Próximamente</h1>
<p>La solución a tus problemas en reservas medicas se acerca</p>
<button class="btn-ingresar" value="Ingreso" onClick="javascript:ingresar();" type="submit">Ingresar</button>
</div>
</div>

<div class="arrow-separator arrow-white"></div>

<div class="fullwidth colour1 clearfix">
<div id="countdown" class="bodycontainer clearfix" data-uk-scrollspy="{cls:'uk-animation-fade', delay: 300, repeat: true}">

<div id="countdowncont" class="clearfix">
<ul id="countscript">
<li>
<span class="days">00</span>
<p>Días</p>
</li>
<li>
<span class="hours">00</span>
<p>Horas</p>
</li>
<li class="clearbox">
<span class="minutes">00</span>
<p>Minutos</p>
</li>
<li>
<span class="seconds">00</span>
<p>Segundos</p>
</li>
</ul>
</div>
</div>
</div>

<div class="arrow-separator arrow-theme"></div>

<div class="fullwidth colour2 clearfix">
<div id="maincont" class="bodycontainer clearfix" data-uk-scrollspy="{cls:'uk-animation-fade', delay: 300, repeat: true}">

<p><strong>OtimusTime</strong>, Proyecto que tiene sus bases en el<strong> OpenSource </strong> y que busca solucionar la actual problemática de reserva de horas medicas</p>
<h2>Regístrese y le haremos saber tan pronto como nos lancemos al mercado</h2>
<p>Si usted quiere recibir <strong>noticias y ofertas especiales</strong> por favor envíenos su correo a continuación:</p>
<div id="signupform" class="sb-search clearfix">
<form method="post" id="contact" class="clearfix">
<input type="text" id="email" class="sb-search-input" placeholder="Enter email ...">
<button type="submit" id="verificar" class="formbutton"><span class="fa fa-search"></span></button>
</form>
</div>

</div>
</div>

<div class="arrow-separator arrow-grey"></div>

<div class="fullwidth clearfix">
<div id="footercont" class="bodycontainer clearfix" data-uk-scrollspy="{cls:'uk-animation-fade', delay: 300, repeat: true}">

<p class="backtotop"><a title="" href="#backtotop"><span class="fa fa-angle-double-up"></span></a></p>
<div id="socialmedia" class="clearfix">
<ul>
<li><a title="" href="https://www.facebook.com/pages/Optimus-Time/285426574991859?ref=hl" rel="external"><span class="fa fa-facebook"></span></a></li>
<li><a title="" href="https://twitter.com/OptimusTime" rel="external"><span class="fa fa-twitter"></span></a></li>
<li><a title="" href="https://plus.google.com/u/0/105675961968966324624" rel="external"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

validarcorreo.js

Cita:

// Validar Correo
$(document).ready(function(){

function validar_email(valor)
{
// creamos nuestra regla con expresiones regulares.
var filter = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/;
// utilizamos test para comprobar si el parametro valor cumple la regla
if(filter.test(valor))
return true;
else
return false;
}
// cuando presionamos el boton verificar
$("#verificar").click(function()
{
if($("#email").val() == '')
{
alert("Ingrese un email");

}else if(validar_email($("#email").val()))
{
alert("Email valido");
}else
{
alert("El email no es valido");
}
});

});

caricatos · #2 (**permalink**) 07/10/2014, 02:17

Hola:

Puedes simplificar:

Código Javascript:

Ver originalvar filter = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/;
function validar_email(valor) {
return filter.test(valor);
}

Una corrección: la página no se recarga, lo que pasa es que se envía el formulario.

La semántica de los botones del tipo submit es enviar formularios, o sea que si no quieres que se envíe, evita usar botones del tipo submit...

Veo que en otra parte de la página tienes otro botón submit sin formulario... deberías preocuparte en controlar esos detalles.

Saludos