Comment ajouter la validation du formulaire de réaction

Si vous pensiez être ici pour apprendre la validation avec KendoReac t c’est un autre sujet beaucoup plus simple, que vous trouverez ici: Prise en main de KendoReact: validation des formulaires

Nous allons plutôt apprendre à créer votre propre implémentation à l’aide de formulaires HTML, React et JavaScript pour valider notre formulaire. C’est un excellent sujet que de traiter de l’apprentissage du fonctionnement interne des composants de React UI, c’est l’objet de ma React Learning Series .

Ce tutoriel devrait être idéal pour les développeurs de niveau débutant à intermédiaire de React, si vous sont familiers avec HTML, CSS et les bases de React. Commençons par cette démonstration de StackBlitz:

* Ouvrez cette démonstration de StackBlitz et suivez-la!

Une des choses à noter dans le formulaire que j’ai configuré pour vous est que nous avons spécifié trois types d’entrées différents. Nous avons une entrée nom complet email et password . Il est très important d’utiliser le bon type sur chaque entrée car le comportement qu’il procure correspond à ce que les utilisateurs attendent d’un formulaire professionnel. Cela aidera leurs remplisseurs de formulaires et permettra un mot de passe obscurci, ce qui est également assez standard.

Sur l'étiquette Form et sur les entrées individuelles que j'ai placées noValidate ( noValidate dans jsx se transforme en novalidate en html). Ajouter ceci ne désactive pas la validation de formulaire. Cela empêche uniquement le navigateur d'interférer lorsqu'un formulaire invalide est soumis afin que nous puissions nous «interférer».

Nous allons construire notre validation de formulaire à partir de ce point et appliquer nous-mêmes toute la logique JavaScript. Actuellement, le formulaire n'est ni soumis ni travaillé, il n'a été que stylé.

La première chose que nous souhaitons ajouter est un constructeur de notre composant Register :

 {props ').
  super (accessoires);
  this.state = {
    nom complet: null,
    email: null,
    mot de passe: null,
    les erreurs: {
      nom complet: '',
      email: '',
      mot de passe: '',
    }
  };
}

Notre état contiendra une propriété pour chaque entrée ainsi qu'un objet ( erreur ) qui contiendra le texte de nos messages d'erreur. Chaque entrée de formulaire est également représentée dans cet objet d'erreur. Si nous détectons que l'entrée est invalide, cette chaîne aura une valeur, sinon la valeur sera vide ou égale à zéro. Si ce n'est pas zéro, nous allons créer une logique pour afficher le message à l'utilisateur.

Ensuite, nous allons ajouter la fonction handleChange () . Cela se déclenche chaque fois que nous entrons un personnage dans l’une des entrées de notre formulaire. À l'intérieur de cette fonction, une instruction switch gère chaque entrée avec respect, en vérifiant en permanence si nous avons par exemple atteint une limite de caractères minimale ou trouvé une correspondance RegEx. Chaque fois qu'un personnage est entré, un événement est transmis à cette fonction en cours de déstructuration. La mission de destruction supprime nos valeurs de l'événement . Cible et les assigne aux autorités locales.
variables ( name et value ) à l'intérieur de notre fonction.

Dans la déstructuration, la ligne de code ci-dessous:

 const {nom, valeur} = event.target;

équivaut à:

 let name = event.target.name;
let value = event.target.value;

Ajoutons la fonction handleChange () . Il devrait arriver juste avant la méthode de rendu de notre classe Register :

 handleChange = (event) => {
  event.preventDefault ();
  const {nom, valeur} = event.target;
  let errors = this.state.errors;

  commutateur (nom) {
    cas 'nom complet':
      errors.fullName =
        valeur.longueur <5
          ? 'Le nom complet doit comporter 5 caractères!'
          : '';
      Pause;
    cas 'email':
      errors.email =
        validEmailRegex.test (valeur)
          ? ''
          : 'L'email n'est pas valide!';
      Pause;
    cas 'mot de passe':
      errors.password =
        valeur.longueur < 8
          ? 'Password must be 8 characters long!'
          : '';
      break;
    default:
      break;
  }

  this.setState({errors, [name]: value}, ()=> {
      console.log (erreurs)
  })
}

Le code ci-dessus entrera dans le bon cas de commutation en fonction de l'entrée que vous saisissez. Il vérifiera que vous avez entré la longueur correcte pour cette entrée ou, dans le cas de l'e-mail, vérifiera un RegEx que nous Vous devez toujours créer et vous assurer qu'elle correspond à l'expression régulière qui recherche le format correct du courrier électronique.

Nous n'entrerons toutefois pas dans les expressions régulières; J'ai trouvé mon expression dans une réponse de StackOverflow qui présente quelques solutions RegEx décent pour valider les courriels.

Juste au-dessus de notre classe Register nous pouvons ajouter un const . qui contient ce RegEx et nous pouvons ensuite appeler .test () sur cette chaîne RegEx pour voir si notre entrée correspond et renvoie true, sinon nous ajouterons un message d'erreur à notre copie locale de notre état d'erreur. [19659017] const validEmailRegex =
  RegExp (/ ^ (([^<>()[] .,;: S @ "] + (. [^<>()[] .,;: S @ "] +) *) | ( ". + " )) @ ([[^<>()[] .,;: S @ "] + .) + [^<>()[] .,;: S @ "] {2,}) $ / i);

Le RegEx est presque impossible à lire, mais soyez assuré qu'il couvre la plupart des cas que nous souhaitons vérifier, y compris l'acceptation des caractères Unicode. Sachez qu’il ne s’agit que d’un test que nous effectuons sur le client et que, dans une application réelle, vous devez tester le courrier électronique côté serveur avec une validation valide en fonction de vos besoins. En fait, la plupart de nos validations fonctionnent déjà. Si nous allons dans notre console pour cette page, nous pouvons voir quels messages d'erreur sont créés jusqu'à ce que nous vérifions chaque validation des entrées:

Comme vous pouvez le constater, dès que nous entrons notre premier caractère dans l'entrée nom complet nous obtenons un message d'erreur. Le fullName L'entrée requiert au moins 5 caractères. Nous voyons que dans notre console jusqu'à ce que nous remplissions les critères, le message d'erreur disparaisse. Bien que nous ne continuions pas à enregistrer ces erreurs dans la console, nous paierions attention dans le code futur sur le fait que nous avons un message d'erreur ou non . Si tel est le cas, nous afficherons ce message d'erreur directement sous l'utilisateur.

Cette démo de StackBlitz est une version enregistrée de notre progression actuelle, mais nous avons encore quelques éléments à connecter.

Notre prochain ordre de travail est de gérer une soumission de formulaire et de fournir une fonction qui, lors de la soumission de formulaire, peut vérifier si nous avons des messages d'erreur à présenter à l'utilisateur.

Nous tenons compte de notre handleChange ( ) la fonction met déjà à jour notre état de composant local avec des erreurs, nous devrions déjà pouvoir vérifier sa validité lors de la soumission du formulaire avec handleSubmit () . Tout d'abord, je souhaite supprimer la déclaration console.log de l'appel setState . Mettons à jour cette ligne au bas de la fonction handleChange () pour lire comme suit:

 this.setState ({errors, [name]: valeur});

Nous allons maintenant créer la nouvelle fonction handleSubmit () et, pour le moment, consigner un message de réussite ou d'échec en fonction de la validité de l'intégralité du formulaire. Ajoutez le code suivant juste en dessous de la fonction handleChange () .

 handleSubmit = (event) => {
  event.preventDefault ();
  if (validateForm (this.state.errors)) {
    console.info ('Formulaire valide')
  }autre{
    console.error ('formulaire non valide')
  }
}

Dans notre gestionnaire pour l'événement submit, nous devons empêcher cet événement de se propager et d'essayer de soumettre le formulaire à une autre page, ce qui provoque une actualisation, puis affiche toutes nos données ajoutées à l'adresse Web. La ligne de code utilisée est la suivante: event.preventDefault () . Si vous ne l'avez pas utilisée auparavant, vous pouvez en prendre connaissance ici: React Forms: Controlled Composants . C’est l’une des meilleures ressources qui explique pourquoi elle est nécessaire dans les formulaires React.

Comme vous pouvez le constater à partir du code ci-dessus, nous devons également ajouter une fonction appelée validateForm à laquelle nous appelons dans l’ordre. pour vérifier la validité. Nous affichons ensuite un message de console valide ou invalide. Nous allons ajouter cette fonction juste en dessous du RegEx créé:

 const validateForm = (errors) => {
  let valid = true;
  Object.values ​​(errors) .forEach (
    // si nous avons une chaîne d'erreur définie sur false
    (val) => val.length> 0 && (valid = false)
  )
  retour valide;
}

À ce stade, nous devrions pouvoir remplir le formulaire au complet et en vérifier la validité.

Nous nous approchons du point de départ, nous avons un formulaire qui soumet et détermine si nous répondons aux critères de chaque entrée et nous sommes en mesure de retourner un état valide ou invalide. C'est bien!

Inside of our Rendu du composant du composant Register et avant le retour, nous devons déstructurer notre objet this.state.errors pour qu'il soit plus facile de travailler avec.

 const {errors} = this.state;

Cela nous permettra d'écrire une logique assez simple sous chaque champ d'entrée pour vérifier si le message d'erreur de ce champ contient un message, si c'est le cas, nous allons l'afficher! Écrivons notre premier sous l'entrée nom complet .

 {errors.fullName.length> 0 &&
   {errors.fullName} }

Faisons maintenant la même chose sous les deux entrées suivantes, d'abord l'entrée de courrier électronique:

 {errors.email.length> 0 &&
   {errors.email} }

Ensuite, nous allons saisir le mot de passe:

 {errors.password.length> 0 &&
   {errors.password} }

C’est ainsi que nous devrions avoir l’intégralité de notre formulaire et alerter l’utilisateur de toute erreur tant que nous avons touché les entrées individuelles. La logique actuelle devrait continuer à afficher nos messages d'erreur jusqu'à ce que nous commencions également à saisir l'entrée. Si nous annulons une entrée et supprimons tout le texte que nous avons saisi, les messages d'erreur resteront tels qu'ils ont été touchés et sont maintenant invalides. . Jetons un coup d'œil au formulaire en action:

Il y a quelques choses que vous pouvez faire ci-dessus et Au-delà de ce que nous avons fait ici. Premièrement, au lieu d’ajouter une étendue sous l’entrée lorsque le formulaire devient invalide, nous pourrions l’avoir toujours là et l’afficher à l’aide d’une classe CSS si elle est invalide. Quelle est la différence? aiderait à supprimer le saut lorsque le message d'erreur arrivera et disparaîtra.

Nous pourrions également avoir une grande section au bas qui affiche toutes les erreurs connues uniquement en appuyant sur le bouton de soumission. Ce sont toutes d'excellentes idées devrait explorer par vous-même maintenant que vous avez une meilleure compréhension de la façon de valider un formulaire.

Enfin, je voudrais faire un lien ci-dessous vers la version finale de notre formulaire dans StackBlitz. Un plus grand nombre est possible, mais c’est un bon point d’arrêt pour regarder et décider exactement comment nous voulons que les choses fonctionnent avant movi ng en avant. Merci d'avoir pris le temps d'apprendre ici avec moi et de vous rappeler que nous avons des composants KendoReact qui facilitent grandement la validation des formulaires. Essayez-les ici !