Validación de formularios en React

En nuestro tiempo, las empresas almacenan, mantienen y analizan los datos para muchos propósitos diferentes.

Ya sea para mantener una base de datos de usuarios, generar informes o cualquier otra cosa, el papel de los datos no puede ser exagerado. Por lo tanto, los datos deben estar estructurados y bien organizados.

Las aplicaciones web impulsadas con React deben usar la validación de formularios para garantizar que las entradas del usuario sigan las convenciones estándar. De esta manera, puede facilitar el viaje del usuario y recopilar los datos de manera organizada.

La validación deficiente de los datos también puede provocar ataques maliciosos, por lo que la implementación de las soluciones adecuadas también puede aumentar la seguridad de sus aplicaciones.

Validación de formularios en React

Para las aplicaciones React adecuadas, la validación de formularios es una característica esencial. Por ejemplo, un correo electrónico debe contener el signo @, un sufijo válido y cumplir con otros criterios.

Evento onChange

La forma más eficiente de implementar la validación de formularios en React es escuchando eventos onChange y manteniendo las entradas del usuario en el estado de su componente. Primero, debe tener entradas controladas, por lo que si tiene dos campos para validar (digamos, nombre y correo electrónico), debe inicializar el estado con los siguientes valores vacíos:

constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}

El estado debe inicializarse en la función constructor() al escribir componentes de clase. También es bueno tener una propiedad errorMessages, donde puede almacenar los mensajes para decirles a los usuarios qué está mal con los valores ingresados.

El primer paso en la validación del formulario debe ser configurar elementos <input> con detectores de eventos onChange. Los cambios en los campos de entrada también se reflejarán automáticamente en el estado.

Nuestro método render() debería verse así:

render() {
    return (
    <form>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    </form>
    )
  }

Esto es un gran comienzo; aún así, necesitamos configurar las condiciones para la validación del formulario y generar mensajes de error. Para eso, creamos una función personalizada validate().

En aras de la simplicidad, estableceremos dos reglas básicas: el nombre debe tener más de 2 letras y el valor del correo electrónico debe contener @. Ahora, toda nuestra aplicación debería verse así:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}
  render() {
    console.log(this.state)
    const validate = () => {
      let inputFields = this.state.inputFields
      let errors = {}
      let validityStatus = true
      if (inputFields["name"].length <= 2){
        validityStatus = false
        errors["name"] = "The name should contain more than two symbols"
      }
      if (inputFields["email"].indexOf("@") === -1 ){
        validityStatus = false
        errors["email"] = "The email should contain @"
      }
      this.setState({errorMessages: errors})
      return validityStatus
    }
    const handleSubmit = (e) => {
      e.preventDefault();
      if (validate()){
        alert("form complete")
      }
      else {
        alert("errors")
      }
    }
    return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <br />
    <button type="submit">Submit</button>
    </form>
    )
  }
}

Una vez enviado el formulario, nuestra función validate() verifica los valores ingresados ​​en los campos y devuelve true si se cumplen todas las condiciones y false si no lo son. Una vez finalizada la comprobación, la función handleSubmit() alerta sobre form complete or errors.

La función también incluye la variable local errors, almacenando los mensajes de advertencia para cada campo de texto. Una vez realizada la comprobación, hace referencia a la variable para actualizar la propiedad de estado errorMessages.

Para mayor comodidad, debajo de cada campo, puede agregar un texto que mostrará el mensaje de error para ese campo. He aquí un ejemplo:

return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <p style={{color: "red"}}>{this.state.errorMessages.name}</p>
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <p style={{color: "red"}}>{this.state.errorMessages.email}</p>
    <br />
    <button type="submit">Submit</button>
    </form>
    )

De esta manera, puede utilizar los mensajes de advertencia en su propiedad de estado errorMessages para dar a los usuarios advertencias menores útiles para ayudarlos a corregir los errores.