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 । এটি আপনাকে ইন্টারেক্টিভ ফর্ম তৈরি করতে সাহায্য করবে যা একটি ভাল ব্যবহারকারীর অভিজ্ঞতা এবং প্রতিক্রিয়া প্রদান করে।