Ir al contenido principal

Validar un formulario mediante Javascript

Hoy os dejo un sencillo ejemplo de javascript (made by subires) para validar un formulario comprobando que los datos son correctos antes de enviarlos, reduciendo así el tiempo de carga en nuestro servidor al avisar a los usuarios de que algun campo está vació o erróneo antes de procesar el formulario.


Las comprobaciones que realiza son las siguientes:

  •  Comprueba que los campos obligatorios no estén vacíos (nombre, dni y email)
  •  Comprueba que el dni es CORRECTO (No vale solo con 8 números y una letra al azar)
  •  Comprueba que el formato del e-mail es correcto.



El código del script es el siguiente:


CLICK AQUÍ para comprobar como funciona la validación


Hay que tener en cuenta los siguiente detalles para que el script anterior funcione correctamente:

  1. El input de nombre debe de tener el id nombre
  2. El input de dni debe de tener el id dni
  3. El input de teléfono debe de tener el id tfn
  4. Para escribir el mensaje de error, al lado de cada input debe de haber un div vacío con el id correspondiente.
  5. Para el mensaje de error de nombre el id del div será erno
  6. Para el mensaje de error de dni el id del div será erdn
  7. Para el menaje de error de el id del div será erem
  8. Y por último, dentro de la etiqueta <form > debe aparecer el atributo onsubmit con el valor return validar()

......
Artículos relacionados:

Comentarios

  1. Muchas gracias, seria muy bueno que introdujeras el codigo en Javascript, para limpiar los mensajes, de todas formas este código es un muy buen ejemplo de lo que se puede conseguir con unas cuantas lineas de código, Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Daniel,
      para limpiar todos los campos de texto del formulario no es necesario añadir código Javascript, sólo una línea de html:
      "<"input type="reset" value="Borrar" "/>"

      De todas formas he actualizado el ejemplo para que se vea más claro.
      Un saludo!

      Eliminar
  2. En el caso de validar el DNI, si al validar es erroneo como vaciar el campo DNI?

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Solucionar "Ha sido imposible conectar al servidor FTP xxxx.xxxx.com:21" en WordPress

Si obtienes un error indicándote "Ha sido imposible conectar al servidor FTP xxxx.xxxx.com:21" o “Ha sido imposible localizar el directorio de [...]“ cuando intentas actualizar o instalar algún plugin, theme o el mismo WordPress -mediante actualización automática- se debe a un problema interno de WordPress, por el cual no es capaz de encontrar el directorio del blog.
A continuación vemos el motivo y la solución al inconveniente:


Causa

Sucede generalmente cuando el directorio de instalación de WordPress se encuentra al menos 2 niveles inferiores al root por FTP. Se obtiene un mensaje de error similar a algunos de los siguientes:

Red inalámbrica segura con RADIUS

Una de las opciones más seguras que permite controlar la autenticación de usuarios se puede realizar mediante la configuración de un servidor Radius. Radius o Remote Authentication Dial-In User Server, es un protocolo de autenticación y autorización para aplicaciones de acceso a la red o movilidad IP. Utiliza los puertos 1812 y 1813 UDP para establecer sus conexiones.

En esta entrada os mostraré como realizar la instalación y configuración de un servidor Radius bajo GNU/Linux llamado freeradius, para autenticar conexiones que provienen de un punto de acceso TP-LINK TL-WA501G.

Instalar PAINT en Ubuntu

KolourPaint es un editor de imágenes libre fácil de entender y usar disponible en entornos GNOME, KDE, Xfce, etc...


Es un excelente sustituto para Paint, para instalarlo ejecutamos en un terminal: