Form હેન્ડલિંગ અને Validation ઇન Next.js

બિલ્ડીંગ ફોર્મ્સ અને પરફોર્મિંગ ડેટા validation વેબ એપ્લિકેશન ડેવલપમેન્ટના આવશ્યક ભાગો છે. આ વિભાગમાં, અમે અન્વેષણ કરીશું કે કેવી રીતે ફોર્મ બનાવવું અને validation તમારી Next.js અરજીમાં ડેટા કેવી રીતે ચલાવવો. form અમે લોકપ્રિય લાઇબ્રેરીઓમાં પણ તપાસ કરીશું react-hook-form અને Formik કાર્યક્ષમ રીતે form સ્ટેટ મેનેજ કરવા અને ડેટા પરફોર્મ કરીશું validation.

હેન્ડલિંગ react-hook-form માટે ઉપયોગ Form

react-hook-form એક લાઇબ્રેરી છે જે તમારી એપ્લિકેશનમાં form રાજ્યનું સંચાલન અને ડેટાનું સંચાલન કરવાનું સરળ બનાવે છે. નોંધણી બનાવવા માટે કેવી રીતે ઉપયોગ કરવો તેનું ઉદાહરણ નીચે છે: validation Next.js react-hook-form 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;  

ઉપરના ઉદાહરણમાં, અમે સ્ટેટ react-hook-form મેનેજ કરવા અને ડેટા કરવા માટે ઉપયોગ કરીએ છીએ. જ્યારે વપરાશકર્તા બટનને ક્લિક કરે છે ત્યારે સબમિટ કરવામાં આવે છે, અને જો કોઈ હોય તો ભૂલો પ્રદર્શિત થાય છે. form validation form Register validation

હેન્ડલિંગ Formik માટે ઉપયોગ Form

Formik form રાજ્ય, ડેટા validation અને ફોર્મ-સંબંધિત ક્રિયાપ્રતિક્રિયાઓનું સંચાલન કરવા માટે એક શક્તિશાળી પુસ્તકાલય છે. Formik તમારી એપ્લિકેશનમાં કેવી રીતે ઉપયોગ કરવો તેનું ઉદાહરણ અહીં છે 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;  

ઉપરના ઉદાહરણમાં, અમે સ્ટેટ Formik મેનેજ કરવા અને ડેટા કરવા માટે ઉપયોગ કરીએ છીએ. જો ભૂલો થાય તો તે સંદેશાઓ તરીકે પ્રદર્શિત થાય છે. form validation Validation

નિષ્કર્ષ

validation આ વિભાગે તમને તમારી અરજીમાં ફોર્મ બનાવવા અને ડેટાનું સંચાલન કરવા માટે પરિચય આપ્યો છે Next.js. react-hook-form તમે રાજ્ય અને ડેટાને Formik કાર્યક્ષમ રીતે સંચાલિત કરવા માટે અને પુસ્તકાલયોનો ઉપયોગ કેવી રીતે કરવો તે તમે શીખ્યા છો. આ તમને ઇન્ટરેક્ટિવ ફોર્મ બનાવવામાં મદદ કરશે જે બહેતર વપરાશકર્તા અનુભવ અને પ્રતિભાવ પ્રદાન કરે છે. form validation