No recargar la web tras petición AJAX

[Anonimo12]

Buenas:

Estoy creando un formulario que, antes de enviar nada, valida los datos con Javascript. Hago varias validaciones correctamente, así que hasta ahi todo bien.

El tema está en que también tengo que comprobar si el correo que ha introducido el usuario ya se encuentra en la base de datos, por tanto se debe hacer con AJAX porque tengo que ejecutar un fichero PHP sin recargar la web. Este es el código:

Código Javascript:

function validarCorreo() {
 
    var email = document.getElementsByName("c_email")[0].value; //Obtengo el email que ha introducido el usuario
 
            $.ajax({
                type: "post", //Petición por POST
                url: "./account/checkCreateErrors.php", //Fichero PHP que necesito ejecutar para comprobar si el email ya existe
                data: { "c_email" : email }, //Le envío el email como parámetro
                success: function(result) { //Tras obtener el resultado ->
                    if(result == "exist") { //Si el correo existe muestro un mensaje de error y devuelvo false para que no se envíe el formulario
                        var p = document.getElementsByName("c_error_email");
                        p[0].style.height = "auto";
                        p[0].style.opacity = 1;
                        return false;
                    }
                    else { //Si no existe oculto el mensaje de error
                        var p = document.getElementsByName("c_error_email");
                        p[0].style.height = "0px";
                        p[0].style.opacity = 0;                     
                    }
                }
            });
}
 

Se hace todo a la perfección (tanto la comprobación como la obtención del resultado y la impresión del mensaje de error), el único inconveniente es que ¡pase lo que pase me recarga la web!.

Como podéis observar, si el correo ya existe se devuelve "false" lo cual lo recibe el submit del formulario:

Código HTML:

<input name="enter" type="submit" value="Enter" onclick="return checkCreateErrors()">
 

En todas las validaciones, si recibe "false", no hace nada y por tanto no se recarga la web. Pero en el caso de esta que utilizo AJAX (no sé si tendrá algo que ver), devuelva lo que devuelva siempre se ejecuta el submit.

Seguro que es una chorrada pero no lo veo. Un saludo.

[caricatos]

Hola:

No sé que librerías usas; deberías indicarlo (mejor aún deberías haber publicado el tema en el subforo adecuado)...
las peticiones ajax no recargan la página si están bien... las opciones son que la petición la hagas desde un enlace o de un botón submit, y luego no canceles el evento o que tras un error se aborte la ejecución antes de la cancelación, y en consecuencia siga la ejecución normal (se enlace o se envíe el form).

En tu código muestras una función que no se utiliza, en cambio asocias al submit una función que no nos muestras.

Saludos

[Hugo_Euan]

Cambia el Submit por un botón normal, cuando se te dé el caso de direccionamiento hazlo mediante javascript

[Anonimo12]

Hola:

No sé que librerías usas; deberías indicarlo (mejor aún deberías haber publicado el tema en el subforo adecuado)...
las peticiones ajax no recargan la página si están bien... las opciones son que la petición la hagas desde un enlace o de un botón submit, y luego no canceles el evento o que tras un error se aborte la ejecución antes de la cancelación, y en consecuencia siga la ejecución normal (se enlace o se envíe el form).

En tu código muestras una función que no se utiliza, en cambio asocias al submit una función que no nos muestras.

Saludos

Cierto, me he equivocado al escribir en el post el nombre de la función en el botón, pero no hay más que cambiar eso, aquí está el código completo:

Código Javascript:

function validarCorreo() {
     
        var email = document.getElementsByName("c_email")[0].value; //Obtengo el email que ha introducido el usuario
     
                $.ajax({
                    type: "post", //Petición por POST
                    url: "./account/checkCreateErrors.php", //Fichero PHP que necesito ejecutar para comprobar si el email ya existe
                    data: { "c_email" : email }, //Le envío el email como parámetro
                    success: function(result) { //Tras obtener el resultado ->
                        if(result == "exist") { //Si el correo existe muestro un mensaje de error y devuelvo false para que no se envíe el formulario
                            var p = document.getElementsByName("c_error_email");
                            p[0].style.height = "auto";
                            p[0].style.opacity = 1;
                            return false;
                        }
                        else { //Si no existe oculto el mensaje de error
                            var p = document.getElementsByName("c_error_email");
                            p[0].style.height = "0px";
                            p[0].style.opacity = 0;                    
                        }
                    }
                });
    }
 

Código HTML:

<input name="enter" type="submit" value="Enter" onclick="return validarCorreo()">
 

En cuanto a la librería, importo Jquery en su última versión:

Código HTML:

<head>
...
<script type="text/javascript" src="./resource/js/jquery-2.1.1.min.js"></script>
...
</head>
 

A ver si podéis decirme donde está el error. Un saludo.

[Profesor_Falken]

Buenas,

El problema es que declaras el boton de tipo submit, que envia automaticamente el formulario.

Tienes que usar:

Código Javascript:

<input name="enter" type="button" value="Enter" onclick="return validarCorreo()">
 

Un saludo

[chuidiang]

Hola:

El problema es que validarCorreo() no devuelve nada. Fíjate que validarCorreo() hace una petición ajax, indicando que cuando llegue la respuesta se llame a success() y termina sin devolver nada.

Cuando más adelante llegue la respuesta ajax, se llamara a success() y esta será la función que devuelva true o false y eso no llegará al submit de ninguna forma.

Tendrías que hacer la petición ajax síncrona, es decir, que espere por la respuesta, poniendo algo así

Código Javascript:

$.ajax({
   type: "post", //Petición por POST
   async: false,
   ...
 

de esta forma el código de validarCorreo() quedará "bloqueado" hasta que llegue la respuesta. Tu codigo en success() puede rellenar una variable con true o false según sea o no valido el correo y validarCorreo() hacer después de la llamada a ajax un return de esa variable.

Se bueno.

[caricatos]

Hola:

Que poco me gusta que recomienden evitar los botones submit... un vicio que no me gusta fomentar... además, que primero funcione todo correctamente sin javascript, y luego mejorar la funcionalidad con ajax (o las alternativas que puedan existir)... en resúmen, mantener la accesibilidad...

Saludos

[Anonimo12]

Hola:

El problema es que validarCorreo() no devuelve nada. Fíjate que validarCorreo() hace una petición ajax, indicando que cuando llegue la respuesta se llame a success() y termina sin devolver nada.

Cuando más adelante llegue la respuesta ajax, se llamara a success() y esta será la función que devuelva true o false y eso no llegará al submit de ninguna forma.

Tendrías que hacer la petición ajax síncrona, es decir, que espere por la respuesta, poniendo algo así

Código ASP:

$.ajax({
       type: "post", //Petición por POST
       async: false,
       ...
 

¡Perfecto!, ese era el problema, ya lo he solucionado gracias por la respuesta.

Voy a lanzar otra duda que va en el mismo hilo aunque es mas conceptual que práctica:

Con JavaScript controlo que el formulario se haya rellenado correctamente, sin embargo, no sé si el usuario modificando el código fuente desde su navegador (ya que JavaScript es de lado del cliente y no del servidor) me puede enviar los datos erróneos al reescribir la función.

Mi duda es: ¿Además debería rehacer la comprobación cuando fichero PHP reciba los datos del formulario para evitar insertar en la BD información errónea?, ¿o el navegador de por si evita estos problemas?.

Un saludo.

[Profesor_Falken]

Buenas,

No recomendamos nada, sino que tratamos de dar una solucion a un problema concreto con unos requerimientos concretos.

Desde el momento en el que el requerimiento tecnico pasa por realizar una llamada ajax sin recarga de la pagina, la accesibilidad ya ha pasado a la historia.

No me habia fijado en ese return, pero a mi me parece una solucion mucho mas limpia la de poner el boton a button que la de hacer una llamada sincrona ajax, ya que esta ultima puede dejar tostado el navegador.


Un saludo

[Profesor_Falken]

¿Además debería rehacer la comprobación cuando fichero PHP reciba los datos del formulario para evitar insertar en la BD información errónea?, ¿o el navegador de por si evita estos problemas?.

La comprobacion de los campos se deberia hacer SIEMPRE en el servidor, y a ser posible, tambien en el cliente.


Un saludo

[caricatos]

Hola:

Iniciado por Anonimo12

Mi duda es: ¿Además debería rehacer la comprobación cuando fichero PHP reciba los datos del formulario para evitar insertar en la BD información errónea?, ¿o el navegador de por si evita estos problemas?.

Siempre hemos aconsejado, al menos en estos foros una doble validación, y la más importante la del servidor... el código sería similar.

Iniciado por Profesor_Falken

...

Desde el momento en el que el requerimiento tecnico pasa por realizar una llamada ajax sin recarga de la pagina, la accesibilidad ya ha pasado a la historia.

¡NO!, Usar Ajax no tiene nada que ver con la accesibilidad... puedes hacer una búsqueda y verás que es muy normal.

Saludos

[Profesor_Falken]

¡NO!, Usar Ajax no tiene nada que ver con la accesibilidad... puedes hacer una búsqueda y verás que es muy normal.

no tiene nada que ver con la accesibilidad???? que afirmacion tan rotunda! Sobre todo cuando una simple busqueda solo retorna resultados precisamente sobre los multiples problemas que presenta Ajax para la accesibilidad si no se utiliza con un extremo cuidado:


http://webaim.org/techniques/ajax/
http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/ajax-accessibility.shtml
http://www.paciellogroup.com/blog/2008/02/ajax-and-screen-readers-content-access-issues/
http://www.smashingmagazine.com/2010/02/10/some-things-you-should-know-about-ajax/


Un saludo

[caricatos]

Hola:

Iniciado por Profesor_Falken

... multiples problemas que presenta Ajax para la accesibilidad si no se utiliza con un extremo cuidado...

Evidentemente todos podemos hacer chapuzas...

Que pena que las referencias no estén en español...

Otra referencia, un apunte mio: Ajax accesible...

Hay veces que obligatoriamente debemos depender de javascript... incluso en esos casos tenemos la complicidad de la etiqueta noscript. pero cuando "generalizamos", debemos impedir discriminar a nuestros visitantes... no es tan difícil.

Saludos

[Hugo_Euan]

Yo te recomiendo usar también técnicas de ofuscación para JavaScript, si alguien va a intentar modificar el código, por lo menos que le cueste un poco de trabajo, digo si es que logra entender el código...

además es una buena practica...

Saludos.