Uno de los campos más comunes, cuando hacemos formularios web, es el de la dirección de e-mail. Imaginemos un alta de usuario, un libro de visitas, una respuesta en un blog,… Y lo más normal será que enviemos algún correo a dicha dirección en un momento posterior.
Es por ello que nos interesa que la dirección de correo sea válida. Cuando hablamos que sea válida queremos decir que sea una dirección real a la que se pueda enviar e-mails. Para comprobar que es válida hay varios mecanismos, en el lado del servidor. Si bien, podemos adelantarnos a la validación en el formulario.
En este caso la validación solo será de formato. Es decir, que el e-mail está bien formado:
[email protected]
Esto nos evitará que la gente ponga cosas que no cuadren con ese formato en el campo de email.
Si bien, hay que recordar que esto no prueba que sea una dirección válida. Ya que cosas como «[email protected]» pasaría la validación, y quizás no sea un e-mail real.
Pero bueno, una validación es una validación.
En este caso nos vamos a apoyar en la librería wForms. Puedes leerte algunos artículos sobre uso de wForms en Linea de Código. Para muestra Campos Obligatorios de un formulario con wForms, Validar que un campo del formulario es alfabético con wForms,…
Lo primero, cargar la librería. Para ello incluimos el siguiente código script en la cabecera de la página.
<script type="text/javascript" src="wforms.js"></script>
Para validar el email será muy sencillo. Y es que solo tendremos que dotarle de la clase «validate-email» al campo imput que queramos que contenga los emails.
Quedándonos la siguiente línea de código:
<input type="text" id="email" class="validate-email">>
Ahora, si intentamos introducir un valor que no tenga el formato del email, nos generará un error.
Lo último que nos queda por hacer es configurar el mensaje que queremos mostrar al usuario cuando el formato del email no sea válido. Para ello podemos modificar la variable JavaScript wFORMS.behaviors[‘validation’].errMsg_email.
<script type="text/javascript"> wFORMS.behaviors['validation'].errMsg_email = "El email introducido no tiene un formato valido"; wFORMS.behaviors['validation'].errMsg_notification = "%% error(s) detectado(s). El formulario no se enviará.nPor favor, chequea la información suministrada."; </script>
