close

Form Immaniġġjar u Validation in Next.js

Il-formoli tal-bini u t-twettiq tad-dejta validation huma partijiet essenzjali tal-iżvilupp tal-applikazzjoni tal-web. F'din it-taqsima, se nesploraw kif nibnu formoli u nwettqu d-dejta validation fl-applikazzjoni tiegħek Next.js. Aħna ser nidħlu wkoll form f'libreriji popolari bħal react-hook-form u Formik biex niġġestixxu b'mod effiċjenti form l-istat u nwettqu d-dejta validation.

Użu react-hook-form għall Form -Immaniġġjar

react-hook-form hija librerija li tissimplifika l-ġestjoni form tal-istat u t-tmexxija tad-dejta validation fl Next.js -applikazzjoni tiegħek. Hawn taħt hawn eżempju ta' kif tuża react-hook-form biex tibni reġistrazzjoni 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;

Fl-eżempju ta 'hawn fuq, nużaw react-hook-form biex niġġestixxu form l-istat u nwettqu d-dejta validation. Tiġi form sottomessa meta l-utent jikklikkja l Register -buttuna, u validation l-iżbalji jintwerew jekk ikun hemm.

Użu Formik għall Form -Immaniġġjar

Formik hija librerija b'saħħitha għall-ġestjoni form tal-istat, id-dejta validation u l-immaniġġjar tal-interazzjonijiet relatati mal-formoli. Hawn eżempju ta' kif tuża Formik fl-applikazzjoni tiegħek Next.js:

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;

Fl-eżempju ta 'hawn fuq, nużaw Formik biex niġġestixxu form l-istat u nwettqu d-dejta validation. Validation l-iżbalji jintwerew bħala messaġġi jekk iseħħu.

Konklużjoni

Din it-taqsima introduċietlek biex tibni formoli u tmexxi dejta validation fl-applikazzjoni tiegħek Next.js. Tgħallimt kif tuża l- react-hook-form u Formik libreriji biex timmaniġġja b'mod effiċjenti form l-istat u twettaq id-dejta validation. Dan jgħinek toħloq formoli interattivi li jipprovdu esperjenza u rispons aħjar għall-utent.