📋 React Native (TypeScript) – Basic Form Validation

Mobile অ্যাপ ডেভেলপমেন্টে Form Validation একটি অত্যন্ত গুরুত্বপূর্ণ বিষয়। ভুল বা ফাঁকা ডাটা সাবমিট হলে অ্যাপের বিশ্বাসযোগ্যতা কমে যায়। এই টিউটোরিয়ালে আমরা React Native + TypeScript ব্যবহার করে File Based Basic Form Validation শিখব।

🔹 Basic Form Validation বলতে কী বোঝায়?

Form Validation মানে হলো – ব্যবহারকারী ইনপুট দেওয়ার সময়:

• ফিল্ড ফাঁকা রাখা যাবে না
• Email ফরম্যাট ঠিক আছে কিনা যাচাই
• Password এর minimum length যাচাই
• ভুল হলে সাথে সাথে error দেখানো

📁 File Structure (React Native + TypeScript)

src/
 └── screens/
     └── RegisterScreen.tsx
  

🧩 Register Form (TypeScript Code)

নিচে একটি সাধারণ Register Form দেখানো হলো যেখানে আছে:

• Name
• Email
• Password
• Error Message

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';

const RegisterScreen: React.FC = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = () => {
    if (!name || !email || !password) {
      setError('সব ফিল্ড পূরণ করা বাধ্যতামূলক');
      return;
    }

    if (!email.includes('@')) {
      setError('সঠিক Email প্রদান করুন');
      return;
    }

    if (password.length < 6) {
      setError('Password কমপক্ষে ৬ অক্ষরের হতে হবে');
      return;
    }

    setError('');
    console.log('Form Submitted Successfully');
  };

  return (
    
      Register
    
  );
};

export default RegisterScreen;
  

⚠️ Validation Logic Explained

🎨 Error Message UI Display

{error ? (
  
    {error}
  
) : null}
  

▶️ Expected Output (User Experience)

• ফিল্ড ফাঁকা → Error দেখাবে
• ভুল Email → Error দেখাবে
• Password ছোট → Error দেখাবে
• সব ঠিক → Form Successfully Submit

📱 Screen Output:
----------------
[ Name Input ]
[ Email Input ]
[ Password Input ]

❌ সব ফিল্ড পূরণ করা বাধ্যতামূলক
  

✨ কেন এই পদ্ধতি গুরুত্বপূর্ণ?

• Beginner-friendly
• TypeScript strong typing শেখা যায়
• Form logic পরিষ্কার বোঝা যায়
• Real project এর foundation তৈরি হয়