Como Validar un Formulario con React JS 16.13.1 – Parte 1

6 minuto(s)

Demo

En un Tutorial anterior llamado Como Crear tu primer Formulario en React JS diseñamos un formulario HTML con React JS y utilizamos validaciones de los campos utilizando la validación nativa de HTML 5, pero React JS también nos permite validar un formulario, esto se llama validación reactiva de formulario y en este Post te enseñaré a Como Validar un Formulario con React JS 16.13.1 – Parte 1, vamos con ello. 

Partes

  • Parte 1
  • Parte 2 ( Final – Código fuente: GitHub)

Antes de continuar te invito a leer los siguientes artículos:

Y también te invito a escuchar el Podcast“Dominio del trabajo con Varios Lenguajes de Programación”:

Spotify SoundCloud

Bien ahora continuemos con el Post: Como Validar un Formulario con React JS 16.13.1 – Parte 1

Lo primero que haré es crear un nuevo proyecto con React JS, para esto me ubico en un determinado directorio y ejecuto el siguiente comando:


Yo he creado mi proyecto con el nombre validarformularioreactjs , luego de crear el proyecto React JS me crea un directorio con el nombre que le puse a mi proyecto, es decir validarformularioreactjs.

Dentro de este directorio hay varios directorios y archivos que forman parte del core de React JS y mi aplicación, hay un archivo llamado App.js, este archivo se encuentra en src > App.js


Abro el archivo App.js y borro el contenido por default que React JS agregar cuando creamos un nuevo proyecto, lo primero que haré es definir los elementos y propiedades de mi constructor:


En mi constructor he definido el estado local para campo, error y enviado, los cuales utilizaré en la validación del formulario.

Ahora realizo las validaciones de todos los elementos de mi formulario, los campos que mi formulario tendrá son Nombres y Apellidos, Email, Área o Departamento, Adjuntar Archivo y Mensaje.

Yo realizaré un validación en donde debo detectar si el campo ha sido llenado con datos, tu puedes aplicar expresiones regulares y otros métodos para hacer una validación más especifica o personalizada.

Creo un método llamado validarFormulario() y dentro de el declaro 3 variables llamadas campo, error y formularioValido.

Paso seguido empezaré validando el campo nya el cual es el campo para los Nombres y Apellidos.


Si el usuario no hay ingresado datos en el campo nya y presiona el botón para enviar el formulario, React JS setea una variable la variable formularioValido con el valor booleano false y pues le aparecerá un mensaje diciéndole Por favor, ingresa tus Nombres y Apellidos.

Pero aún faltan otros detalles para que la  validación se lleve acabo correctamente, la imagen anterior es una referencia visual de como se validará el formulario.

El siguiente campo es el Email, para este campo realizaré dos tareas, una verificará si el campo email esta vacío y la otra tarea verificará si el email que ha ingresado el usuario, tiene un formato valido.


Entonces si el usuario no ha ingresado un valor en el campo email, React JS setea la variable  formularioValido con el valor booleano false y le muestra un mensaje diciendo Por favor, ingresa tu correo.

Asimismo cuando el usuario ha ingresado un correo con un formato no válido, analizo si el correo no tiene el arroba y el punto, si es así le muestro el mensaje Por favor, ingresa un correo válido.

Faltan otros detalles para que el formulario valide por completo, pero la imagen anterior es una imagen  referencial de como validará el formulario.

Tal como mencioné más arriba, yo realizaré un validación en donde debo detectar si el campo ha sido llenado con datos, tu puedes aplicar expresiones regulares y otros métodos para hacer una validación más especifica o personalizada, este tutorial es una referencia para hacer validaciones más avanzadas.

Los siguientes campos que toca validar son Área o Departamento, Adjuntar Archivo y Mensaje. Para estos campos usaré la misma manera de validar que apliqué con el campo Nombres y Apellidos


Antes de terminar mi método validarFormulario() seteo el estado de error y retorno el valor en general de la variable formularioValido.


Entonces todo el código de mi método validarFormulario() se vería así:


Bien hasta aquí terminamos la Parte 1 de este tutorial en donde hemos creado un nuevo proyecto en React JS y también creamos el método validarFormulario() el cual se encarga de hacer la validación de los campos del formulario.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente Parte de este tutorial terminaremos de crear los otros métodos y el código del formulario HTML.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.