Como Validar un Formulario con React JS 16.13.1 – Parte 2 (Final)

5 minuto(s)

Demo Github

En la anterior parte Validando un Formulario con React JS 16.13.1 – Parte 1 creamos un nuevo proyecto con React JS, definimos los estados locales en el constructor y escribimos un método el cual valida todos los campos del formulario, pero para que este método funcione correctamente debemos escribir otros métodos, junto con otros detalles y en este Parte 2 y última trabajaremos en ello. 

Partes

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

Antes de continuar, te invito a escuchar el Podcast: “Herramientas Online Para El Trabajo En Equipo”:

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como Validar un Formulario con React JS 16.13.1 – Parte 2 (Final).  

Cuando el formulario ha sido llenado de datos correctamente por el usuario, procedemos a verificar esto, dentro de un método que voy a crear llamado enviarFormulario()


En el método enviarFormulario() verifico si esta todo correcto, si es así, entonces cambio el estado de la variable estado al valor booleano true y muestro un mensaje al usuario, este mensaje lo he definido en el método mensajeEnviado() el cual veremos a continuación.

En el método mensajeEnviado() tengo una variable llamada enviado, en donde recibo el estado que sería el valor booleano true, este estad lo cambié en el método enviarFormulario().

Entonces como el estado de la variable enviado esta en true, pues muestro el mensaje Mensaje Enviado Satisfactoriamente !


Al siguiente método le pondré de nombre detectarCambio() y en el detecto cuando un campo del formulario HTML es llenado de datos, esto hace que el estado del campo cambie.


Por último renderizamos el formulario HTML (Algunos elementos tiene nombres de clases de Bootstrap 4), tu puedes usar o no Bootstrap 4, esto depende de ti, la validación no se verá afectada, ya que React JS trabaja de manera independientemente.


En el renderizado del formulario HTML, puedes ver que el formulario llama al método enviarFormulario(), este método es llamado cada ves que el usuario envía el formulario (onSubmit) o cada ves que presiona el botón para enviar el formulario.


Asimismo en cada campo del formulario hago uso del evento onChange() para que cada vez que el estado del campo cambie o si hay un dato dentro de el, pues llame al método detectarCambio() y valide el campo.

En el en atributo value almaceno el estado del campo para que sea validado y debajo del campo he colocado un elemento <span></span> en donde se mostrará el mensaje de error cuando el campo sea validado.


Por último si se ha validado correctamente los campos del formulario, muestro el mensaje Mensaje Enviado Satisfactoriamente ! el cual lo definí en el método mensajeEnviado()


Bien eso es todo, si abro el formulario en el navegador, se validan todos los campos al presionar el botón Aceptar. 

Al inicio de esta segunda y última parte puedes ver una Demo y el repositorio GitHub con el código del proyecto.

Conclusión

La validación que muestro en este tutorial puede servirte como base para llevar acabo validaciones más complejas o avanzadas. Ya tienes la idea ahora solo depende de ti, no te rindas. 

Nota

  • Los pasos mencionadas y el código utilizado en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a React JS y JavaScript.
  • 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.