#2 Formulario de contacto Creativo – Validaciones con Javascript

En el tutorial pasado creamos un formulario de contacto básico y normal, hicimos la parte del html, las etiquetas form, input, label y textarea. Normalmente un formulario de contacto no debiera de dejarse así, sin ningún tipo de validación  ya que vamos a querer que nos lleguen algunos datos importantes, también que se ingrese lo que es debido y lo que esperamos.

Existe la validación en tiempo real con Javascript (También podemos utilizar la librería Jquery), para controlar un poco este tema en los formularios, aquí vamos a poder controlar los campos con tipos de entrada (fechas, números, url y direcciones de correo), y decirle al usuario en tiempo real que debe corregir sus datos antes de ser enviado. Estas validaciones con Javascript no deben de ser la definitivas ya que si el usuario desactiva el Javascript del navegador, esto que hacemos no tendra ningún valor, para esto tenemos que validar del lado del servidor, pero no esta demas la ayuda de javascript ya que pocas las personas que desactivan de su navegador el javascript.

Vamos a seguir usando el formulario que hicimos en el tutorial pasado (Formulario de contacto Creativo con Html5 tipo sobre de carta), si recordamos este formulario no tiene ningún tipo de validación, así que vamos a comenzar.

Lo primero es crear el archivo .js y vincularlo al documento html dentro de su <head>.

1 – Validaciones Visuales

En el formulario tenemos campos obligatorios (Nombre, Email y asunto), lo que vamos a hacer es que cuando el usuario de clic en el campo de texto y salga de el, el programa nos compruebe que se ha escrito algo, de no ser así  que muestre que algo esta mal. Esto es comprobar de una manera vusal de que algo esta ya sea mal o bien.

Lo que vamos a hacer es capturar el onBlur del campo, es decir cuando salga de foco, es decir cuando salga del campo, revisamos lo que ha hecho el usuario en este campo con una función que llamamos con el valor del onBlur y su parámetro, seria algo mas o menos asi (esto solo para los campos abligatorios):

validando formulario onblur

Ahora vamos al archivo form.js y creamos la función (revisar) que nos va a controlar la validación.

En esta función revisar lo que hacemos es recibir un elemento y ver si hay algo colocado dentro de el y ejecute un par de clases dependiendo la situación. Esto lo hacemos verificando el valor del formulario por medio de value, primero si el value o valor esta vacío ejecute la clase error, si no esta vacío ejecute la clase .form-input que es la clase de los campos por defecto, es decir que no haga nada.

Lo siguiente es crear la clase error en el documento Css

Para la clase error, mantenemos las características visuales, los estilos de los input y solamente cambios el color del borde y fondo.

2 – Validar el campo Email

No podemos saber si la dirección de Email ingresada es valida, lo que si podemos hacer es que la ingresada sea de formato valido, esto lo hacemos asi:

En el onBlur del campo Email llamamos otra función para comprobar formato de email esta la llamé revisaremail(this) y la separamos con ;

En form.js hacemos la función  revisaremail.

En la anterior función lo que hacemos es verificar el campo cuando no este vacío es decir cuando el usuario ingrese algo este tiene que ser un email o su formato habitual, esto lo hacemos con las expresiones regulares, que es ver si un texto o string cumple un patrón en este caso los patrones de Email. (que este string tenga una @, un punto después y despues mínimo dos letras etc..), esto lo podemos hacer con cualquier campo, el de telefono, Numero de identificación etc. En este caso, si el patron no se cumple muestre el input con la clase error y si esta correcto, si se cumple el patrón quede normal con la clase normal indicando que esta correcto.

Nota:

Hasta ahora las validaciones son visuales por medio del onblur de cada input, pero si un usuario no da clic en un campo, si no que le da enviar al formulario lo va a poder hacer por que no hizo onblur en los campos. Para esto tenemos que hacer otra validación importante,  que es validar el onsubmit, es decir cuando le de al botón enviar.

3 – Validar el envio del formulario

Para esto hacemos lo siguiente:

En la etiqueta form del formulario agregamos el onsubmit con la función validar, con return devolvemos el valor si es falso si algo en algún campo fallo, y esto nos sirve para detener el envió del formulario.

Vamos al archivo form.js y añadimos el siguiente código o la siguiente función:

Con la anterior función evaluamos los campos uno por uno, le decimos que si el campo esta vacío muestre un mensaje por medio del alert y retorne fals, y así lo repetimos con todos los campos, pero si todo esta bien, al final devolvemos true, ahora si se puede enviar el formulario.

Y esto es todo amigos, podemos seguir haciendo funciones para controlar mejor cada entrada, ya esto lo dejo en ti, solamente recuerda que esta validación no debe de ser la definitiva, ya que el usuario puede tener el Javascript desactivado en su navegador y podrá enviar el formulario sin problemas, para un envió seguro vamos a tener que usar la validación del lado del servidor, que veremos en un siguiente tutorial.

Nos vemos en el siguiente tutosytips.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

7 Respuestas

  1. Juan dice:

    gracias muchas, por fin estoy viendo la luz al final del túnel, seguí muchos tutoriales por dos días y este fue el que sacó a flote,

  2. Jorge dice:

    Hola, me gusto mucho y que bueno y meagarada que gente aporte. quiero hacerte estas preguntas, ya que desde la universidad(Hace mas de 8 años) no he tocado nada de la programación pero por lo mucho que esto me gusta quiero retornar, y para empezar quiero hacer mi pagina con html5, JavaScript pero no con php, no se si en lugar de php pueda usar la tecnología de asp o jsp de java? Gracias por el aporte y si tienen ligas donde pueda profundizar en HTML5 y JavaScript selos agradexere mucho. Saludos

    • Hola Jorge, alternativas a php?, Python hoy en dia creo que es la mejor alternativa a php, es joven, crece cada dia y se está haciendo popular por su sintaxis fácil y simple y por su tecnologia, y para profundizar conceptos de HTML5 y JavaScript, jQuery, CSS3 etc, Yo recomiendo http://www.w3schools.com/, saludos.

  3. Inés dice:

    Excelente tutorial. Me ayudo muchisimo para hacer mi formulario.
    Estoy intentando hacer la validación de javascript para un numero de telefono valido, lo que me intersa es que ingresen nueve numeros, sin importar los prefijos para no discriminar entre fijo y movil.
    ¿Qué me aconsejas? Por ahora no he dado con nada que me sirva.
    Un saludo.

    • Hola Inés, hay muchas maneras para hacer esto, incluso html5 tiene esa validación incorporada, pero para seguir la linea del tutorial, las validaciones con JavaScript, creo que lo mas facil es crear una función que nos limite el numero de caracteres del campo a 9, y que nos valide que en ese campo solo se puedan ingresar numeros, ej: con isNaN. si no se cumple, aplica la clase error, si no, la clase form-input que indica que todo esta bien.
      Me cuentas como te va con esto, saludes.

  4. 2crojas dice:

    hermano!! creo anteriormente te habia preguntado sobre el psd ahora te pregunto por el formulario, debido a que no se nada de php puedo combinar el js de tu tuto con un form action=”mailto”