JMiur [E]

Si utilizamos un Formulario de Contacto, es bastante normal recibir mensajes erróneos o en blanco. Gente que prueba a ver de que se trata o simplemente se equivoca.

Utilizando algunas rutinas JavaScript muy sencillas, podemos evitar algunas de estas molestias, verificando la entrada de los datos e impidiendo su envío si no se cumplen ciertas condiciones.

Esta es una demostración de su funcionamiento, no se enviará el formulario si la una dirección de mail no es válida o si no hay un mensaje escrito. Por supuesto, el formulario es falso y ningún dato se enviará a ninguna parte:


Email:




El script puede descargarse desde aquí y este es su contenido:
var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
function verificarForm(fmail,fmsg){
if (fmsg.value == "") {
alert("¿Qué pasa, no tiene nada qué decir?");
return false;
}
var returnval=emailfilter.test(fmail.value)
if (returnval==false) {
alert("Ingrese una dirección de correo válida.")
fmail.select()
}
return returnval
}
Los textos de los mensajes de alerta pueden ser modificados sin inconvenientes.

Para utilizarlo, imaginemos que este es el código del formulario:
<form name="DemoContacto" method="post"  .......... >
Email: <input name="demoMail" size="35" type="text">
<textarea name="demoMensaje" rows="10" cols="60"></textarea>
<input value="Enviar"  type="submit"
onclick="return verificarForm(this.form.demoMail,this.form.demoMensaje)">
</form>
Lo que haremos es interceptar el evento click del botón de envio, verificar el contenido y si todo es correcto, ejecutarlo. En esa instrucción, sólo debemos cambiar los nombres de los controles por los que utilicemos en nuestro formulario:

this.form.nombreMAIL,this.form.nombreMENSAJE

7 comentarios:

JSAM  

Que blog tan bueno, felicitaciones. Todo es realmente interesante.

Responder
EsmeraldasBlog  

interesante tu post,lo meterè a la prueba!
gracias.

Responder
Begoña  

Gracias por vuestros materiales, me son de gran ayuda pero quisiera saber dónde exactamente insertais el nuevo código.
Gracias

Responder
JMiur  

Tienes razón debería haberlo puesto.

El script puede colocarse en el header de la plantilla, por ejemplo, antes de la etiqueta </head>, de esta manera:

<script type='text/javascript'>
.......... aquí el código .........
</script>

Responder
Paco Lozano  

El script me funciona perfectamente en Firefox, pero no en Internet Explorer. ¿Alguna idea?

Responder
JMiur  

He vuelto a probarlo en ambos navegadores y no veo que exista ese problema. En teoría no debería haberlo ya que no tiene instrucciones ambiguas.

¿Se muestra algún tipo de error?

Responder
Paco Lozano  

No, simplemente muestra la alerta de error y, al aceptar, envía el mensaje con errores y todo.
Pero si a tí te funciona no te preocupes, probablemente se deba a algún error mío. Repasaré lo que he hecho.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR