form আর validation — ফর্ম থেকে মান পড়া, যাচাই আর নিরাপদে পাঠানো

১ · ফর্ম কেন — ব্যবহারকারীর কথা সার্ভারে পৌঁছানোর দরজা

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

এটিই পর্ব ০২-এর progressive enhancement: আগে এমন HTML, যা একাই কাজ করে; তার ওপর JavaScript. পর্ব ৩৭-এর DOM আর পর্ব ৩৮-এর event এখানে একসাথে কাজে লাগবে।

২ · ফর্মের গঠন — form, label, input-এর ধরন আর name

একটি অনলাইন দোকানের checkout ফর্ম দিয়ে শুরু করি। এই পর্বের বেশিরভাগ উদাহরণ এই ফর্মকে ঘিরে:

<form id="checkout" action="/api/orders" method="post">
  <label for="phone">মোবাইল নম্বর</label>
  <input id="phone" name="phone" type="tel" required
         pattern="01[3-9]\d{8}" autocomplete="tel" inputmode="numeric"
         aria-describedby="phone-hint">
  <small id="phone-hint">যেমন: 01712345678</small>

  <label for="district">জেলা</label>
  <select id="district" name="district" required>
    <option value="">বাছাই করুন</option>
    <option value="dhaka">ঢাকা</option>
  </select>

  <fieldset>
    <legend>পেমেন্ট</legend>
    <label><input type="radio" name="pay" value="cod" required> ক্যাশ অন ডেলিভারি</label>
    <label><input type="radio" name="pay" value="mobile"> মোবাইল ব্যাংকিং</label>
  </fieldset>

  <label><input type="checkbox" name="terms" required> শর্তাবলিতে রাজি</label>
  <button>অর্ডার করুন</button>
</form>

label কেন বাধ্যতামূলক — placeholder কেন যথেষ্ট নয়

অনেক ডিজাইনে ঘরের ভেতরের ধূসর লেখা (placeholder) দিয়েই label-এর কাজ চালানো হয়। সমস্যা তিনটি: টাইপ শুরু করলেই লেখাটি উধাও, ধূসর লেখা অনেকে পড়তে পারেন না, আর screen reader সবসময় placeholder-কে নাম হিসেবে পড়ে না। আসল <label> এসব মেটায়, আর label-এ চাপলে ঘরটি focus পায় — ছোট checkbox-এ আঙুল দিয়ে চাপার জন্য বড় সুবিধা। placeholder শুধু উদাহরণের জন্য (“যেমন: 01712345678”). এটি accessibility-র সবচেয়ে সস্তা জয়।

input-এর ধরন — প্রতিটি একটি ছোট চুক্তি

type attribute শুধু দেখতে কেমন হবে তা ঠিক করে না; এটি ব্রাউজারকে বলে মানটি কী ধরনের। তাতে তিনটি জিনিস বিনামূল্যে আসে: মোবাইলে মানানসই কিবোর্ড, নিজস্ব যাচাই, আর কখনো কখনো আলাদা নিয়ন্ত্রণ (যেমন তারিখ বাছাইয়ের ক্যালেন্ডার)।

দুটি সহযোগী attribute: inputmode শুধু মোবাইল কিবোর্ড বেছে দেয়, যাচাই ছাড়া (OTP-র ঘরে inputmode="numeric"). আর autocomplete বলে ঘরটি কোন তথ্যের — name, tel, street-address, new-password, one-time-code — যাতে ব্যবহারকারী এক চাপে পুরো ঠিকানা বসাতে পারেন।

৩ · মান পড়া — value সবসময় string, আর FormData

ফর্মের ঘরও DOM-এর object (পর্ব ৩৭), আর তাদের সবচেয়ে ব্যবহৃত property value. প্রায় সবাইকে একবার ভোগানো নিয়ম: value সবসময় একটি string, ঘরটি type="number" হলেও।

const qty = document.querySelector('#qty');      // <input type="number">
qty.value;            // "2"  — string!
qty.value + 1;        // "21" — যোগ নয়, জোড়া লাগানো
qty.valueAsNumber;    // 2    — ফাঁকা বা অবৈধ হলে NaN
Number(qty.value);    // 2    — কিন্তু ফাঁকা ঘরে 0! (Number("") === 0)

document.querySelector('#dob').valueAsDate;    // Date (UTC মধ্যরাত) বা null
document.querySelector('[name=terms]').checked; // true / false
document.querySelector('[name=pay]:checked')?.value;   // বাছাই করা radio, নইলে undefined
[...document.querySelector('#tags').selectedOptions].map((o) => o.value);  // select multiple

FormData — পুরো ফর্ম একবারে

দশটি ঘরে দশবার querySelector না লিখে FormData সব ঘর name ধরে এক লাইনে তুলে আনে — ঠিক যে ডেটা ব্রাউজার সাধারণ submit-এ পাঠাত (পর্ব ৩৫):

const fd = new FormData(form);
fd.get('phone');              // "01712345678"
fd.getAll('tags');            // [ "gift", "fragile" ] — একই name-এর সব মান
Object.fromEntries(fd);       // { phone: "...", district: "dhaka", pay: "cod", terms: "on", tags: "fragile" }
                              //  ↑ একই name বারবার থাকলে শুধু শেষটি থাকে!
fd.has('terms');              // টিক না দেওয়া checkbox হলে false — একেবারেই অনুপস্থিত

৪ · submit event — preventDefault, requestSubmit আর input বনাম change

বোতাম চাপলে বা কোনো ঘরে Enter দিলে <form>-এর ওপর একটি submit event আসে — তাই listener বসান ফর্মে, বোতামের click-এ নয় (নইলে Enter দিয়ে জমা দেওয়া ব্যবহারকারীরা বাদ পড়েন)। ডিফল্টভাবে ব্রাউজার ডেটা নিয়ে action-এর ঠিকানায় নতুন পাতা খোলে; নিজে পাঠাতে চাইলে সেটি থামান preventDefault() দিয়ে (পর্ব ৩৮):

form.addEventListener('submit', (e) => {
  e.preventDefault();                       // পাতা বদলাবে না
  const data = Object.fromEntries(new FormData(form));
  // … যাচাই, তারপর fetch (অংশ ৮)
});

form.requestSubmit();   // ✓ যাচাই চলে, submit event আসে — বোতাম চাপার মতো
form.submit();          // ✗ যাচাই নেই, submit event নেই — সরাসরি পাঠিয়ে দেয়

input বনাম change — কখন কোনটি

input আসে প্রতিটি পরিবর্তনে — অক্ষর টাইপ, মুছে ফেলা, পেস্ট। change আসে মান “চূড়ান্ত” হলে: লেখার ঘরে focus সরে যাওয়ার সময় (মান বদলে থাকলে), আর checkbox, radio, select-এ সাথে সাথে। আমরা Edge-এ “0171” টাইপ করে তারপর অন্য ঘরে গিয়ে দেখেছি: চারটি input (0, 01, 017, 0171), তারপর একটিমাত্র change. কোডের মাধ্যমে el.value = … বসালে এ দুটির কোনোটিই আসে না — দরকার হলে নিজে el.dispatchEvent(new Event('input', { bubbles: true })) পাঠাতে হয়, যা এই পর্বের ডেমোগুলো করে।

input আর change bubble করে, তাই ফর্মে একটি listener-ই যথেষ্ট (পর্ব ৩৮-এর event delegation; e.target বলে কোন ঘর)। focus/blur bubble করে না — ফর্ম-স্তরে focusin/focusout ব্যবহার করুন।

৫ · HTML-এর নিজস্ব যাচাই — required, pattern, min/max আর ValidityState

এক লাইন JavaScript না লিখেই ব্রাউজার অনেক যাচাই করে দেয়। এর নাম constraint validation — প্রতিটি ঘরে কিছু “শর্ত” (constraint) attribute দিয়ে লেখা থাকে, আর জমা দেওয়ার আগে ব্রাউজার সেগুলো মিলিয়ে দেখে:

pattern — নিজে থেকেই anchor করা

পর্ব ৩০-এ দেখেছেন, যাচাইয়ের regex-এ ^…$ ভুলে গেলে আগে-পরে যা খুশি জুড়ে দেওয়া যায়। pattern-এ এই ঝুঁকি নেই: ব্রাউজার নিজেই নকশাকে ^(?:…)$ দিয়ে মুড়ে নেয়। আমরা যাচাই করেছি, pattern="01[3-9]\d{8}"-এ “x01712345678” আর “ 01712345678” (শুরুতে space) দুটিই patternMismatch. একটি নতুন ফাঁদ: HTML মানদণ্ড এখন pattern-কে regex-এর v flag দিয়ে compile করতে বলে, আর নতুন Edge তা-ই করে। ফলে character class-এ খালি - বা ( থাকলে নকশাটি অবৈধ, আর অবৈধ pattern ব্রাউজার চুপচাপ উপেক্ষা করে — আমাদের পরীক্ষায় pattern="[a-z-]+" “!!”-কেও বৈধ বলেছে। escape করুন: [a-z\-].

type="email"-এর নিয়ম ইচ্ছা করেই ঢিলেঢালা: Edge-এ “a@b” বৈধ (ডট বাধ্যতামূলক নয়), “a@b.” অবৈধ, “আমি@x.com” অবৈধ। ঠিকানাটি সত্যিই কারও কি না, জানার একমাত্র উপায় confirmation ইমেইল। জমা দেওয়ার মুহূর্তে ব্রাউজার কী কী করে, দেখুন। “পরে” চাপুন:

বোতাম চাপা, Enter, form.requestSubmit()  → যাচাই চলবে
<form novalidate> বা <button formnovalidate> → যাচাই বাদ
form.submit()                              → যাচাই বাদ, submit event-ও বাদ

name     ""             → valueMissing     ✗
phone    "01212345678"  → patternMismatch  ✗
district "dhaka"        → ✓
terms    checked        → ✓
disabled, readonly আর type="button" ঘর যাচাইয়ে পড়ে না (willValidate = false)

form.addEventListener('invalid', (e) => {   // capture: true দরকার
  e.target.validity.valueMissing && e.target.setCustomValidity('এই ঘরটি পূরণ করুন');
}, true);
name আর phone — দুটি ঘরেই invalid আসে, শুধু প্রথমটিতে নয়

focus → name ঘর
বুদবুদ: "Please fill out this field."   (Edge, ইংরেজি সেটিংসে)
submit event: আসেনি  → আপনার handler চলেনি

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form));   // → fetch
});

ValidityState — একটি ঘরের রিপোর্ট কার্ড

প্রতিটি ঘরের el.validity একটি ValidityState object — ওপরের টেবিলের প্রতিটি flag-এর জন্য একটি true/false, আর সবশেষে valid, যা সত্য শুধু তখন, যখন বাকি সব মিথ্যা। একটি ফোন ঘর ধরুন: <input type="tel" required minlength="11" pattern="01[3-9]\d{8}">. বিভিন্ন মানে এর রিপোর্ট কার্ড কেমন দাঁড়ায়, দেখুন (সব মান Edge-এ যাচাই করা):

৬ · Constraint Validation API — বাংলা বার্তা আর নিজের নিয়ম

ব্রাউজারের বুদবুদের দুর্বলতা: বার্তা ব্রাউজারের ভাষায় আর সাধারণ, ডিজাইন বদলানো যায় না, আর কিছুক্ষণ পর মিলিয়ে যায়। সমাধান Constraint Validation API: HTML-এর শর্তগুলো রেখে দেওয়া, কিন্তু বার্তা দেখানোর কাজ নিজের হাতে নেওয়া।

চালিয়ে দেখুন — বাংলা বার্তাসহ checkout ফর্ম

নিচের কোড novalidate বসায় JavaScript থেকে (form.noValidate = true) — JavaScript না চললে ব্রাউজারের যাচাই থাকে, চললে আমাদের বাংলা বার্তা। HTML-এর শর্ত বদলায়নি; আমরা শুধু validity পড়ছি। কোডটি নিজে তিনবার জমার চেষ্টা করে, যাতে প্রতিবার একই আউটপুট আসে। তারপর ওপরের ফর্মে নিজে লিখে “অর্ডার করুন” চেপে দেখুন।

const form = document.querySelector('#checkout');
const MSG = { valueMissing: 'এই ঘরটি পূরণ করুন', patternMismatch: '01XXXXXXXXX আকারে ১১ অঙ্ক লিখুন', tooShort: 'আরও একটু বিস্তারিত লিখুন' };
const problemOf = (el) => Object.keys(MSG).find((flag) => el.validity[flag]);
form.noValidate = true;                       // JavaScript চললে বার্তা আমরাই দেখাব
function showError(el) {
  const flag = el.checkValidity() ? null : problemOf(el);
  el.setAttribute('aria-invalid', flag ? 'true' : 'false');
  form.querySelector(`#${el.name}-err`).textContent = flag ? MSG[flag] : '';
  return flag;
}
form.addEventListener('submit', (e) => {
  e.preventDefault();                         // পাতা reload হবে না
  const bad = [...form.elements].filter((el) => el.willValidate && el.name && showError(el));
  if (bad.length) {
    console.log('ভুল:', [...new Set(bad.map((el) => `${el.name}=${problemOf(el)}`))].join(', '));
    return bad[0].focus();                    // প্রথম ভুল ঘরে নিয়ে যাওয়া
  }
  console.log('পাঠানো হবে:', JSON.stringify(Object.fromEntries(new FormData(form))));
});
const fill = (key, value) => { form.elements[key].value = value; };
form.requestSubmit();                                         // ১) সব ফাঁকা
fill('name', 'রহিম উদ্দিন'); fill('phone', '01212345678'); fill('district', 'rajshahi');
fill('address', 'বাড়ি ১২, সাহেব বাজার'); fill('pay', 'cod');
form.requestSubmit();                                         // ২) দুটি ভুল বাকি
fill('phone', '01712345678'); form.elements.terms.checked = true;
form.requestSubmit();                                         // ৩) সব ঠিক

ভুল: name=valueMissing, phone=valueMissing, district=valueMissing, address=valueMissing, pay=valueMissing, terms=valueMissing
ভুল: phone=patternMismatch, terms=valueMissing
পাঠানো হবে: {"name":"রহিম উদ্দিন","phone":"01712345678","district":"rajshahi","address":"বাড়ি ১২, সাহেব বাজার","pay":"cod","terms":"on"}

CSS দিয়ে দেখানো — :invalid বনাম :user-invalid

CSS-এর :invalid পাতা খোলার মুহূর্তেই সব ফাঁকা required ঘরের সাথে মেলে — কিছু লেখার আগেই পুরো ফর্ম লাল! সমাধান CSS Selectors Level 4-এর :user-invalid: এটি মেলে শুধু ব্যবহারকারী ঘরটির সাথে কাজ করার পর — মান বদলে ঘর ছেড়ে গেলে, বা জমার চেষ্টা করলে। আমরা Edge-এ যাচাই করেছি: “0171” টাইপ করার সময় :user-invalid মেলেনি, অন্য ঘরে যাওয়ার পর মিলেছে। Firefox ৮৮ (২০২১), Safari ১৬.৫ আর Chrome/Edge ১১৯ (২০২৩) থেকে এটি সমর্থন করে।

input:user-invalid { border-color: #b00020; }
input:user-valid   { border-color: #1b7f3b; }
/* শুধু রঙ যথেষ্ট নয় — পাশে লেখায় বার্তাও দিন (অংশ ৭) */

৭ · ভালো অভিজ্ঞতা — কখন বলবেন, কীভাবে বলবেন, কাকে বলবেন

কখন ভুল দেখাচ্ছেন, সেটিও নিয়মের মতোই জরুরি। এক চরম: শুধু জমার সময় সব ভুল একসাথে — দশটি ঘর পূরণের পর জানা গেল প্রথম ঘরেই ভুল। অন্য চরম: প্রথম অক্ষর টাইপ করতেই লাল বার্তা — “চিৎকার করা ফর্ম”। মাঝামাঝি পথটি inline validation-এর সবচেয়ে প্রচলিত নিয়ম:

1focus      ঘরে ঢুকলেন2input      "01"3input      "0171"4blur       অন্য ঘরে গেলেন5input      "0171234"6input      "01712345678"

সবার জন্য error — রঙ নয়, লেখা

শুধু লাল বর্ডার বর্ণান্ধ আর screen reader ব্যবহারকারীদের কাছে অদৃশ্য। তাই প্রতিটি error-এর চারটি অংশ:

• লেখায় বার্তা, ঘরের কাছে — কী ভুল আর কীভাবে সারাবেন (“01 দিয়ে শুরু করে ১১ অঙ্ক”), শুধু “ভুল ইনপুট” নয়।
• aria-invalid="true" ঘরে — screen reader ঘরটিকে “invalid” বলে ঘোষণা করে।
• aria-describedby দিয়ে বার্তার element-কে ঘরের সাথে জোড়া — focus এলে নামের পরে বার্তাটিও পড়া হয়।
• জমা ব্যর্থ হলে প্রথম ভুল ঘরে focus; লম্বা ফর্মে ওপরে একটি error summary — ভুলগুলোর তালিকা, প্রতিটি সংশ্লিষ্ট ঘরের লিংক।

<div id="errors" role="alert" tabindex="-1">
  <h2>২টি ঘর ঠিক করুন</h2>
  <ul>
    <li><a href="#phone">মোবাইল নম্বর: 01XXXXXXXXX আকারে ১১ অঙ্ক লিখুন</a></li>
    <li><a href="#terms">শর্তাবলিতে রাজি হতে টিক দিন</a></li>
  </ul>
</div>

এটি alert()-এর চেয়ে অনেক ভালো: alert বন্ধ করলেই বার্তা উধাও, আর কোন ঘরে ভুল তা বোঝা যায় না। এই নিয়মগুলো শুধু ভদ্রতা নয় — WCAG-এর “Error Identification” (3.3.1) নিয়ম বলে, স্বয়ংক্রিয়ভাবে ধরা ভুল লেখায় বর্ণনা করতে হবে (ভাবনার প্রশ্ন ০৫)।

OTP আর ফাইল — দুটি বিশেষ ঘর

OTP-র ছয়টি আলাদা বাক্সে পেস্ট, মুছে ফেলা, autofill সব নিজে সামলাতে হয়; একটি ঘরই সাধারণত ভালো:

<label for="otp">SMS-এ পাওয়া ৬ অঙ্কের কোড</label>
<input id="otp" name="otp" type="text" inputmode="numeric"
       autocomplete="one-time-code" pattern="\d{6}" maxlength="6" required>

type="number" নয়, কারণ OTP সংখ্যা নয় — শুরুর 0 হারিয়ে যেতে পারে। autocomplete="one-time-code" দিলে অনেক মোবাইল ব্রাউজার SMS থেকে কোডটি কিবোর্ডের ওপর পরামর্শ হিসেবে দেখায়।

ফাইলের ঘরে (type="file") accept="image/*" শুধু বাছাইয়ের জানালায় ফিল্টার করে — ব্যবহারকারী চাইলে “সব ফাইল” বেছে যেকোনো কিছু দিতে পারেন। আকার আর ধরন JavaScript-এ যাচাই করুন, আর server-এ আবার:

photo.addEventListener('change', () => {
  const file = photo.files[0];
  if (!file) return;
  if (file.size > 2 * 1024 * 1024) return photo.setCustomValidity('ছবি ২ MB-এর বেশি হতে পারবে না');
  photo.setCustomValidity('');
  const url = URL.createObjectURL(file);           // ফাইলটি না পাঠিয়েই দেখানো
  preview.src = url;
  preview.onload = () => URL.revokeObjectURL(url); // মেমরি ছেড়ে দেওয়া
});

৮ · পাঠানো আর server-এর উত্তর — async যাচাই, দুবার জমা, 422 আর নিরাপত্তা

ইউজারনেম খালি আছে কি না — debounce করা async যাচাই

“এই ইউজারনেম কি আগেই নেওয়া?” — এর উত্তর আছে শুধু server-এর ডেটাবেসে। প্রতিটি অক্ষরে অনুরোধ পাঠালে অর্থহীন অনুরোধের বন্যা, আর উত্তর উল্টো ক্রমে এলে ভুল ফল (পর্ব ৩৬-এর race condition). তাই async validation-এ লাগে debounce আর আগের অনুরোধ বাতিল:

let timer, controller;
username.addEventListener('input', () => {
  username.setCustomValidity('');                       // পুরোনো ফল মুছুন
  clearTimeout(timer);
  timer = setTimeout(async () => {                      // ৪০০ ms থামলে তবেই
    controller?.abort();                                // আগের অনুরোধ বাতিল
    controller = new AbortController();
    const q = encodeURIComponent(username.value);
    const res = await fetch(`/api/username-available?u=${q}`, { signal: controller.signal });
    const { available } = await res.json();
    username.setCustomValidity(available ? '' : 'এই নামটি আগেই নেওয়া হয়েছে');
    hint.textContent = available ? '✓ নামটি খালি আছে' : username.validationMessage;
  }, 400);
});

জমা দেওয়ার পুরো পথ

জমা দেওয়া থেকে ফল দেখানো পর্যন্ত প্রতিটি ধাপে একটি করে ভুলের সুযোগ। পুরো পথটি দেখুন:

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  if (sending) return;          // আগের অনুরোধ এখনো চলছে

if (!form.reportValidity()) return;   // প্রথম ভুল ঘরে focus
এই ধাপ কেউ DevTools বা curl দিয়ে এড়াতে পারে — তাতে সমস্যা নেই,
কারণ ধাপ ৪ আছে

btn.disabled = true; sending = true;
const res = await fetch('/api/orders', {
  method: 'POST',
  body: new FormData(form),    // ফাইল থাকলে এটিই; নইলে JSON-ও চলে
});

HTTP/1.1 422 Unprocessable Content
Content-Type: application/json

{ "errors": { "phone": "এই নম্বরে আগেই অ্যাকাউন্ট আছে",
              "district": "এই জেলায় এখনো ডেলিভারি নেই" } }

for (const [key, msg] of Object.entries(body.errors)) {
  form.elements[key].setCustomValidity(msg);
  form.elements[key].setAttribute('aria-invalid', 'true');
}
form.reportValidity();            // প্রথম ভুল ঘরে focus
finally { btn.disabled = false; sending = false; }

চালিয়ে দেখুন — sign-up: পাসওয়ার্ড মেলানো, দুবার জমা আর server-এর 422

এখানে server-এর জায়গায় একটি নকল function, যা ১০০ ms পরে আসল Response object ফেরত দেয় — “rahim” নামটি “নেওয়া”। তাই res.ok, res.status, res.json() হুবহু fetch-এর মতো। চালানোর পর ওপরের ফর্মে নিজে পাসওয়ার্ড দুটি আলাদা লিখে বা নাম “rahim” দিয়ে চেষ্টা করুন।

const form = document.querySelector('#signup'), btn = form.querySelector('button');
const { username, password, password2 } = form.elements;
const fakeServer = (data) => new Promise((r) => setTimeout(r, 100)).then(() => data.username === 'rahim'
  ? Response.json({ errors: { username: 'এই নামটি আগেই নেওয়া হয়েছে' } }, { status: 422 })
  : Response.json({ id: 7 }, { status: 201 }));       // আসল অ্যাপে: fetch('/api/signup', …)
form.noValidate = true;                                 // যাচাই চলবে submit handler-এ
form.addEventListener('input', (e) => {
  if (e.target === username) username.setCustomValidity('');   // পুরোনো server-বার্তা মুছুন
  password2.setCustomValidity(password2.value === password.value ? '' : 'দুটি পাসওয়ার্ড মেলেনি');
});
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  if (btn.disabled) return console.log('পাঠানো চলছে — দ্বিতীয় submit উপেক্ষা');
  if (!form.reportValidity()) return console.log('client:', password2.validationMessage);
  btn.disabled = true;
  try {
    const res = await fakeServer(Object.fromEntries(new FormData(form))), body = await res.json();
    if (res.ok) return console.log('সফল:', res.status, body);
    for (const [key, msg] of Object.entries(body.errors)) form.elements[key].setCustomValidity(msg);
    form.reportValidity(); console.log('server', res.status, '→', username.validationMessage);
  } finally { btn.disabled = false; }
});
const type = (el, v) => { el.value = v; el.dispatchEvent(new Event('input', { bubbles: true })); };
type(username, 'rahim'); type(password, 'dhaka2026'); type(password2, 'dhaka2025');
form.requestSubmit();                                           // ১) পাসওয়ার্ড মেলেনি
type(password2, 'dhaka2026'); form.requestSubmit(); form.requestSubmit();  // ২) দ্রুত দুবার
setTimeout(() => { type(username, 'rahim_bd'); form.requestSubmit(); }, 400);   // ৩) নাম বদলে

client: দুটি পাসওয়ার্ড মেলেনি
পাঠানো চলছে — দ্বিতীয় submit উপেক্ষা
server 422 → এই নামটি আগেই নেওয়া হয়েছে
সফল: 201 { id: 7 }

নিরাপত্তা — client-কে কখনো বিশ্বাস নয়

DevTools-এ required মোছা যায়, JavaScript বন্ধ করা যায়, ফর্ম ছাড়াই সরাসরি HTTP অনুরোধ পাঠানো যায়। তাই server-এর অলঙ্ঘনীয় নিয়ম:

• প্রতিটি নিয়ম server-এ আবার — ধরন, দৈর্ঘ্য, সীমা, তালিকার মান। দুই দিকে একই নিয়ম রাখতে অনেক দল একটি schema ভাগ করে ব্যবহার করে।
• দাম, ছাড়, মোট টাকা ফর্ম থেকে নয়। <input type="hidden" name="price"> যে কেউ বদলাতে পারেন; ফর্ম থেকে নিন শুধু পণ্যের id আর পরিমাণ। এই আক্রমণের নাম parameter tampering.
• লগইন-করা ব্যবহারকারীর ফর্মে CSRF সুরক্ষা — CSRF token আর SameSite cookie (পর্ব ৪০, ৪৩)।
• ব্যবহারকারীর লেখা দেখাতে textContent, innerHTML নয় — নইলে XSS (পর্ব ৪৩)।
• Bot ঠেকানো: লুকানো honeypot ঘর আর বারবার চেষ্টায় rate limit — বিশেষ করে OTP ফর্মে, কারণ প্রতিটি SMS-এর খরচ আছে।

৯ · AI-এর যুগে — AI-এর লেখা ফর্ম যাচাই করা

AI কয়েক সেকেন্ডে সুন্দর একটি ফর্ম দেয়, যা ডেমোতে কাজও করে। কিন্তু ফর্মের আসল সমস্যা ধরা পড়ে ধীর নেটওয়ার্কে, screen reader-এ, ভুল ইনপুটে বা কেউ ইচ্ছা করে ভাঙতে চাইলে। বারবার দেখা ভুলগুলো:

AI-এর ফর্ম হাতে পেলে — যাচাইয়ের চেকলিস্ট

• প্রতিটি ঘরে <label> আছে (label-এ চাপলে ঘর focus পায়), আর name আছে
• সঠিক type, inputmode, autocomplete — মোবাইলে খুলে কিবোর্ড দেখেছি
• শুধু কিবোর্ড দিয়ে (Tab, Enter, Space) পুরো ফর্ম পূরণ ও জমা দিতে পেরেছি
• ভুল ইনপুটে লেখায় বার্তা আসে, ঠিক করলে বার্তা যায় আর ফর্ম জমা হয় (setCustomValidity('') আছে)
• DevTools-এর Network-এ “Slow 3G” দিয়ে বোতাম দুবার চেপেছি — অনুরোধ একবারই গেছে
• DevTools-এ required মুছে বা curl দিয়ে ভুল ডেটা পাঠিয়েছি — server 422 দিয়েছে, ডেটা ঢোকেনি