বড় form — React Hook Form, Zod আর দুই দিকের validation

১ · বড় form কেন ধীর আর এলোমেলো হয়

একটি ব্যাংকের হিসাব খোলার ফরম ভাবুন। চার পাতা, চল্লিশটি ঘর, কিছু ঘর অন্য ঘরের ওপর নির্ভর করে, আর শেষে একজন কর্মকর্তা সব মিলিয়ে দেখেন। এখন ভাবুন, প্রতিটি অক্ষর লেখার পর কর্মকর্তা পুরো চার পাতা আবার পড়ছেন। কাজ হবে, কিন্তু লাইন আর এগোবে না।

পর্ব ১২-এ (Form — controlled input, submit আর ব্যবহারকারীর ইনপুট) আপনি controlled input, FormData আর accessible error শিখেছেন। ছোট form-এ সেটিই যথেষ্ট, আর এখনো সেটিই প্রথম পছন্দ। সমস্যা শুরু হয় বাজারঘরের checkout-এর মতো form-এ, যেখানে তিনটি ধাপ, পণ্যের সারি যোগ-বাদ, শর্তসাপেক্ষ ঘর, server-এর উত্তর, সব একসাথে।

তখন হাতে লেখা কোডে তিন রকম ঝামেলা জমে:

• গতি: সব মান এক state-এ থাকলে প্রতিটি অক্ষরে পুরো form আবার render হয়।
• হিসাব: কোন ঘর ছোঁয়া হয়েছে, কোনটি বদলেছে, কোনটিতে ভুল, submit চলছে কি না, এগুলো আলাদা state হয়ে ছড়িয়ে পড়ে।
• নিয়মের কপি: ফোনের একই regex থাকে form-এ, API-তে, আবার TypeScript type-এ। একটি বদলালে বাকি দুটি পুরোনো থেকে যায়।

গতির কথাটি অনুমানে নয়, মেপে দেখা যাক। নিচের পাতায় ২০ ঘরের দুটি form. ওপরের ঘরে মান state-এ, নিচের ঘরে মান DOM-এ, আর React পায় শুধু ref. দুটির প্রথম ঘরে একই সংখ্যক অক্ষর লিখে “গণনা দেখুন” চাপুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const names = Array.from({ length: 20 }, (_, i) => 'f' + (i + 1));
const count = { controlled: 0, uncontrolled: 0 };
function Box({ kind, ...rest }) {
  count[kind]++;
  return <input size="2" aria-label={kind + ' ' + rest.name} {...rest} />;
}
function Controlled() {
  const [v, setV] = useState({});
  return <form><h4>Controlled</h4>{names.map(n => <Box key={n} kind="controlled" name={n}
    value={v[n] ?? ''} onChange={e => setV(o => ({ ...o, [n]: e.target.value }))} />)}</form>;
}
function Uncontrolled() {
  const refs = useRef({});
  const show = () => console.log('f1 =', refs.current.f1.value, JSON.stringify(count));
  return <form><h4>Uncontrolled</h4>{names.map(n => <Box key={n} kind="uncontrolled" name={n}
    ref={el => { refs.current[n] = el; }} defaultValue="" />)}
    <button type="button" onClick={show}>গণনা দেখুন</button></form>;
}
function App() {
  useEffect(() => console.log('শুরুতে', JSON.stringify(count)), []);
  return <><Controlled /><Uncontrolled /></>;
}
createRoot(document.getElementById('root')).render(<App />);
</script>

এই ভাবনাটিকেই একটি পূর্ণ library বানিয়েছে React Hook Form. ঘরের মান DOM-এ থাকে, library ref দিয়ে সব ঘরের হিসাব রাখে, আর আপনি শুধু দরকারি অংশে সাড়া দেন। সত্যিকারের Vite production build-এ Edge দিয়ে একই পরীক্ষা করা হলো: ২০ ঘরের form-এর সপ্তম ঘরে ১১টি keystroke.

সত্যিকারের run · লেখার সময়ে React 19.3.1, react-hook-form 7.91.0, Vite 8.3.5, Edge · একটি স্থানীয় run

শেষ সারিটি সবচেয়ে শিক্ষণীয়। Library বসালেই গতি আসে না। ওপরের স্তরে watch() ডাকলে আপনি controlled form-এর খরচেই ফিরে গেলেন। Mount-এ RHF একবার বাড়তি render করায়, এটি এককালীন খরচ, প্রতি keystroke-এর নয়।

২ · React Hook Form — register, handleSubmit, formState

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

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

export function AddressForm() {
  const {
    register, handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    defaultValues: { name: '', phone: '' },
    mode: 'onTouched',          // প্রথমবার ঘর ছাড়ার পর যাচাই
  });

  return (
    <form noValidate onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register('name', { required: 'নাম লিখুন' })} />
      <p>{errors.name?.message}</p>
      <input {...register('phone')} />
      <button disabled={isSubmitting}>অর্ডার</button>
    </form>
  );
}

প্রতিটি অংশের কাজ আলাদা:

• register('name') চারটি জিনিস ফেরত দেয়: name, ref, onChange, onBlur. তাই {...register()} স্প্রেড করলে ঘরটি জোড়া লেগে যায়। এখানে value নেই, অর্থাৎ ঘরটি uncontrolled.
• handleSubmit(fn) নিজেই একটি submit handler বানায়। সেটি preventDefault করে, যাচাই চালায়, সব ঠিক থাকলে তবেই আপনার fn ডাকে। দ্বিতীয় argument দিলে ব্যর্থতার সময় সেটি চলে।
• formState errors, isDirty, isSubmitting, isValid, touchedFields, submitCount রাখে। মান দরকার হলে render-এর সময়েই পড়ুন, কারণ library দেখে আপনি কোনটি পড়েছেন, আর শুধু সেটির বদলে render করায়। ওপরের ছকে isDirty-এর সারিতে render মাত্র ১ বার, প্রথম অক্ষরে, কারণ false থেকে true একবারই বদলায়।
• defaultValues প্রতিটি ঘরের জন্য দিন, এমনকি ''. isDirty এই মানের সঙ্গেই তুলনা করে।

কখন যাচাই হবে: mode

Submit-এর পরে ভুল ঘরগুলো আলাদা নিয়মে চলে: reValidateMode, যার ডিফল্ট onChange. অর্থাৎ একবার ভুল দেখালে ঠিক হওয়ামাত্র বার্তা সরে যায়।

৩ · Zod — নিয়ম একটি object-এ

এতক্ষণ required-এর মতো নিয়ম JSX-এর ভেতরে ছিল। তাতে নিয়ম আটকে যায় একটি component-এ, server তা ব্যবহার করতে পারে না। Zod নিয়মগুলোকে UI থেকে আলাদা করে একটি সাধারণ JavaScript object-এ রাখে, যাকে বলে schema. ডাকঘরের বাছাইয়ের ছকের মতো: চিঠি যে-ই আনুক, ছক একটাই। Zod আগে পরিচিত হয়েছে পর্ব ০৬-এ, এখানে form-এর দিক থেকে দেখা যাক।

Live বাক্সে npm package আসে না, তাই আগে Zod-এর ভাবনাটি ছোট আকারে নিজে লিখে দেখি। এটি শেখার মডেল, আসল Zod নয়। খেয়াল করুন তিনটি জিনিস: ভুল পেলে থেমে যায় না, প্রতিটি ভুলের সঙ্গে path থাকে, আর ফল হিসেবে আসে পরিষ্কার নতুন object.

const str = (rules = []) => ({
  min: (n, msg) => str([...rules, v => v.trim().length >= n || msg]),
  regex: (r, msg) => str([...rules, v => r.test(v) || msg]),
  run(v, path, issues) {
    if (typeof v !== 'string') return void issues.push({ path, message: 'লেখা দরকার' });
    rules.map(rule => rule(v)).filter(r => r !== true)
      .forEach(message => issues.push({ path, message }));
    return v.trim();
  },
});
const int = (lo, hi, msg) => ({ run(v, path, issues) {
  if (!Number.isInteger(v) || v < lo || v > hi) issues.push({ path, message: msg });
  return v; } });
const arr = (inner) => ({ run: (v, path, issues) => Array.isArray(v)
  ? v.map((x, i) => inner.run(x, [...path, i], issues))
  : void issues.push({ path, message: 'তালিকা দরকার' }) });
const obj = (shape) => ({
  run(v, path, issues) {
    const out = {};                        // অজানা key এখানেই বাদ পড়ে
    for (const k in shape) out[k] = shape[k].run(Object(v)[k], [...path, k], issues);
    return out;
  },
  safeParse(v) { const issues = [], data = this.run(v, [], issues);
    return issues.length ? { success: false, issues } : { success: true, data };
  },
});
const checkout = obj({
  name: str().min(2, 'পুরো নাম লিখুন'),
  phone: str().regex(/^01[3-9]\d{8}$/, '১১ সংখ্যার মোবাইল নম্বর দিন'),
  items: arr(obj({ sku: str().min(1, 'পণ্য বাছুন'), qty: int(1, 10, '১ থেকে ১০') })),
});
const r = checkout.safeParse({ name: 'র', phone: '0171', items: [{ sku: 'dal', qty: 0 }] });
r.issues.forEach(i => console.log(i.path.join('.'), '→', i.message));
const ok = { name: ' রহিমা ', phone: '01712345678', isAdmin: true, items: [{ sku: 'dal', qty: 2 }] };
console.log(JSON.stringify(checkout.safeParse(ok)));

এবার আসল Zod. বাজারঘরের schema থাকে একটি আলাদা ফাইলে, React ছাড়াই। Vite project-এ ইনস্টল করার কমান্ড:

npm create vite@latest bazarghar -- --template react-ts
cd bazarghar
npm install react-hook-form zod @hookform/resolvers

import { z } from 'zod';

const item = z.object({
  sku: z.string().min(1, 'পণ্য বাছুন'),
  qty: z.number().int('পূর্ণ সংখ্যা দিন')
        .min(1, 'অন্তত ১টি').max(10, 'একবারে সর্বোচ্চ ১০টি'),
});

export const checkoutSchema = z.object({
  name: z.string().trim().min(2, 'পুরো নাম লিখুন'),
  phone: z.string().regex(/^01[3-9]\d{8}$/, '১১ সংখ্যার মোবাইল নম্বর দিন'),
  city: z.enum(['dhaka', 'rajshahi', 'khulna', 'sylhet'], { error: 'শহর বাছুন' }),
  address: z.string().trim().min(10, 'ঠিকানা আরও বিস্তারিত লিখুন'),
  items: z.array(item).min(1, 'অন্তত একটি পণ্য রাখুন').max(20, 'সর্বোচ্চ ২০টি লাইন'),
  pay: z.enum(['cod', 'bkash'], { error: 'পেমেন্ট বাছুন' }),
  trxId: z.string().trim().optional(),
}).refine((d) => d.pay !== 'bkash' || (d.trxId ?? '').length >= 8, {
  path: ['trxId'],
  error: 'Transaction ID দিন',
});

export type Checkout = z.infer<typeof checkoutSchema>;

.parse() ভুল পেলে exception ছোড়ে। Form আর API-তে ভুল কোনো ব্যতিক্রম নয়, স্বাভাবিক ঘটনা, তাই safeParse ব্যবহার করুন। এটি একটি object ফেরত দেয়: { success: true, data } অথবা { success: false, error }. refine নিজের নিয়ম যোগ করে, আর path বলে দেয় ভুলটি কোন ঘরে দেখাবে।

সত্যিকারের run · zod 4.6.7, tsx, Node 24 · ~/bazarghar · ছাঁটা আউটপুট

$ npx tsx zod-demo.mts
…
B success: false
issue count: 7
name           too_small        পুরো নাম লিখুন
phone          invalid_format   ১১ সংখ্যার মোবাইল নম্বর দিন
city           invalid_value    শহর বাছুন
address        too_small        ঠিকানা আরও বিস্তারিত লিখুন
items.0.qty    too_small        অন্তত ১টি
items.1.sku    too_small        পণ্য বাছুন
items.1.qty    invalid_type     পূর্ণ সংখ্যা দিন
--- flatten
{"formErrors":[],"fieldErrors":{…,"items":["অন্তত ১টি","পণ্য বাছুন","পূর্ণ সংখ্যা দিন"]}}

শেষ লাইনটি লক্ষ করুন। z.flattenError সহজ, কিন্তু নেস্টেড ভুলগুলো এক items-এ গুলিয়ে ফেলে। কোন সারির ভুল, তা হারিয়ে গেল। তাই সারিওয়ালা form-এ error.issues-এর path ব্যবহার করুন: i.path.join('.') দেয় items.1.qty, যা React Hook Form-এর ঘরের নামের সঙ্গে হুবহু মেলে। এই মিলটিই পরের সব কিছুর ভিত্তি।

Type আলাদা করে লিখতে হয় না

z.infer schema থেকে TypeScript type বের করে, এটি পর্ব ০৬-এর type inference-এরই ব্যবহার। ফলে নিয়ম আর type আলাদা হতে পারে না। ভুল মান দিলে build-এর আগেই ধরা পড়ে:

সত্যিকারের run · TypeScript 7.0.2

$ npx tsc -b
src/type-demo.ts(4,18): error TS2322: Type 'number' is not assignable to type 'string'.
src/type-demo.ts(4,37): error TS2322: Type '"cumilla"' is not assignable to type '"dhaka" | "khulna" | "rajshahi" | "sylhet"'.

৪ · Resolver — দুজনকে জোড়া, আর একটি submit-এর পথ

React Hook Form Zod-কে চেনে না, Zod-ও form চেনে না। মাঝখানে থাকে resolver, যেন দুই ভাষার মাঝে একজন দোভাষী। @hookform/resolvers package-এর zodResolver schema-র ভুলগুলোকে RHF-এর errors আকারে সাজায়। Resolver দিলে register-এর ভেতরের required ধরনের নিয়ম আর চলে না, সব নিয়ম schema-তেই।

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { checkoutSchema, type Checkout } from '../shared/checkout';

export const useCheckout = () => useForm<Checkout>({
  resolver: zodResolver(checkoutSchema),
  mode: 'onTouched',
  defaultValues: {
    name: '', phone: '', address: '', pay: 'cod', trxId: '',
    items: [{ sku: 'dal-1kg', qty: 1 }],
  },
});

এবার ধীরে দেখুন, একজন ক্রেতা ভুল ফোন দিয়ে submit করলেন, তারপর ঠিক করে আবার করলেন। মান: নাম ' রহিমা ' (দুই পাশে ফাঁকা), ফোন 0171. কোডটি handleSubmit-এর সরল রূপ।

1<form onSubmit={handleSubmit(send)}>2// handleSubmit-এর ভেতরে (সরল রূপ)3e.preventDefault();4state({ isSubmitting: true });5const r = await resolver(values);6if (noErrors(r)) await send(r.values);7else { show(r.errors); focusFirst(); }8state({ isSubmitting: false, submitCount + 1 });

শেষ ধাপটি ছোট কিন্তু দামি। সত্যিকারের run-এ ' রহিমা বেগম ' লিখে পাঠালে server-এ গেল "রহিমা বেগম". trim() আপনি হাতে লেখেননি। Schema শুধু যাচাই করে না, মান গুছিয়েও দেয়। ২০১৯ সালে Alexis King-এর “Parse, don’t validate” লেখাটি এই ভাবনাকে জনপ্রিয় করে: যাচাই শেষে হাতে থাকুক এমন ডেটা, যার ঠিক থাকা নিয়ে আর প্রশ্ন নেই।

৫ · এক schema, দুই পাহারাদার

ব্যাংকের গেটে দারোয়ান আছেন, আবার ভেতরের ভল্টেও আলাদা পাহারা আছে। গেটের দারোয়ান ভদ্রভাবে ফিরিয়ে দেন ভুল ঠিকানার মানুষকে, এতে সবার সময় বাঁচে। কিন্তু দেয়াল টপকে কেউ এলে ভল্টের পাহারাই শেষ ভরসা। Browser-এর যাচাই সেই গেট, server-এর যাচাই সেই ভল্ট।

কথাটি নিজে পরীক্ষা করা যায়। Browser, React বা form ছাড়াই curl দিয়ে ভুল ডেটা পাঠালাম। সবচেয়ে ভালো frontend-ও এখানে কিছুই করতে পারে না। দ্বিতীয় চেষ্টায় আকৃতি ঠিক, কিন্তু মজুত নেই, আর সঙ্গে একটি বাড়তি isAdmin.

সত্যিকারের run · একই checkout.ts, ছোট node:http server, 127.0.0.1 · কিছু header ছাঁটা

$ curl -i -X POST -H 'content-type: application/json' \
    --data-binary @payload.json http://127.0.0.1:5791/api/orders
HTTP/1.1 422 Unprocessable Entity
content-type: application/json

{"errors":[{"path":"name","message":"পুরো নাম লিখুন"},{"path":"phone","message":"১১ সংখ্যার মোবাইল নম্বর দিন"},{"path":"items.0.qty","message":"একবারে সর্বোচ্চ ১০টি"}]}

$ curl -i … --data-binary @payload2.json …
HTTP/1.1 409 Conflict
content-type: application/json

{"errors":[{"path":"items.0.qty","message":"মজুত আছে 2টি"}]}

Server-এর দিকটি নিচের live বাক্সে আসল node:http দিয়ে দেখুন। Package আনা যায় না, তাই schema-টি ছোট নিয়মের object. Client হিসেবে fetch চলছে, যা browser-এর কোনো যাচাই মানে না।

const http = require('node:http');
const rules = {
  name: v => (typeof v === 'string' && v.trim().length >= 2) || 'name: min 2',
  phone: v => (typeof v === 'string' && /^01[3-9]\d{8}$/.test(v)) || 'phone: 11 digits',
  qty: v => (Number.isInteger(v) && v >= 1 && v <= 10) || 'qty: 1 to 10',
};
function safeParse(input) {
  const body = Object(input), data = {}, errors = [];
  for (const key in rules) {
    const r = rules[key](body[key]);
    if (r === true) data[key] = body[key]; else errors.push({ path: key, message: r });
  }
  return errors.length ? { success: false, errors } : { success: true, data };
}
const server = http.createServer(async (req, res) => {
  let raw = '';
  for await (const chunk of req) raw += chunk;
  const reply = (code, body) => res.writeHead(code, { Connection: 'close' }).end(JSON.stringify(body));
  let input;
  try { input = JSON.parse(raw); } catch { return reply(400, { message: 'bad JSON' }); }
  const r = safeParse(input);
  if (!r.success) return reply(422, { errors: r.errors });
  const total = 120 * r.data.qty;           // দাম server-এর নিজের হিসাব
  reply(201, { saved: r.data, total });
});
server.listen(0, '127.0.0.1', async () => {
  const url = `http://127.0.0.1:${server.address().port}/api/orders`;
  const send = (text) => fetch(url, { method: 'POST', body: text })
    .then(async (res) => console.log(res.status, await res.text()));
  await send('{broken');
  await send(JSON.stringify({ name: 'R', phone: ['01712345678'], qty: 0 }));
  await send(JSON.stringify({ name: 'Rahima', phone: '01712345678', qty: 2, price: 1, isAdmin: true }));
  server.close();
});

Express-এ এই কাজের পুরো রূপ, যেমন params আর query যাচাই ও middleware, আসবে পর্ব ২৭-এ (Request যাচাই). নিরাপদ ইনপুটের তত্ত্ব আছে API security পর্বে.

৬ · Async যাচাই আর server-এর ভুল field-এ ফেরানো

“এই ফোনে কি আগেই অ্যাকাউন্ট আছে?” এই প্রশ্নের উত্তর browser জানে না, server-কে জিজ্ঞেস করতে হয়। Zod-এ refine async হতে পারে, তাই অনেকে, আর AI প্রায়ই, schema-র ভেতরেই fetch বসান। দেখতে গোছানো, কিন্তু resolver প্রতিবার পুরো schema চালায়। সত্যিকারের run-এ একবার submit করে তারপর শুধু নাম ঘরে “রহিমা” লিখলাম:

সত্যিকারের run · Edge, production build · server-এর গণনা

submit-এর পরে           phoneChecks = 1
নাম ঘরে “রহিমা” লেখার পরে  phoneChecks = 6

“রহিমা” Unicode-এ ৫টি অক্ষর (র, হ, ি, ম, া), তাই ৫টি বাড়তি request, অথচ ফোন একবারও বদলায়নি। Server-এর ওপর এটি অকারণ চাপ। পথটি বদলান: async যাচাই schema-র বাইরে, ঘর ছাড়ার সময়।

const ctl = useRef<AbortController | null>(null);

async function checkPhone(e: React.FocusEvent<HTMLInputElement>) {
  const phone = e.target.value;
  if (!/^01[3-9]\d{8}$/.test(phone)) return;     // ভুল ধরনে কল নয়
  ctl.current?.abort();                          // আগের প্রশ্ন বাতিল
  ctl.current = new AbortController();
  try {
    const r = await fetch(`/api/phone-check?phone=${phone}`,
                          { signal: ctl.current.signal });
    const { taken } = await r.json();
    if (taken) setError('phone', { type: 'taken', message: 'এই নম্বরে আগেই অ্যাকাউন্ট আছে' });
    else clearErrors('phone');
  } catch (err) {
    if ((err as Error).name !== 'AbortError') console.warn('যাচাই হয়নি');
  }                                              // নেটওয়ার্ক গেলে আটকাবেন না
}
// <input {...register('phone', { onBlur: checkPhone })} />

AbortController পুরোনো উত্তরকে নতুন উত্তরের ওপর বসতে দেয় না, এটি race condition-এর চেনা সমাধান। টাইপের সময়েই যাচাই চাইলে debounce লাগবে, যা পর্ব ১৪-এ আছে। ঘর ছাড়ার সময় হলে তার দরকার নেই।

এবার গুরুত্বপূর্ণ কথাটি। সত্যিকারের run-এ 01711111111 দিলে blur-এ বার্তা এলো, তবু “পরের ধাপ” চাপতেই form এগিয়ে গেল। কারণ setError-এর ভুল schema জানে না, পরের যাচাইয়ে schema পাস করলে ভুলটি মুছে যায়। Library-র docs-ও বলে, এমন ভুল টিকে থাকার নিশ্চয়তা নেই। শেষে submit হতেই server বলল 409, আর form ক্রেতাকে ধাপ ১-এর ফোন ঘরে ফেরাল। এটিই ঠিক আচরণ: async যাচাই শুধু আগাম খবর, রায় নয়। দুজন একসাথে একই নম্বর নিলে দুজনকেই “খালি” বলা হতে পারে। শেষ পাহারা database-এর unique নিয়ম, যা আসবে পর্ব ৪৩-এ (Application-এ transaction).

Server-এর ভুল সঠিক ঘরে

ধরুন ক্রেতা ডাল ৩টি চেয়েছেন, মজুত ২টি। এই ভুল শুধু server জানে। পুরো পাতার ওপরে “কিছু একটা ভুল হয়েছে” দেখালে ক্রেতা বুঝবেন না কী করতে হবে। Server যদি ঘরের নাম পাঠায়, form ঠিক সেখানে বার্তা বসাতে পারে। আগেই দেখেছেন, Zod-এর path আর RHF-এর নাম একই ভাষা। তিন ধাপের checkout-এ এই ঘরটি আছে ধাপ ২-এ, আর ক্রেতা এখন ধাপ ৩-এ।

{ "phone": "01712345678",
  "items": [ { "sku": "dal-1kg",  "qty": 3 },
             { "sku": "rice-5kg", "qty": 1 } ],
  "pay": "bkash", "trxId": "8N7K2X1QPA" }

const parsed = checkoutSchema.safeParse(body);
parsed.success  // true

order.items.forEach((it, i) => {
  if (it.qty > stock[it.sku]) errors.push({
    path: `items.${i}.qty`,   // i = 0
    message: `মজুত আছে ${stock[it.sku]}টি`,
  });
});

{ "errors": [{
  "path": "items.0.qty",
  "message": "মজুত আছে 2টি"
}] }

const first = stepFields.findIndex(names =>
  names.some(n => list[0].path.startsWith(n)));  // 1
flushSync(() => setStep(first));

list.forEach((e, i) => setError(e.path, {
  type: 'server', message: e.message,
}, { shouldFocus: i === 0 }));
// পর্দায়: ডাল −  3  +   মজুত আছে 2টি

qty 3 → 2       // বার্তা মুছে গেল
POST /api/orders → 201
অর্ডার হয়েছে: BG-1001

কোনো ঘরের সঙ্গে না মেলা ভুলের জন্য, যেমন server বন্ধ, setError('root.server', { message }) ব্যবহার করুন আর errors.root?.server form-এর ওপরে দেখান। এই ভুল পরের submit-এ নিজে থেকে মুছে যায়।

৭ · Controller, field array আর file input

register চলে সাধারণ HTML ঘরে, কারণ সে ref ধরে DOM পড়ে। কিন্তু date picker, UI library-র select বা নিজের বানানো পরিমাণ-বাটনে পড়ার মতো DOM মান নেই। তখন Controller মধ্যস্থতা করে: সে আপনাকে value, onChange, onBlur, ref দেয়, আপনি component-এ জুড়ে দেন।

<Controller control={control} name={`items.${i}.qty`}
  render={({ field }) => (
    <QtyStepper ref={field.ref} value={field.value}
      onChange={field.onChange} onBlur={field.onBlur} />
  )} />

field.ref বাদ দিলে কোড চলবে, কিন্তু ভুল হলে focus সেখানে যেতে পারবে না। React 19-এ ref সাধারণ prop হিসেবে আসে, forwardRef লাগে না। মনে রাখবেন, Controller সেই ঘরটিকে controlled বানায়, তাই সব ঘরে নয়, শুধু যেখানে দরকার।

Field array — সারি যোগ আর বাদ

কার্টে কয়টি পণ্য থাকবে আগে জানা নেই। চা-স্টলের বাকির খাতার মতো, নতুন সারি যোগ হয়, পুরোনো কাটা পড়ে। useFieldArray এই কাজের জন্য: fields, append, remove, move, insert, update, replace. প্রতিটি সারিতে সে নিজের একটি id তৈরি করে, যা key হিসেবে দিতে হয়।

const { fields, append, remove } = useFieldArray({ control, name: 'items' });

{fields.map((f, i) => (
  <div key={f.id}>                                {/* index নয়! */}
    <input {...register(`items.${i}.sku`)} />
    <button type="button" onClick={() => remove(i)}>বাদ</button>
  </div>
))}
<button type="button" onClick={() => append({ sku: '', qty: 1 })}>আরও পণ্য</button>

Index-কে key করলে uncontrolled ঘরে কী ঘটে, তা নিজে দেখুন। নিচের বাক্সটি ref-ভিত্তিক ছোট একটি field array. প্রতিটি পরিমাণ DOM-এ, আর “যাচাই” চাপলে ref থেকে পড়া হয়। প্রথমে “index-কে key” চিহ্নিত করুন, ডালের পরিমাণ ৫ করুন, ডাল “বাদ” দিন, তারপর “যাচাই” চাপুন। পরে পাতার বাক্সটি আবার চালিয়ে চিহ্ন ছাড়া একই কাজ করুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
let nextId = 3;
function Cart() {
  const [rows, setRows] = useState([{ id: 1, sku: 'ডাল' }, { id: 2, sku: 'চাল' }]);
  const [byIndex, setByIndex] = useState(false);
  const qty = useRef(new Map());
  useEffect(() => console.log('সারি:', rows.map(r => r.sku).join(', ')), [rows]);
  function read(e) {
    e.preventDefault();
    const items = rows.map(r => ({ sku: r.sku, qty: Number(qty.current.get(r.id).value) }));
    const bad = items.findIndex(x => !(x.qty >= 1 && x.qty <= 10));
    console.log(JSON.stringify(items), bad < 0 ? 'ঠিক আছে' : 'ভুল: items.' + bad + '.qty');
  }
  return (<form onSubmit={read}>
    {rows.map((r, i) => <p key={byIndex ? i : r.id}>{r.sku}{' '}
      <input type="number" aria-label={r.sku} defaultValue="1"
        ref={el => { if (el) qty.current.set(r.id, el); }} />
      <button type="button" onClick={() => setRows(rows.filter(x => x !== r))}>বাদ</button></p>)}
    <label><input type="checkbox" checked={byIndex}
      onChange={e => setByIndex(e.target.checked)} /> index-কে key</label>{' '}
    <button type="button" onClick={() => setRows([...rows, { id: nextId++, sku: 'নতুন' }])}>যোগ</button>{' '}
    <button>যাচাই</button>
  </form>);
}
createRoot(document.getElementById('root')).render(<Cart />);
</script>

File input

ধরুন মোবাইল ব্যাংকিংয়ের ক্রেতা চাইলে পেমেন্ট স্লিপের ছবি দিতে পারেন। type="file" সব সময় uncontrolled, আর register এতে FileList ফেরত দেয়, একটি File নয়। তাই schema-য় আগে প্রথম ফাইলটি বের করতে হয়। এখানে input আর output-এর type আলাদা, তাই useForm<In, unknown, Out> দিয়ে দুটি জানাতে হয়।

const slipSchema = z.object({
  slip: z.custom<FileList>()
    .transform((list) => list?.[0] as File | undefined)
    .pipe(z.file()
      .max(2_000_000, 'ফাইল ২ MB-এর বেশি')
      .mime(['image/png', 'image/jpeg'], 'শুধু PNG বা JPEG')
      .optional()),
});
type In = z.input<typeof slipSchema>;
type Out = z.output<typeof slipSchema>;

সত্যিকারের run · Edge, নকল ফাইল দিয়ে

ফাইল নেই              ok no file
slip.txt              blocked শুধু PNG বা JPEG
slip.png, 3,000,000 B  blocked ফাইল ২ MB-এর বেশি
slip.png, 300,000 B    ok slip.png 300000 bytes
JSON.stringify({ slip: file })  → {"slip":{}}

শেষ লাইনটি ফাঁদ। ফাইল JSON-এ যায় না, ফল আসে খালি {}, কোনো error ছাড়াই। তাই ফাইল পাঠাতে হয় FormData দিয়ে, আর এই কারণেই ফাইলের schema shared schema থেকে আলাদা রাখা হয়েছে। Browser-এর mime ধরন আসে ফাইলের নাম ও অপারেটিং সিস্টেম থেকে, যা সহজেই বদলানো যায়, তাই এটি শুধু দ্রুত প্রাথমিক বাধা। Server-এর দিক, multipart আর সীমা, আসবে পর্ব ৩০-এ (File upload).

৮ · Multi-step checkout

পুরো checkout এক পাতায় দিলে ফোনে লম্বা স্ক্রল হয়। তাই ধাপে ভাগ: ঠিকানা, পণ্য, পেমেন্ট। ভর্তির ফরমের কথা ভাবুন, এক পাতা শেষ না হলে পরের পাতায় যাওয়া যায় না, কিন্তু আগের পাতায় ফিরলে লেখা মুছে যায় না। মূল কৌশল তিনটি:

• একটিই useForm: সবার ওপরে একটি form, প্রতি ধাপের জন্য আলাদা নয়। ভেতরের component FormProvider আর useFormContext দিয়ে তা পায়, তাই prop drilling লাগে না।
• ধাপের নিয়ম trigger-এ: trigger(['name', 'phone']) শুধু এই ঘরগুলোর ফল জানায়। পুরো schema একবারে একটিই থাকে।
• মান মুছে যায় না: shouldUnregister-এর ডিফল্ট false, তাই ধাপ unmount হলেও মান store-এ থাকে।

1const [step, setStep] = useState(0);2async function next() {3  const ok = await trigger(stepFields[step], { shouldFocus: true });4  if (ok) setStep(step + 1);5}6{step === 0 && <Address />}7{step === 1 && <Cart />}8{step === 2 && <Payment />}9<form onSubmit={handleSubmit(send)}>

ধাপের নাম এক জায়গায় থাকে, যাতে ভুল ধাপ খুঁজে বের করতেও একই তালিকা কাজে লাগে:

export const stepFields = [
  ['name', 'phone', 'city', 'address'],
  ['items'],
  ['pay', 'trxId'],
] as const;

৯ · সবার জন্য error, ছোট ফাঁদ আর অন্য পথ

পর্ব ১২-এর accessibility নিয়ম এখানেও একই: label, aria-invalid, aria-describedby. React Hook Form শুধু এগুলো সহজ করে। সত্যিকারের run-এ খালি form-এ চাপ দিলে DOM-এ পাওয়া গেল focus name-এ, aria-invalid="true" আর aria-describedby="name-e". একটি ছোট component বারবার লেখা বাঁচায়:

// get, FieldError, Path আসে react-hook-form থেকে
function TextField({ name, label }: { name: Path<Checkout>; label: string }) {
  const { register, formState: { errors } } = useFormContext<Checkout>();
  const id = useId();
  const msg = (get(errors, name) as FieldError | undefined)?.message;
  return (
    <p>
      <label htmlFor={id}>{label}</label>
      <input id={id} {...register(name)} aria-invalid={!!msg}
        aria-describedby={msg ? `${id}-e` : undefined} />
      <span id={`${id}-e`} className="err">{msg}</span>
    </p>
  );
}

লাল রং একা বার্তা নয়, তাই লেখাও থাকবে। Focus ভুল ঘরে গেলে screen reader aria-describedby-র বার্তা পড়ে, তাই আলাদা ঘোষণার দরকার সাধারণত পড়ে না। সার্ভারের সাধারণ ভুলে role="alert" ভালো, যা একটি live region. কিন্তু দশটি ঘরে একসাথে role="alert" দিলে screen reader দশটি বার্তা একসাথে পড়তে পারে।

Zod-এর বার্তা নিজের লেখা না হলে ইংরেজি আসে, যেমন Invalid input: expected number, received string. Schema-র প্রতিটি নিয়মে বাংলা বার্তা দিন। আর ভুলে যাবেন না, শুধু নিয়মের ভাষা নয়, পর্ব ১২-এর বাংলা অঙ্কের সমস্যাও বড় form-এ থাকে: valueAsNumber ব্যবহার করলে '১২' হয় NaN.

পুরো project-এ যা চলল

সত্যিকারের run · ~/bazarghar · Vite build, Edge · পথের ফলগুলো সংক্ষেপে সাজানো

$ npm ls --depth=0        # লেখার সময়ে, ছাঁটা
+-- @hookform/resolvers@7.0.1
+-- react-hook-form@7.91.0
+-- react@19.3.1
+-- vite@8.3.5
`-- zod@4.6.7

ধাপ 1 / 3   খালি next → errors: name, phone, city, address
ধাপ 1 / 3   ফোন 01711111111 blur → এই নম্বরে আগেই অ্যাকাউন্ট আছে
ধাপ 2 / 3   সারি 2, পরিমাণ ['3', '1']
ধাপ 3 / 3   bkash, ID নেই → Transaction ID দিন · focus: trx · request: 0
ধাপ 2 / 3   server 409 → মজুত আছে 2টি · focus: − বোতাম
ধাপ 3 / 3   পরিমাণ ['2', '1']
অর্ডার হয়েছে: BG-1001

TanStack Form — আরেকটি পথ

TanStack Form (লেখার সময়ে 1.33) একটি headless, framework-নিরপেক্ষ library, React ছাড়াও Vue, Angular, Solid, Svelte আর Lit-এর জন্য adapter আছে। form.Field component আর selector দিয়ে শুধু দরকারি অংশ subscribe করা যায়, type-এর দিকে এটি বেশ কড়া, আর async যাচাইয়ে নিজস্ব debounce আছে। React Hook Form-এর ecosystem আর উদাহরণ বেশি, তাই নতুন দলের জন্য পথটি সহজ। দুটিই ভালো, কোনটি নেবেন তা দলের অভ্যাসের প্রশ্ন। আর React 19-এর useActionState (পর্ব ১২) ছোট form-এ, Server Action (পর্ব ৫৪) Next.js-এ ভালো মানায়, সেখানেও একই Zod schema server-এ চলে।

১০ · AI-এর যুগে form

Form হলো AI-এর প্রিয় কাজ, কয়েক সেকেন্ডে সুন্দর কোড আসে। কিন্তু form চলা আর form নিরাপদ হওয়া আলাদা জিনিস। একটি সুন্দর checkout, যার API যা পায় তাই নেয়, তা AI-এর কোডে খুবই সাধারণ।

AI-এর লেখা form হাতে পেলে

• npm view দিয়ে package-গুলো আসল কি না আর version কত, দেখেছি
• Form ছাড়া curl দিয়ে ভুল ডেটা, বাড়তি key আর বদলানো দাম পাঠিয়েছি
• মাঝের সারি বাদ, পেছনে ফেরা, দ্রুত দুইবার submit, সব করে দেখেছি
• Keyboard-এ পুরো form শেষ করেছি, focus ভুল ঘরে গেছে কি না দেখেছি
• Render গুনেছি, ওপরের স্তরে watch() আছে কি না দেখেছি
• কোডে কোনো গোপন key নেই, AI-কেও কোনো আসল secret দিইনি