Forms & Validation

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

Form validation ကို 'submit button press ချိန်' (on submit) ဒါမှမဟုတ် 'field ကနေ ထွက်ချိန်' (on blur) မှာ run လေ့ရှိပါတယ် — real-time (character တိုင်း) validation က UX ကို disruptive ဖြစ်စေတတ်ပါတယ်။ Error message ကို field အောက်မှာ conditional render (error && <Text>...) ဖြင့် ပြသပြီး, TextInput border color ကို error state အလိုက် ပြောင်းပေးရင် visual feedback ပိုကောင်းပါတယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Email field ကို regex pattern (/^\S+@\S+\.\S+$/) နဲ့ validate လုပ်ပြီး, empty field ကို 'ဒီ field လိုအပ်ပါတယ်' ဆိုတဲ့ message ပြပါတယ် — Submit button ကို errors object ထဲမှာ error တစ်ခုမှ မရှိမှသာ enabled ဖြစ်အောင် disabled={hasErrors} logic ထည့်ရင် invalid data ကို submit လုပ်ခွင့်ကို ကာကွယ်ပေးပါတယ်။

Validation ကို submit/blur ချိန်မှာ run ခြင်း (character တိုင်း မဟုတ်)
Error message ကို field အောက်မှာ conditional render ခြင်း
Submit button ကို error ရှိရင် disabled ဖြစ်အောင် ထားခြင်း

Code နမူနာ

javascript

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

export default function SignupForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const validate = () => {
    if (!email.includes('@')) {
      setError('မှန်ကန်တဲ့ email format ရေးပါ');
      return false;
    }
    setError('');
    return true;
  };

  return (
    <View style={styles.form}>
      <TextInput
        style={[styles.input, error && styles.inputError]}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        onBlur={validate}
      />
      {error ? <Text style={styles.errorText}>{error}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  form: { padding: 16 },
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12 },
  inputError: { borderColor: 'red' },
  errorText: { color: 'red', marginTop: 4 },
});

You should see

Email field ကို invalid format ဖြင့် ရိုက်ပြီး field ကနေ ထွက်လိုက်ရင် red border + error message ပေါ်လာမည်။

၅ မိနစ် စမ်းကြည့်

Signup form ထဲမှာ password field ထပ်ထည့်ပြီး 'character ၈ လုံးအောက်ရှိရင် error' ဆိုတဲ့ validation rule ကို implement လုပ်ကြည့်ပါ။

သတိလေးတစ်ချက်

Client-side validation ကို UX layer အဖြစ်ပဲ သဘောထားပါ — security-critical validation (Cybersecurity tutorial ရဲ့ SQL Injection/XSS lesson ကို ပြန်သတိရပါ) ကို server-side မှာ အမြဲ ထပ်လုပ်ရပါမယ်။