Form Handling এবং Validation

ReactJS-এ ফর্ম হ্যান্ডলিং (Form Handling) এবং ভ্যালিডেশন (Validation) অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ অংশ, যা ব্যবহারকারীর ইনপুট গ্রহণ এবং তা যাচাই করার প্রক্রিয়া পরিচালনা করে। React এ ফর্ম পরিচালনা করা সহজ এবং সুবিধাজনক, কারণ React স্টেট এবং ইভেন্ট হ্যান্ডলিংয়ের মাধ্যমে ব্যবহারকারীর ইনপুট সহজেই নিয়ন্ত্রণ করা যায়। ফর্ম ভ্যালিডেশন নিশ্চিত করে যে, ব্যবহারকারী সঠিক এবং প্রয়োজনীয় ডেটা প্রদান করছেন।

Form Handling in React

ReactJS-এ ফর্ম হ্যান্ডলিং-এর মূল উদ্দেশ্য হল ব্যবহারকারীর ইনপুট সংগ্রহ করা এবং সেগুলোকে স্টেটে (state) সেভ করা। React ফর্ম সাধারণত controlled components হিসেবে ব্যবহৃত হয়, যেখানে ইনপুট ক্ষেত্রগুলোর মান React কম্পোনেন্টের স্টেট দ্বারা নিয়ন্ত্রিত হয়।

১. Controlled Components

Controlled Components হল এমন ইনপুট ফিল্ড যেগুলোর মান React কম্পোনেন্টের স্টেট দ্বারা পরিচালিত হয়। ইনপুটের মান পরিবর্তন হলে স্টেট আপডেট হয়, এবং পরবর্তী রেন্ডারিংয়ে সেই মান দেখানো হয়। এর ফলে React ফর্মের প্রতিটি ফিল্ডের উপর পূর্ণ নিয়ন্ত্রণ থাকে।

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');

  // Input Change Handler
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  // Form Submit Handler
  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input submitted: ' + inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

এখানে, value={inputValue} দ্বারা ইনপুট ফিল্ডের মান স্টেট inputValue দ্বারা নিয়ন্ত্রিত হয়। যখনই ইনপুটের মান পরিবর্তিত হয়, handleChange ফাংশন কল হয় এবং স্টেট আপডেট হয়।

২. Handling Multiple Inputs

একটি ফর্মে একাধিক ইনপুট ফিল্ড থাকলে, স্টেট ব্যবস্থাপনা একটু জটিল হতে পারে। কিন্তু React-এ, আপনি একাধিক ইনপুট ফিল্ডের জন্য একটি সাধারণ স্টেট অবজেক্ট ব্যবহার করতে পারেন।

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Form submitted: ' + JSON.stringify(formData));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

এখানে, formData স্টেট অবজেক্টের মধ্যে name এবং email ফিল্ড রাখা হয়েছে। প্রতিটি ইনপুট ফিল্ডের জন্য name অ্যাট্রিবিউট ব্যবহার করা হয় যাতে React জানে কোন ফিল্ডটি আপডেট হচ্ছে।

Form Validation in React

React-এ ফর্ম ভ্যালিডেশন ব্যবহারকারী ইনপুট যাচাই করার একটি প্রক্রিয়া, যা নিশ্চিত করে যে ব্যবহারকারী ফর্ম সাবমিট করার আগে সঠিক তথ্য প্রদান করছেন। React এ ফর্ম ভ্যালিডেশন সাধারণত ইনপুট ফিল্ডের মান চেক করার মাধ্যমে করা হয় এবং প্রয়োজন হলে ইরর মেসেজ দেখানো হয়।

১. Simple Form Validation

React-এ সাধারিত ফর্ম ভ্যালিডেশন সাধারনত সাবমিট করার আগে চেক করা হয়। যেমন, যদি একটি ইনপুট ফিল্ড খালি থাকে, তবে একটি ইরর মেসেজ দেখানো হয়:

import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    if (name.trim() === '') {
      setError('Name is required');
    } else {
      setError('');
      alert('Form submitted: ' + name);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

এখানে, handleSubmit ফাংশনে ইনপুটের মান যাচাই করা হয় এবং যদি নাম খালি থাকে, তাহলে একটি ইরর মেসেজ দেখানো হয়।

২. Advanced Form Validation with Multiple Fields

একাধিক ইনপুট ফিল্ডের জন্য ফর্ম ভ্যালিডেশন করা যেতে পারে। এটি একাধিক ইনপুট ফিল্ডের জন্য ভ্যালিডেশন চেক করতে সাহায্য করে এবং প্রয়োজনীয় ত্রুটি বার্তা প্রদর্শন করে:

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const [errors, setErrors] = useState({
    name: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const validateForm = () => {
    let formErrors = {};
    if (!formData.name) formErrors.name = 'Name is required';
    if (!formData.email) formErrors.email = 'Email is required';
    else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      formErrors.email = 'Email is not valid';
    }
    setErrors(formErrors);
    return Object.keys(formErrors).length === 0;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (validateForm()) {
      alert('Form submitted: ' + JSON.stringify(formData));
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      {errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

এখানে, validateForm ফাংশনটি ফর্মের সকল ইনপুট যাচাই করে, এবং যদি কোনো ইনপুট ভুল হয়, তবে ত্রুটি বার্তা প্রদর্শন করা হয়।

সারাংশ

ReactJS-এ ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন সহজ এবং কার্যকর পদ্ধতিতে করা যায়। Controlled Components এর মাধ্যমে ইনপুট ফিল্ডের মান স্টেটের মাধ্যমে নিয়ন্ত্রণ করা হয়, এবং form validation এর মাধ্যমে ব্যবহারকারীর ইনপুট যাচাই করা হয়। React-এ এই দুটি কৌশল ব্যবহার করে আপনি আরও উন্নত এবং ব্যবহারকারীর জন্য নির্ভরযোগ্য ফর্ম তৈরি করতে পারেন।

ReactJS-এ ফর্ম তৈরি এবং হ্যান্ডল করা একটি গুরুত্বপূর্ণ কাজ, কারণ এটি ব্যবহারকারীর ইনপুট সংগ্রহের প্রক্রিয়া এবং সেই ইনপুটের উপর ভিত্তি করে অ্যাপ্লিকেশনের স্টেট আপডেট করার জন্য ব্যবহৃত হয়। ReactJS-এ ফর্ম হ্যান্ডলিং সিস্টেম কিছুটা আলাদা, কারণ এখানে state ব্যবহার করে ইনপুট ফিল্ডের মান স্টোর করা হয়, এবং ইনপুটের পরিবর্তন ঘটলে সেই স্টেট আপডেট হয়।

ReactJS-এ ফর্ম তৈরির জন্য সাধারণত দুটি পদ্ধতি ব্যবহার হয়:

1. Uncontrolled Components
2. Controlled Components

১. Controlled Components

Controlled Components হল এমন ফর্ম কম্পোনেন্ট, যার ইনপুট ফিল্ডের মান React কম্পোনেন্টের স্টেট দ্বারা নিয়ন্ত্রিত হয়। অর্থাৎ, ইনপুট ফিল্ডের মান এবং স্টেট একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে। এটি React এর অন্যতম শক্তিশালী বৈশিষ্ট্য, কারণ এতে ডেভেলপাররা ইনপুট ফিল্ডের পরিবর্তন খুব সহজে ট্র্যাক করতে এবং নিয়ন্ত্রণ করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted Value: ' + inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={inputValue}  // স্টেট দ্বারা নিয়ন্ত্রিত
          onChange={handleChange}  // ইনপুট পরিবর্তন ট্র্যাক করা
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

এখানে:

• value={inputValue}: ইনপুট ফিল্ডের মান inputValue স্টেট দ্বারা নিয়ন্ত্রিত।
• onChange={handleChange}: ইনপুটের পরিবর্তন হলে handleChange ফাংশন কল হয় এবং স্টেট আপডেট হয়।

Controlled Components-এর সুবিধা:

• ইনপুট ফিল্ডের মান React স্টেট দ্বারা সম্পূর্ণভাবে নিয়ন্ত্রিত হয়, তাই ডেটা এককভাবে অ্যাক্সেস করা সহজ।
• ইউজারের ইনপুটের উপর লজিক বা ভ্যালিডেশন প্রয়োগ করা খুবই সহজ।
• ফর্মের ইনপুটগুলোর মান বা স্টেট ইত্যাদি পুরোপুরি React এর মধ্যে থাকে, যা আরও ভাল ডিবাগিং এবং পারফরম্যান্সের জন্য উপকারী।

২. Uncontrolled Components

Uncontrolled Components হল ফর্ম কম্পোনেন্ট, যার ইনপুট ফিল্ডের মান DOM দ্বারা নিয়ন্ত্রিত হয়, React স্টেট দ্বারা নয়। এই ধরনের কম্পোনেন্টগুলির মধ্যে ইনপুট ফিল্ডে ref ব্যবহার করা হয় মান অ্যাক্সেস করার জন্য।

উদাহরণ:

import React, { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          ref={inputRef}  // ref ব্যবহার করে DOM এ অ্যাক্সেস
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

এখানে:

• ref={inputRef}: ইনপুট ফিল্ডের মান সরাসরি DOM এর মাধ্যমে ট্র্যাক করা হচ্ছে।
• inputRef.current.value: ইনপুটের মান inputRef ব্যবহার করে DOM থেকে সরাসরি পাওয়া যায়।

Uncontrolled Components-এর সুবিধা:

• ছোট এবং দ্রুত প্রোটোটাইপ তৈরির জন্য উপযুক্ত।
• স্টেট ম্যানেজমেন্টের সাথে জড়িত না হওয়ায় কিছু ক্ষেত্রে কোড সহজ হতে পারে।
• যেসব ক্ষেত্রে React স্টেট ব্যবহার না করলেই হয়, সেখানে এই পদ্ধতি ব্যবহার করা সুবিধাজনক।

৩. ফর্ম ভ্যালিডেশন

ফর্ম ভ্যালিডেশন ReactJS-এ একটি গুরুত্বপূর্ণ বিষয়, যেখানে ইউজারের ইনপুট যাচাই করা হয়। Controlled কম্পোনেন্টে ভ্যালিডেশন সহজে করা যায়, কারণ স্টেট এর মাধ্যমে মান ট্র্যাক করা হয় এবং স্টেট আপডেট করা হয়। এখানে, আপনি শর্তানুযায়ী ইনপুট যাচাই করে সাবমিট করার আগে ভ্যালিডেশন করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!inputValue) {
      setError('Name is required');
    } else {
      setError('');
      alert('Form submitted: ' + inputValue);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={inputValue}
          onChange={handleChange}
        />
      </label>
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

এখানে:

• error স্টেট ব্যবহার করা হয়েছে, যা ইউজারের ইনপুট ভুল হলে একটি বার্তা দেখাবে।
• handleSubmit ফাংশনে ইনপুট ভ্যালিডেশনের শর্ত দেওয়া হয়েছে, যেখানে যদি ইনপুট ফাঁকা থাকে তবে একটি ত্রুটি বার্তা দেখানো হয়।

৪. ফর্মের multiple ইনপুট হ্যান্ডলিং

যখন ফর্মে একাধিক ইনপুট ফিল্ড থাকে, তখন handleChange ফাংশনকে আরও সাধারণভাবে লেখা হয়, যাতে সমস্ত ইনপুট ফিল্ডের জন্য একটি সাধারণ হ্যান্ডলার ব্যবহার করা যায়। এখানে, আপনি name অ্যাট্রিবিউট ব্যবহার করে ফিল্ডগুলোকে আলাদা আলাদা ভাবে ট্র্যাক করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';

function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted Data: ' + JSON.stringify(formData));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

এখানে:

• formData স্টেট একটি অবজেক্ট হিসেবে ব্যবহৃত হচ্ছে, যাতে একাধিক ইনপুট ফিল্ডের মান রাখা যায়।
• handleChange ফাংশনে name অ্যাট্রিবিউট দ্বারা ডাইনামিকভাবে ইনপুট ফিল্ডের মান আপডেট করা হচ্ছে।

সারাংশ:

ReactJS-এ ফর্ম তৈরি এবং হ্যান্ডলিং একটি গুরুত্বপূর্ণ কাজ, এবং আপনি এতে Controlled Components বা Uncontrolled Components ব্যবহার করতে পারেন। Controlled Components ফর্মের ইনপুট ফিল্ডের মান React স্টেট দ্বারা নিয়ন্ত্রিত হয়, যা কোডের পরিপূর্ণ নিয়ন্ত্রণ এবং ডিবাগিং সহজ করে। React-এ ফর্মের ইনপুট ভ্যালিডেশন এবং একাধিক ইনপুট হ্যান্ডলিংসহ বেশ কিছু গুরুত্বপূর্ণ ফিচার রয়েছে, যা ডেভেলপারদের শক্তিশালী এবং ডাইনামিক ফর্ম তৈরি করতে সহায়তা করে।

ReactJS-এ Controlled এবং Uncontrolled কম্পোনেন্ট দুটি গুরুত্বপূর্ণ ধারণা। এগুলো মূলত ইনপুট ফিল্ড (যেমন input, textarea, select ইত্যাদি) এর স্টেট ম্যানেজমেন্টের পদ্ধতি নির্দেশ করে।

Controlled Components

Controlled Components হল এমন কম্পোনেন্ট যেখানে ইনপুট ফিল্ডের মান React স্টেট দ্বারা নিয়ন্ত্রিত হয়। অর্থাৎ, ইনপুটের মান স্টেটের মধ্যে সঞ্চিত থাকে এবং সেই মান পরিবর্তন করার জন্য React স্টেট আপডেট করা হয়।

একটি controlled কম্পোনেন্টে ইনপুট ফিল্ডের মান সর্বদা React স্টেটে উপস্থিত থাকে এবং onChange ইভেন্ট হ্যান্ডলার ব্যবহার করে এটি পরিবর্তিত হয়।

ব্যবহার:

• ইনপুটের মান React স্টেটে সংরক্ষিত থাকে।
• ইনপুটের পরিবর্তন ঘটানোর জন্য স্টেট আপডেট করা হয়।

উদাহরণ:

import React, { useState } from 'react';

const ControlledForm = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value); // ইনপুট মান আপডেট করা
  };

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + value);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={value} // ইনপুটের মান React স্টেট থেকে আসছে
          onChange={handleChange} // স্টেট আপডেট করার জন্য
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

এখানে:

• ইনপুটের মান value স্টেটে সংরক্ষিত হচ্ছে।
• onChange ইভেন্ট হ্যান্ডলার ব্যবহার করে ইনপুটের মান পরিবর্তন করা হচ্ছে।
• যখন ফর্ম সাবমিট হবে, তখন value স্টেট থেকে ইনপুটের মান নেওয়া হবে।

Uncontrolled Components

Uncontrolled Components হল এমন কম্পোনেন্ট যেখানে ইনপুট ফিল্ডের মান React স্টেট দ্বারা নিয়ন্ত্রিত হয় না। এর পরিবর্তে, ইনপুটের মান DOM দ্বারা সরাসরি নিয়ন্ত্রিত হয়, এবং React স্টেটের সাথে এর কোনো সংযোগ থাকে না।

Uncontrolled কম্পোনেন্টে, আপনি ref ব্যবহার করে ইনপুট ফিল্ডের মান অ্যাক্সেস করেন, এবং সাধারণত useRef হুক ব্যবহার করা হয়।

ব্যবহার:

• ইনপুটের মান DOM-এর মাধ্যমে সরাসরি নিয়ন্ত্রিত হয়।
• স্টেট ব্যবহারের প্রয়োজন হয় না, তবে ref ব্যবহার করে মান অ্যাক্সেস করা হয়।

উদাহরণ:

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + inputRef.current.value); // DOM থেকে ইনপুট মান নেওয়া
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          ref={inputRef} // ref দিয়ে ইনপুট ফিল্ড অ্যাক্সেস করা
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;

এখানে:

• inputRef একটি ref যা ইনপুট ফিল্ডের DOM এলিমেন্টে পয়েন্ট করছে।
• ইনপুটের মান inputRef.current.value দিয়ে সরাসরি DOM থেকে নেওয়া হচ্ছে।

Controlled এবং Uncontrolled Components এর মধ্যে পার্থক্য

কোনটি ব্যবহার করবেন?

• Controlled Components ব্যবহার করা সাধারণত ভাল প্র্যাকটিস, কারণ এতে আপনি ফর্মের মান সম্পূর্ণরূপে React স্টেটে রাখেন, যা আরও পঠনযোগ্য এবং ট্র্যাক করা সহজ। এটি ডাটা ম্যানিপুলেশন, ভ্যালিডেশন এবং অন্যান্য কার্যকলাপে সহায়ক।
• Uncontrolled Components তখন ব্যবহার করা যায় যখন কমপ্লেক্স স্টেট ম্যানেজমেন্টের প্রয়োজন নেই বা সিম্পল UI পরিবর্তন প্রয়োজন। তবে, সাধারণত এটি কম ব্যবহৃত হয় React অ্যাপ্লিকেশনে, কারণ এটি React এর স্টেট ব্যবস্থাপনা থেকে বিচ্ছিন্ন থাকে।

React এর Controlled এবং Uncontrolled কম্পোনেন্ট দুটি ধারণা, আপনি যে পরিস্থিতিতে আছেন তার উপর নির্ভর করে ব্যবহৃত হবে, তবে অধিকাংশ React ডেভেলপার Controlled Components-এ বেশি বিশ্বাস করেন, কারণ এটি অ্যাপ্লিকেশনের অবস্থা (state) আরও সুসংগত এবং পরিচালনাযোগ্য রাখে।

ReactJS-এ ফর্ম ডাটা ভ্যালিডেশন একটি গুরুত্বপূর্ণ বিষয়, বিশেষ করে যখন আপনি ইউজার থেকে ইনপুট গ্রহণ করছেন। React ফর্মগুলোর ডাটা ভ্যালিডেশন এবং কাস্টম এরর মেসেজ তৈরি করতে হলে কিছু টেকনিক্যাল স্টেপ অনুসরণ করতে হয়। এখানে আমরা দেখব কীভাবে React-এ ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ তৈরি করা যায়।

Form Validation কী?

ফর্ম ভ্যালিডেশন হল ইউজারের ইনপুট ডাটা যাচাই করা, যাতে নিশ্চিত হওয়া যায় যে ইনপুটটি নির্দিষ্ট শর্ত বা ফরম্যাট পূরণ করছে। যেমন:

• একটি ইমেইল ঠিকমতো ফরম্যাটে আছে কিনা
• একটি নাম ফিল্ড ফাঁকা না
• একটি পাসওয়ার্ড নির্দিষ্ট দৈর্ঘ্যের হতে হবে

React-এ ফর্ম ভ্যালিডেশন করার জন্য সাধারণত স্টেট এবং কন্ডিশনাল লজিক ব্যবহার করা হয়। এখানে আমরা React Hooks ব্যবহার করে ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ তৈরি করব।

Form Validation এবং Custom Error Messages তৈরি করা

১. ফর্ম কম্পোনেন্ট তৈরি করা

ধরা যাক, আপনি একটি ফর্ম তৈরি করতে চান যেখানে ইউজারদের নাম, ইমেইল এবং পাসওয়ার্ড দিতে হবে। আমরা এই ফর্মের ভ্যালিডেশন এবং কাস্টম এরর মেসেজ দেখব।

import React, { useState } from 'react';

const Form = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  });

  const [errors, setErrors] = useState({
    name: '',
    email: '',
    password: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const validate = () => {
    let tempErrors = { name: '', email: '', password: '' };
    let isValid = true;

    // Name Validation
    if (!formData.name) {
      tempErrors.name = 'নাম অবশ্যই দিতে হবে';
      isValid = false;
    }

    // Email Validation
    if (!formData.email) {
      tempErrors.email = 'ইমেইল অবশ্যই দিতে হবে';
      isValid = false;
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      tempErrors.email = 'একটি বৈধ ইমেইল এড্রেস দিন';
      isValid = false;
    }

    // Password Validation
    if (!formData.password) {
      tempErrors.password = 'পাসওয়ার্ড অবশ্যই দিতে হবে';
      isValid = false;
    } else if (formData.password.length < 6) {
      tempErrors.password = 'পাসওয়ার্ড কমপক্ষে ৬ অক্ষরের হতে হবে';
      isValid = false;
    }

    setErrors(tempErrors);
    return isValid;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      // ফর্ম সাবমিট করার লজিক
      alert('ফর্ম সফলভাবে সাবমিট হয়েছে!');
    }
  };

  return (
    <div>
      <h2>ফর্ম</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>নাম:</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
          />
          {errors.name && <span style={{ color: 'red' }}>{errors.name}</span>}
        </div>

        <div>
          <label>ইমেইল:</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
          {errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}
        </div>

        <div>
          <label>পাসওয়ার্ড:</label>
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
          />
          {errors.password && <span style={{ color: 'red' }}>{errors.password}</span>}
        </div>

        <div>
          <button type="submit">সাবমিট</button>
        </div>
      </form>
    </div>
  );
};

export default Form;

ব্যাখ্যা:

• State (formData, errors):
  • formData স্টেটে ইউজারের ইনপুট ডাটা (নাম, ইমেইল, পাসওয়ার্ড) রাখা হয়।
  • errors স্টেটে প্রতিটি ইনপুট ফিল্ডের জন্য কাস্টম এরর মেসেজ রাখা হয়।
• handleChange:
  • ইনপুট ফিল্ডে পরিবর্তন হলে handleChange ফাংশনটি ট্রিগার হবে এবং স্টেট আপডেট হবে।
• validate:
  • validate ফাংশনটি ফর্মের সব ফিল্ড ভ্যালিডেট করে। যদি কোনো ফিল্ডের ইনপুট ভুল থাকে, তাহলে সংশ্লিষ্ট এরর মেসেজ স্টেটে সেট করা হয়।
• handleSubmit:
  • handleSubmit ফর্মটি সাবমিট করার আগে validate ফাংশন কল করে, যাতে নিশ্চিত হওয়া যায় যে ফর্মের সব ফিল্ড সঠিকভাবে পূর্ণ করা হয়েছে।
• Error Messages:
  • প্রতিটি ইনপুট ফিল্ডের নিচে কাস্টম এরর মেসেজ দেখানো হয়, যদি ফিল্ডটি ভ্যালিড না হয়।

Form Validation এর সুবিধা

• ইউজার ফ্রেন্ডলি: ইউজাররা যখন ভুল ইনপুট দেন, তখন কাস্টম এরর মেসেজ তাদের বুঝতে সাহায্য করে।
• কাস্টমাইজেবল: আপনি আপনার প্রয়োজন অনুযায়ী ইরর মেসেজ এবং ভ্যালিডেশন লজিক কাস্টমাইজ করতে পারেন।
• ডাটা ইন্টিগ্রিটি: ফর্মের ডাটা সঠিকভাবে ভ্যালিডেট হওয়ার ফলে অ্যাপ্লিকেশনে অযথা ভুল বা অসঙ্গতিপূর্ণ ডাটা প্রবাহিত হওয়ার সম্ভাবনা কমে যায়।

উপসংহার

ReactJS-এ ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ ব্যবহার করা খুবই গুরুত্বপূর্ণ, বিশেষ করে ইউজারদের ইনপুট সঠিকভাবে যাচাই করার জন্য। এটি অ্যাপ্লিকেশনের ইউজার এক্সপিরিয়েন্স উন্নত করে এবং ডাটা ইন্টিগ্রিটি রক্ষা করে। React Hooks ব্যবহার করে ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজগুলোকে সহজভাবে ম্যানেজ করা সম্ভব।

ReactJS-এ ফর্ম ব্যবস্থাপনা একটি গুরুত্বপূর্ণ বিষয়, কারণ ফর্মে ডাটা ইনপুট, ভ্যালিডেশন, এবং সাবমিশন ইত্যাদি কাজের জন্য কমপ্লেক্স লজিকের প্রয়োজন হয়। React-এ ফর্ম পরিচালনা করার জন্য কিছু জনপ্রিয় থার্ড-পার্টি লাইব্রেরি রয়েছে যা আপনাকে সহজ এবং কার্যকরীভাবে ফর্ম তৈরি, ডাটা হ্যান্ডলিং, ভ্যালিডেশন ইত্যাদি করতে সাহায্য করে।

এই টিউটোরিয়ালে, আমরা React Hook Form, Formik, এবং React Final Form এর ব্যবহার আলোচনা করব।

১. React Hook Form

React Hook Form একটি লাইটওয়েট এবং পারফরম্যান্ট ফর্ম লাইব্রেরি যা ফর্মের স্টেট ও ভ্যালিডেশন হ্যান্ডেল করতে React hooks ব্যবহার করে। এটি খুব কম কোডে ফর্ম ম্যানেজমেন্ট সহজ করে এবং React কম্পোনেন্টে সহজে ইন্টিগ্রেট করা যায়।

React Hook Form ইনস্টল করা:

npm install react-hook-form

React Hook Form ব্যবহার করা:

import React from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input {...register('name', { required: true })} />
        {errors.name && <p>Name is required</p>}
      </div>
      
      <div>
        <label>Email:</label>
        <input {...register('email', { required: true, pattern: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/ })} />
        {errors.email && <p>Valid email is required</p>}
      </div>
      
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

ব্যাখ্যা:

• useForm hook থেকে register, handleSubmit, এবং formState ব্যবহার করা হয়েছে।
• register: ফর্ম ইনপুটগুলিকে React Hook Form-এ নিবন্ধিত (register) করে।
• handleSubmit: ফর্ম সাবমিশনের জন্য হ্যান্ডলার।
• formState: { errors }: ইনপুটগুলির জন্য error হ্যান্ডলিং।

২. Formik

Formik হল একটি শক্তিশালী ফর্ম লাইব্রেরি যা React ফর্মের জন্য স্টেট ম্যানেজমেন্ট, ভ্যালিডেশন, এবং সাবমিশন হ্যান্ডলিং সহজ করে। এটি ফর্মের অবস্থা (state) পরিচালনার জন্য অভ্যন্তরীণ স্টেট ব্যবহার করে এবং আপনার ফর্মের ডাটা সমর্থন করে।

Formik ইনস্টল করা:

npm install formik

Formik ব্যবহার করা:

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';

function MyForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validate={values => {
        const errors = {};
        if (!values.name) {
          errors.name = 'Name is required';
        }
        if (!values.email) {
          errors.email = 'Email is required';
        } else if (!/\S+@\S+\.\S+/.test(values.email)) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      <Form>
        <div>
          <label htmlFor="name">Name:</label>
          <Field type="text" id="name" name="name" />
          <ErrorMessage name="name" component="div" />
        </div>

        <div>
          <label htmlFor="email">Email:</label>
          <Field type="email" id="email" name="email" />
          <ErrorMessage name="email" component="div" />
        </div>

        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default MyForm;

ব্যাখ্যা:

• Formik: এটি ফর্মের জন্য স্টেট, ভ্যালিডেশন, এবং সাবমিশন হ্যান্ডলিং সরবরাহ করে।
• Field: প্রতিটি ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়।
• ErrorMessage: ভ্যালিডেশন ত্রুটি প্রদর্শন করে।
• initialValues: ফর্মের ইনিশিয়াল ডাটা।
• validate: ফর্ম ভ্যালিডেশন ফাংশন।

৩. React Final Form

React Final Form একটি হালকা ফর্ম লাইব্রেরি যা স্টেট ম্যানেজমেন্ট এবং ভ্যালিডেশন সহজ করে এবং React-এ কাস্টম ফর্ম বানানোর জন্য বিভিন্ন বৈশিষ্ট্য প্রদান করে।

React Final Form ইনস্টল করা:

npm install final-form react-final-form

React Final Form ব্যবহার করা:

import React from 'react';
import { Form, Field } from 'react-final-form';

function MyForm() {
  const onSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form
      onSubmit={onSubmit}
      initialValues={{ name: '', email: '' }}
      validate={values => {
        const errors = {};
        if (!values.name) {
          errors.name = 'Name is required';
        }
        if (!values.email) {
          errors.email = 'Email is required';
        } else if (!/\S+@\S+\.\S+/.test(values.email)) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>Name:</label>
            <Field name="name" component="input" type="text" />
          </div>

          <div>
            <label>Email:</label>
            <Field name="email" component="input" type="email" />
          </div>

          <button type="submit" disabled={submitting}>Submit</button>
        </form>
      )}
    />
  );
}

export default MyForm;

ব্যাখ্যা:

• Form: ফর্মের স্টেট এবং সাবমিশন হ্যান্ডলিং এর জন্য ব্যবহৃত হয়।
• Field: ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়।
• onSubmit: ফর্ম সাবমিশনের সময় কলব্যাক ফাংশন।
• validate: ফর্মের ইনপুট ভ্যালিডেশন।

থার্ড-পার্টি লাইব্রেরির সুবিধা

1. ফর্ম স্টেট ম্যানেজমেন্ট সহজ: এই লাইব্রেরিগুলি ফর্ম স্টেট এবং ডাটা আপডেটের প্রক্রিয়া সহজ করে।
2. ভ্যালিডেশন সুবিধা: লাইব্রেরিগুলিতে সহজভাবে ভ্যালিডেশন পরিচালনা করা যায়, যা কাস্টম ভ্যালিডেশন ফাংশন তৈরির জন্য সহায়ক।
3. কমপ্লেক্স ফর্ম হ্যান্ডলিং: বিভিন্ন ইনপুট ফিল্ড এবং ডাইনামিক ফর্ম এলিমেন্টের জন্য সহজ সমাধান প্রদান করে।
4. UI কন্ট্রোল: এই লাইব্রেরিগুলি React কম্পোনেন্টে সমন্বিতভাবে কাজ করে এবং ইন্টিগ্রেটেড UI হ্যান্ডলিং এর সুবিধা দেয়।

সারাংশ

থার্ড-পার্টি ফর্ম লাইব্রেরি যেমন React Hook Form, Formik, এবং React Final Form ব্যবহার করে আপনি সহজে এবং কার্যকরভাবে React ফর্ম তৈরি ও পরিচালনা করতে পারেন। এগুলোর মাধ্যমে ফর্মের স্টেট, ভ্যালিডেশন, এবং ডাটা হ্যান্ডলিং আরও সহজ ও মেইন্টেনেবল হয়ে ওঠে।