Validation du formulaire React

À notre époque, les entreprises stockent, conservent et analysent les données à de nombreuses fins différentes.

Que ce soit pour maintenir une base de données d’utilisateurs, générer des rapports ou toute autre chose, le rôle des données ne peut pas être surestimé. Ainsi, les données doivent être structurées et bien organisées.

Les applications Web alimentées par React doivent utiliser la validation de formulaire pour s’assurer que les entrées de l’utilisateur respectent les conventions standard. De cette façon, vous pouvez faciliter le parcours utilisateur et collecter les données de manière organisée.

Une mauvaise validation des données peut également conduire à des attaques malveillantes, la mise en œuvre de solutions appropriées peut donc également augmenter la sécurité de vos applications.

Validation du formulaires React

Pour des applications React appropriées, la validation de formulaire est une fonctionnalité essentielle. Par exemple, un email doit contenir le signe @, un suffixe valide, et répondre à d’autres critères.

Événement onChange

Le moyen le plus efficace d’implémenter la validation de formulaire dans React consiste à écouter les événements onChange et à maintenir les entrées utilisateur dans state de votre composant. Tout d’abord, vous devez avoir des entrées contrôlées, donc si vous avez deux champs à valider (disons, nom et email) vous devez initialiser l’état avec les valeurs vides suivantes :

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

L’état doit être initialisé dans la fonction constructor() lors de l’écriture des composants de la classe. Il est également bon d’avoir une propriété errorMessages, où vous pouvez stocker les messages pour indiquer aux utilisateurs ce qui ne va pas avec les valeurs saisies.

La première étape de la validation du formulaire doit être de configurer les éléments <input> avec les écouteurs d’événement onChange. Les changements dans les champs de saisie seront également automatiquement reflétés dans l’état.

Notre méthode render() devrait ressembler à ceci :

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>
    )
  }

C’est un bon début; Néanmoins, nous devons définir des conditions pour la validation du formulaire et générer des messages d’erreur. Pour cela, nous créons une fonction validate() personnalisée.

Par souci de simplicité, nous allons mettre en place deux règles de base : Le nom doit être plus long que 2 lettres et la valeur de l’e-mail doit contenir @. Maintenant, toute notre application devrait ressembler à ceci :

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>
    )
  }
}

Une fois le formulaire soumis, notre fonction validate() vérifie les valeurs saisies dans les champs et renvoie true si toutes les conditions sont remplies et false si elles ne le sont pas. Une fois la vérification terminée, la fonction handleSubmit() alerte soit form complete soit errors.

La fonction inclut également en local la variable errors, stockant les messages d’avertissement pour chaque champ de texte. Une fois la vérification effectuée, il référence la variable pour mettre à jour la propriété d’état errorMessages.

Pour plus de commodité, sous chaque champ, vous pouvez ajouter un texte qui affichera le message d’erreur pour ce champ. Voici un exemple :

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 cette façon, vous pouvez utiliser les messages d’avertissement dans votre propriété d’état errorMessages pour donner aux utilisateurs des avertissements mineurs utiles pour les aider à corriger les erreurs.