Form Manipulation et Validation dans Next.js

La création de formulaires et l'exécution de données validation sont des éléments essentiels du développement d'applications Web. Dans cette section, nous explorerons comment créer des formulaires et gérer des données validation dans votre Next.js application. Nous nous plongerons également dans form les bibliothèques populaires telles que react-hook-form et Formik pour gérer efficacement form l'état et exécuter les données validation.

Utilisation react-hook-form pour Form la manipulation

react-hook-form est une bibliothèque qui simplifie la gestion form de l'état et le traitement des données validation dans votre Next.js application. Vous trouverez ci-dessous un exemple d'utilisation react-hook-form pour créer une inscription form  :

import { useForm } from 'react-hook-form';  
  
function RegistrationForm() {  
  const { register, handleSubmit, errors } = useForm();  
  
  const onSubmit =(data) => {  
    console.log(data);  
  };  
  
  return( 
    <form onSubmit={handleSubmit(onSubmit)}>  
      <input  
        type="text"  
        name="username"  
        placeholder="Username"  
        ref={register({ required: true, minLength: 5 })}  
      />  
      {errors.username && <p>Username is required and must be at least 5 characters long</p>}  
  
      <input  
        type="email"  
        name="email"  
        placeholder="Email"  
        ref={register({ required: true, pattern: /^\S+@\S+$/i })}  
      />  
      {errors.email && <p>Valid email is required</p>}  
  
      <button type="submit">Register</button>  
    </form>  
 );  
}  
  
export default RegistrationForm;  

Dans l'exemple ci- dessus, nous utilisons react-hook-form pour gérer form l'état et exécuter les données validation. Le form est soumis lorsque l'utilisateur clique sur le Register bouton et validation les erreurs sont affichées le cas échéant.

Utilisation Formik pour Form la manipulation

Formik est une bibliothèque puissante pour gérer form l'état, les données validation et gérer les interactions liées aux formulaires. Voici un exemple d'utilisation Formik dans votre Next.js application :

import { Formik, Form, Field, ErrorMessage } from 'formik';  
  
function ContactForm() {  
  const initialValues = {  
    name: '',  
    email: '',  
  };  
  
  const validate =(values) => {  
    const errors = {};  
  
    if(!values.name) {  
      errors.name = 'Name is required';  
    }  
  
    if(!values.email) {  
      errors.email = 'Email is required';  
    }  
  
    return errors;  
  };  
  
  const onSubmit =(values) => {  
    console.log(values);  
  };  
  
  return( 
    <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>  
      <Form>  
        <div>  
          <Field type="text" name="name" placeholder="Name" />  
          <ErrorMessage name="name" component="div" />  
        </div>  
        <div>  
          <Field type="email" name="email" placeholder="Email" />  
          <ErrorMessage name="email" component="div" />  
        </div>  
        <button type="submit">Submit</button>  
      </Form>  
    </Formik>  
 );  
}  
  
export default ContactForm;  

Dans l'exemple ci- dessus, nous utilisons Formik pour gérer form l'état et exécuter les données validation. Validation les erreurs sont affichées sous forme de messages si elles se produisent.

Conclusion

Cette section vous a présenté la création de formulaires et la gestion des données validation dans votre Next.js application. Vous avez appris à utiliser les bibliothèques react-hook-form et Formik pour gérer efficacement form l'état et exécuter les données validation. Cela vous aidera à créer des formulaires interactifs offrant une meilleure expérience utilisateur et une meilleure réactivité.