Utilisation de Yup et Formik pour implémenter la validation de la limite de caractères en ligne dans les formulaires React

Implémentation de la validation en ligne dans un formulaire React à l'aide de Formik, Yup et TypeScript

Solution 1 : React Frontend Form avec validation Yup sur la limite de caractères

import React from 'react';
import { Field, Formik, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import TextField from '@material-ui/core/TextField';
// Define the validation schema with Yup, setting max length
const descriptionValidation = Yup.string()
  .max(250, 'Description cannot exceed 250 characters')
  .optional();
// Function component
const DescriptionForm = () => {
  return (
    <Formik
      initialValues={{ description: '' }}
      validationSchema={Yup.object({ description: descriptionValidation })}
      onSubmit={(values) => console.log('Submitted', values)}
    >
      {({ errors, touched, setFieldValue, setFieldTouched }) => (
        <Form>
          <Field
            as={TextField}
            name="description"
            label="Description"
            multiline
            rows={4}
            placeholder="Optional"
            error={Boolean(errors.description && touched.description)}
            helperText={
              errors.description && touched.description
                ? errors.description
                : 'Limit: 250 characters'
            }
            onChange={(event) => {
              const { value } = event.target;
              setFieldValue('description', value);
              if (value.length > 250) {
                setFieldTouched('description', true);
              }
            }}
          />
          <ErrorMessage name="description" component="div" className="error" />
        </Form>
      )}
    </Formik>
  );
};
export default DescriptionForm;

Validation en ligne alternative sans la propriété maxLength

Solution 2 : réagir avec la validation manuelle de la longueur des caractères sans bloquer la saisie

import React from 'react';
import { Field, Formik, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import TextField from '@material-ui/core/TextField';
// Yup schema for 250-character limit
const descriptionValidation = Yup.string()
  .max(250, 'Description cannot exceed 250 characters')
  .optional();
// Component definition
const DescriptionForm = () => {
  return (
    <Formik
      initialValues={{ description: '' }}
      validationSchema={Yup.object({ description: descriptionValidation })}
      onSubmit={(values) => console.log('Form Submitted:', values)}
    >
      {({ errors, touched, setFieldValue, setFieldTouched, values }) => (
        <Form>
          <TextField
            name="description"
            label="Description"
            multiline
            rows={4}
            placeholder="Optional"
            value={values.description}
            error={Boolean(errors.description && touched.description)}
            helperText={
              errors.description && touched.description
                ? errors.description
                : `Characters left: ${250 - values.description.length}`
            }
            onChange={(event) => {
              const { value } = event.target;
              if (value.length <= 250) {
                setFieldValue('description', value);
              } else {
                setFieldTouched('description', true);
              }
            }}
          />
          <ErrorMessage name="description" component="div" className="error" />
        </Form>
      )}
    </Formik>
  );
};
export default DescriptionForm;

Validation backend à l'aide d'Express.js et Yup pour la limite de caractères

Solution 3 : validation backend à l'aide de Node.js avec Express et Yup

const express = require('express');
const app = express();
const Yup = require('yup');
// Middleware for JSON parsing
app.use(express.json());
// Define Yup schema
const descriptionSchema = Yup.object().shape({
  description: Yup.string()
    .max(250, 'Description cannot exceed 250 characters')
    .optional(),
});
// POST route with validation
app.post('/submit', async (req, res) => {
  try {
    await descriptionSchema.validate(req.body);
    res.status(200).json({ message: 'Validation Passed' });
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});
// Server setup
app.listen(3000, () => console.log('Server running on port 3000'));

Foire aux questions sur la validation en ligne dans Formik et Yup

1. Quel est le but principal de l'utilisation Formik avec Yup pour validation ?
2. La combinaison de Formik et Yup simplifie la gestion et la validation des formulaires dans les applications React, en particulier pour les formulaires plus volumineux ou ayant des besoins de validation complexes. Formik gère l'état du formulaire, tandis que Yup gère les schémas de validation.
3. Comment setFieldTouched différer de setFieldValue à Formik?
4. setFieldTouched met à jour le statut « touché » d'un champ, le marquant comme ayant interagi à des fins de validation, tandis que setFieldValue met directement à jour la valeur du champ. Ensemble, ils aident à gérer quand et comment la validation a lieu.
5. Puis-je utiliser les deux natifs maxLength et oui, validation ?
6. L'utilisation de maxLength limite la longueur d'entrée sur le front-end mais peut empêcher la validation de Yup de se déclencher en cas d'erreurs en ligne. Si une validation en ligne est requise, envisagez de supprimer maxLength et de vous fier plutôt à Yup avec le gestionnaire onChange de Formik.
7. Pourquoi devrais-je utiliser FieldArray avec validation en Formik ?
8. FieldArray permet aux développeurs de gérer des formulaires dynamiques dans lesquels plusieurs champs suivent des règles de validation similaires, ce qui le rend idéal pour les listes d'éléments tels que des commentaires ou des balises où chaque entrée a des exigences spécifiques.
9. Qu'est-ce qu'une fonction anti-rebond et pourquoi l'utiliser avec la validation Formik ?
10. L'anti-rebond est une technique qui retarde la validation jusqu'à ce que l'utilisateur ait interrompu la saisie, réduisant ainsi les appels de validation excessifs. Ceci est particulièrement utile pour les champs de texte plus longs, évitant ainsi les messages de validation prématurés susceptibles de distraire les utilisateurs.
11. Quelles sont les bonnes pratiques pour valider plusieurs champs avec Yup ?
12. Utilisez Yup object et array des schémas pour définir une validation complexe et appliquer des messages d'erreur personnalisés pour indiquer clairement quels champs ne répondent pas aux exigences.
13. Comment puis-je afficher dynamiquement les caractères restants à l’utilisateur ?
14. En utilisant helperText dans le composant TextField de Material-UI, il est possible d'afficher le nombre de caractères en temps réel, ce qui peut améliorer la convivialité en aidant les utilisateurs à suivre leur capacité de saisie restante.
15. La validation backend peut-elle remplacer la validation frontend par Yup ?
16. La validation back-end est cruciale pour l'intégrité des données, mais la validation front-end fournit un retour immédiat aux utilisateurs, améliorant ainsi leur expérience. Les deux sont recommandés pour gérer les données de manière sécurisée et conviviale.
17. Quel est l'avantage de supprimer le maxLength attribut pour la validation en ligne ?
18. Suppression maxLength donne à Formik et Yup un contrôle total sur le processus de validation, permettant aux erreurs en ligne de s'afficher dès que la limite de caractères est dépassée, sans restreindre directement la longueur d'entrée.

Réflexions finales sur la validation en ligne en temps réel

La mise en œuvre de la validation en ligne avec Formik et Yup offre une expérience utilisateur plus fluide et plus interactive pour les champs limités en caractères. En supprimant longueurmax et en utilisant Formik setFieldTouched stratégiquement, les utilisateurs peuvent obtenir un retour instantané sans être interrompus par des limites strictes. Cette technique est idéale pour des scénarios tels que les formulaires de candidature ou les champs biologiques.

Cette approche offre de la flexibilité et peut être personnalisée davantage pour répondre à des besoins spécifiques. La validation en ligne des limites de caractères garantit la cohérence des données et une expérience conviviale, en particulier lors de la gestion de plusieurs champs basés sur des caractères. En combinant Formik, Yup et JavaScript, les développeurs peuvent offrir une validation à la fois intuitive et robuste aux utilisateurs. 🚀