Problemas validación formularios con AJAX

bienpiyao · #1 (**permalink**) 04/03/2010, 11:27

Buenas gente!!

Os comento mi problema a ver si tiene solución y alguien puede echarme una mano, así que desde ya, muchas gracias.

Mi problema es sencillo. Estoy desarrollando una web con html y php, pero quiero usar AJAX para ciertas cosas. El caso es que en la portada de la web tengo el típico botón de Regístrate para registrarse en la web. Cuando pinchamos en él, a través de AJAX, sólo se recarga el centro de la página apareciendo el formulario de registro con 6 campos. Dicho formulario, quiero validarlo usando AJAX, pero cuando pincho en el botón enviar sin haber rellenado nada, en lugar de informarme de los campos sin rellenar, el formulario se envía :S. Ese mismo código, lo uso como link aparte, es decir, un link de regístrate, pero en vez de usar AJAX para cargar el formulario abro otro .html distinto, y funciona a la perfección. Así que imagino que será problema de haber usado AJAX antes y querer volver a usarlo...no puedo hacer lo que quiero?? Es inviable?? Estoy haciendo algo mal??

Muchas gracias por anticipado y si necesitan más datos para poder ayudarme, no duden en pedirlo, por favor.

SaludoS!!

caricatos · #2 (**permalink**) 04/03/2010, 16:56

Hola:

Si se envía el formulario es porque hay un botón del tipo submit, y el envío no se cancela...

Si quieres que también funcione sin javascript (siempre se puede inhabilitar), tienes que poner en el tag form:
onsubmit="return validar(this)"...

El secreto es que dentro de la función validar siempre debes terminar con return false, y el resto del cuerpo de la función, las validaciones javascript, y si las pasan, hacer la petición Ajax (supongo que para chequear usuario y/o password...)

Saludos

bienpiyao · #3 (**permalink**) 05/03/2010, 04:49

Hola caricatos, en primer lugar, gracias por responder.

No entiendo muy bien lo que dices, lo del tema del botón submit sí, te pego el código que es muy sencillo y a ver si me puedes echar una mano, si no, no pasa nada.

Muchas gracias desde ya.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Formulario de contacto en AJAX</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<script type="text/javascript" src="funcionesFormularios.js"></script>
</head>

<body>
<div id="formContenedor">
<form id="formulario">
<div id="transparencia">
<div id="transparenciaMensaje">aaaaaaaaaaaa</div>
</div>
<table>
<tbody>
<tr>
<td class="label">Nombre:</td>
<td class="campo"><input class="inputNormal" type="text" id="inputNombre"></td>
<td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Nombre')"></td>
</tr>
<tr>
<td class="label">Empresa:</td>
<td class="campo"><input class="inputNormal" type="text" id="inputEmpresa"></td>
<td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Empresa')"></td>
</tr>
<tr>
<td class="label">Teléfono:</td>
<td class="campo"><input class="inputNormal" type="text" id="inputTelefono"></td>
<td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Telefono')"></td>
</tr>
<tr>
<td class="label">Mail:</td>
<td class="campo"><input class="inputNormal" type="text" id="inputCorreo"></td>
<td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Correo')"></td>
</tr>
<tr>
<td class="label">Comentarios:</td>
<td class="campo"><textarea class="inputNormal" id="inputComentario"></textarea></td>
<td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Comentario')"></td>
</tr>
</tbody>
</table>
<br>
<div>
<button id="botonEnviar" onClick="validaForm()" type="button">Enviar</button>
<button type="reset">Borrar</button>
</div>
</form>
</div>


<div id="mensajesAyuda">
<div id="ayudaTitulo"></div>
<div id="ayudaTexto"></div>
</div>
</body>
</html>

Lo de mensajesAyuda es porque hay unos iconos que cuando pasas el ratón por encima, aparece un mensaje.

Si necesitas ver otro archivo o código, no dudes en pedirlo, por favor.

Muchas gracias.

SaludoS!!

AngelBoutto · #4 (**permalink**) 05/03/2010, 13:46

Bienpiyao, vi tu codigo en funcionamiento y parece mas bien un formulario de contacto, es eso lo que necesitas?

ElJavista · #5 (**permalink**) 06/03/2010, 10:17

Ok, te daré unas luces, yo he visto y hasta he hecho eso de validar con Ajax y enviar de manera tradicional y me parece mala rutina, se debe validar con Ajax solo si no se puede hacer solamente usando JavaScript. Por su puesto también debe haber una validación en el PHP.

Entonces puedes hacer dos cosas: validar con JavaScript o si lo amerita, validar con Ajax, pero si validamos con Ajax y enviamos el formulario de manera tradicional eso rompe con dos preceptos de Ajax:

En primer lugar el ajax pretende evitar la recarga y eso harás precisamente después de validar, muy malo.

En segundo lugar harás dos envíos, el primero con Ajax y el segundo de manera tradicional con lo cual en lugar de acortar el tiempo de procesamiento se incrementará, lo cual es completamente opuesto a lo que Ajax pretende servir. Se supone que con Ajax se debe acortar el tiempo de procesamiento.

Si es absolutamente necesario hacer la validación con Ajax, deberías envíar con Ajax el formulario y hacer el proceso con el mismo Ajax y devolver al respuesta con ese solo proceso, o sea que con Ajax guardas los datos del formulario. Un formulario solo con Ajax.

Para hacer eso debes evitar que el form se envíe al presionar el botón submit, no sabes qué botón es ese? pues ese que tiene esta forma:

<input type="submit" ...

Si no haz empleado ese código talvez hayas hecho esto:

<button>Enviar</button>

Si no colocas el atributo type="button" el firefox asume que es un submit, o sea, un botón de envío de formulario. Lo que tienes que hacer es simplemente colocar esto en la etiqueta form:

<form onsubmit="return false">

Con lo cual no se enviará nunca tu formulario de manera tradicional, envíalo solo con Ajax, y si no hace falta validarlo con Ajax, valida solo con JavaScript y envíalo de manera tradicional. Suerte!