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

React JS Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

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: Validando 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.