Form Data Validation এবং Custom Error Messages

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 ব্যবহার করে ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজগুলোকে সহজভাবে ম্যানেজ করা সম্ভব।