ফর্মের নানা কন্ট্রোল আর built-in validation

১ · ফর্ম একটি কথোপকথন — প্রশ্নের ধরন দেখে কন্ট্রোল

ব্যাংকে হিসাব খুলতে গেলে একটি ছাপা ফর্ম পূরণ করতে হয়। খেয়াল করলে দেখবেন, ফর্মের প্রতিটি প্রশ্নের উত্তর দেওয়ার ধরন আলাদা। নামের জন্য ফাঁকা লাইন। “হিসাবের ধরন”-এর পাশে তিনটি গোল ঘর — সঞ্চয়ী, চলতি, স্থায়ী — যেকোনো একটিতে টিক। “কোন কোন সেবা চান” — এটিএম কার্ড, SMS, ইন্টারনেট ব্যাংকিং — যতগুলো খুশি চৌকো ঘরে টিক। আর নিচে “ঠিকানা” লেখার জন্য কয়েক লাইনের বড় জায়গা।

যিনি ফর্মটি ছাপিয়েছেন, তিনি প্রতিটি প্রশ্নের জন্য ভেবেচিন্তে উত্তরের ঘর বেছেছেন। ঘর ঠিক থাকলে ভুল কম হয়, পূরণ করতে সময় কম লাগে। ওয়েবের ফর্মেও ঠিক তাই। পর্ব ০৮-এ আপনি ফর্মের ভিত্তি দেখেছেন — <form>, <input>, <label> আর <button>. এই পর্বে দেখবেন উত্তরের ঘরের পুরো ভাণ্ডার, যাদের একসাথে বলে form control, আর দেখবেন ব্রাউজার কীভাবে নিজেই উত্তর যাচাই করে।

২ · checkbox আর radio — “যত খুশি” বনাম “শুধু একটি”

Checkbox একটি চৌকো ঘর, যার দুটি অবস্থা — টিক আছে, টিক নেই। প্রতিটি checkbox নিজে স্বাধীন; একটিতে টিক দিলে অন্যটির কিছু হয় না। Radio button গোল ঘর, আর এরা সবসময় দলে থাকে: দলের একটি বাছলে আগেরটি নিজে থেকে উঠে যায়। নামটা এসেছে পুরোনো রেডিওর স্টেশন-বোতাম থেকে — একটি চাপলে আগেরটি লাফ দিয়ে উঠে আসত।

ব্রাউজার কীভাবে বোঝে কোন radio-গুলো এক দলের? একই name দেখে। এটাই এই অংশের সবচেয়ে জরুরি নিয়ম। আরও তিনটি জিনিস মনে রাখুন:

• value — জমা দিলে সার্ভারে কোন মান যাবে। পর্দায় লেখা থাকে “বিকাশ”, কিন্তু পাঠানো হয় value="bkash" — সার্ভারের জন্য ইংরেজি ছোট কোড সুবিধাজনক। checkbox-এ value না দিলে ব্রাউজার পাঠায় on.
• checked — একটি boolean attribute; পাতা খোলার সময় কোনটিতে আগে থেকেই টিক থাকবে।
• টিক না দেওয়া checkbox কিছুই পাঠায় না — না নাম, না মান। সার্ভার “না” শোনে না, কিছুই শোনে না। তাই সার্ভারে “না পেলে মানে না” ধরে নিতে হয়।

একদল radio বা সম্পর্কিত checkbox-কে মুড়ে দিন <fieldset> দিয়ে, আর দলের প্রশ্নটি লিখুন তার প্রথম সন্তান <legend>-এ। তাহলে screen reader প্রতিটি বোতামের আগে প্রশ্নটিও শোনায় — “ক্লাসের সময়, দল; সকাল, রেডিও বাটন, ৩টির ১ম”. শুধু “সকাল” শুনলে শ্রোতা বুঝতেন না প্রশ্নটা কী ছিল।

<form>
  <fieldset>
    <legend>কোন কোন কোর্সে আগ্রহী? (যত খুশি)</legend>
    <label><input type="checkbox" name="course" value="html" checked> HTML ও CSS</label><br>
    <label><input type="checkbox" name="course" value="js"> JavaScript</label><br>
    <label><input type="checkbox" name="course" value="python"> Python</label>
  </fieldset>
  <fieldset>
    <legend>ক্লাসের সময় (শুধু একটি)</legend>
    <label><input type="radio" name="shift" value="morning" checked> সকাল</label>
    <label><input type="radio" name="shift" value="evening"> সন্ধ্যা</label>
    <label><input type="radio" name="shift" value="weekend"> শুক্র-শনি</label>
  </fieldset>
  <p><label><input type="checkbox" name="sms"> SMS-এ খবর চাই</label></p>
  <button>জমা দিন</button>
</form>

৩ · select, optgroup, textarea আর datalist

select — লম্বা তালিকার ড্রপডাউন

৬৪টি জেলার জন্য ৬৪টি radio বসালে পাতা ভরে যাবে। তখন <select> — ক্লিক করলে খোলে এমন একটি তালিকা, যার প্রতিটি বিকল্প একটি <option>. বিকল্পগুলোকে দলে ভাগ করতে <optgroup label="ঢাকা বিভাগ"> — দলের নামটি নিজে বাছা যায় না, শুধু শিরোনাম হিসেবে দেখায়।

• <option>-এ value না দিলে তার ভেতরের লেখাটাই মান হয়ে যায়।
• selected — কোনটি আগে থেকে বাছা থাকবে। না দিলে প্রথমটি।
• multiple — একাধিক বাছাই (কম্পিউটারে Ctrl বা ⌘ চেপে ক্লিক)। তখন ড্রপডাউন না হয়ে খোলা একটি বাক্স দেখায়; size বলে কয়টি সারি দেখা যাবে। Ctrl চেপে বাছার কথা অনেকে জানেন না, তাই অল্প বিকল্পে checkbox-এর দল প্রায়ই ভালো।
• প্রথম বিকল্প <option value="">— বেছে নিন —</option> আর select-এ required দিলে, কেউ কিছু না বেছে জমা দিতে পারবেন না। এটাই select-এর “placeholder”.

textarea — কয়েক লাইনের লেখা

<textarea> হলো বড় লেখার ঘর — ঠিকানা, মতামত, অভিযোগ। এর দুটি অদ্ভুত স্বভাব আছে। এটা <input>-এর মতো খালি (void) element নয়, তাই </textarea> বন্ধ করতেই হয়। আর এর value attribute নেই — শুরুর লেখা বসে খোলা আর বন্ধ ট্যাগের মাঝখানে, এবং সেখানে ফাঁকা জায়গা আর নতুন লাইন যেমন লেখেন হুবহু তেমন থাকে। তাই <textarea> আর </textarea>-এর মাঝে কোড সুন্দর দেখাতে indent দিলে সেই ফাঁকাগুলোও ঘরের ভেতরে ঢুকে যায়। rows আর cols শুরুর মাপ বলে (CSS দিয়েও দেওয়া যায়)।

datalist — পরামর্শ দেয়, জোর করে না

কখনো চান ব্যবহারকারী যা খুশি লিখুন, কিন্তু সাধারণ উত্তরগুলো পরামর্শ হিসেবে দেখুক — যেমন ব্যাংকের নাম। তখন একটি সাধারণ input-এ list="banks" দিন, আর id="banks" দেওয়া একটি <datalist>-এ বিকল্পগুলো রাখুন। লিখতে শুরু করলে মিলে যাওয়া পরামর্শ ভেসে ওঠে, কিন্তু তালিকার বাইরের নামও লেখা যায়। select-এর সাথে এটাই পার্থক্য — select-এ তালিকার বাইরে কিছু বাছা যায় না।

<form>
  <label for="dist">জেলা</label>
  <select id="dist" name="district" required>
    <option value="">— বেছে নিন —</option>
    <optgroup label="ঢাকা বিভাগ">
      <option value="dhaka">ঢাকা</option>
      <option value="gazipur">গাজীপুর</option>
    </optgroup>
    <optgroup label="চট্টগ্রাম বিভাগ">
      <option value="ctg">চট্টগ্রাম</option>
      <option value="cox">কক্সবাজার</option>
    </optgroup>
  </select>
  <p><label for="skills">দক্ষতা (Ctrl চেপে একাধিক)</label><br>
  <select id="skills" name="skill" multiple size="3">
    <option selected>HTML</option><option>CSS</option><option selected>Figma</option>
  </select></p>
  <p><label for="bank">ব্যাংক</label> <input id="bank" name="bank" list="banks">
  <datalist id="banks">
    <option value="সোনালী ব্যাংক"></option><option value="জনতা ব্যাংক"></option><option value="ব্র্যাক ব্যাংক"></option>
  </datalist></p>
  <p><label for="addr">ঠিকানা</label><br>
  <textarea id="addr" name="address" rows="3" cols="30">বাড়ি ১২, রোড ৫</textarea></p>
  <button>জমা দিন</button>
</form>

৪ · নতুন input type — date, range, color, file আর আরও

পর্ব ০৮-এ দেখেছেন <input>-এর type বদলালে একই ট্যাগ ভিন্ন জিনিস হয়ে যায়। HTML5-এর সময় (২০১০-এর দশকের শুরুতে ব্রাউজারে আসতে শুরু করে) একঝাঁক নতুন input type যোগ হয়। আগে তারিখ নিতে মানুষ তিনটি select (দিন, মাস, বছর) বা ভারী JavaScript ক্যালেন্ডার লাইব্রেরি ব্যবহার করতেন; এখন এক লাইনেই হয়।

কয়েকটির বিশেষ কথা আছে:

• তারিখের চেহারা আর মান আলাদা। পর্দায় তারিখ দেখায় ব্যবহারকারীর দেশের নিয়মে (কারও কাছে ২৬/০৩/২০০৫, কারও কাছে 03/26/2005), কিন্তু সার্ভারে সবসময় যায় yyyy-mm-dd. তাই “দিন আগে না মাস আগে” নিয়ে সার্ভারের ঝগড়া নেই। min আর max-ও এই রূপেই লিখতে হয়।
• range নির্ভুল সংখ্যার জন্য নয়। ভলিউম, উজ্জ্বলতা, “কতটা সন্তুষ্ট” — যেখানে মোটামুটি মানই যথেষ্ট। বয়স বা দাম নিতে range দিলে ঠিক সংখ্যায় থামানো কষ্টকর। ডিফল্ট সীমা min="0" থেকে max="100", আর স্লাইডার দেখায় না সংখ্যাটা কত — তাই পাশে মান দেখাতে <output> লাগে (পরের অংশে)।
• file: type="file"-এ accept=".pdf,image/*" ফাইল বাছার জানালায় শুধু PDF আর ছবি দেখায়, multiple একাধিক ফাইল বাছতে দেয়। কিন্তু accept শুধু পরামর্শ — ব্যবহারকারী জানালায় “All files” বেছে যেকোনো ফাইল দিতে পারেন। ফাইল আসলেই পাঠাতে ফর্মে method="post" আর enctype="multipart/form-data" লাগে।
• search দেখতে text-এর মতো, কিন্তু অনেক ব্রাউজারে লেখা মোছার ছোট “×” বোতাম দেয়, আর screen reader একে “search box” বলে।
• hidden — type="hidden" পর্দায় কিছুই দেখায় না, কিন্তু মানটি চুপচাপ জমা হয় — যেমন “কোন বিজ্ঞাপন থেকে এসেছেন”. “লুকানো” মানে “গোপন” নয়; DevTools-এ যে কেউ দেখতে ও বদলাতে পারেন (অংশ ৯ দেখুন)।

ফোনে আরেকটি বড় লাভ: email-এ কি-বোর্ডে @ চলে আসে, tel-এ সংখ্যার প্যাড, url-এ “/” আর “.com”. ব্যবহারকারীকে কি-বোর্ড বদলাতে হয় না। শুধু কি-বোর্ড বদলাতে চাইলে, যাচাই ছাড়া, আছে inputmode attribute — যেমন inputmode="numeric".

<form oninput="vout.value = vol.value">
  <p><label>জন্মতারিখ <input type="date" name="dob" min="1960-01-01" value="2005-03-26"></label></p>
  <p><label>ক্লাসের সময় <input type="time" name="t" value="09:30"></label></p>
  <p><label>সাক্ষাৎকার <input type="datetime-local" name="iv"></label></p>
  <p><label>বিলের মাস <input type="month" name="bill"></label></p>
  <p><label>থিমের রং <input type="color" name="c" value="#006a4e"></label></p>
  <p><label for="vol">ভলিউম</label>
     <input type="range" id="vol" name="vol" min="0" max="10" value="7">
     <output id="vout" for="vol">7</output></p>
  <p><label>সার্টিফিকেট (PDF/ছবি) <input type="file" name="docs" accept=".pdf,image/*" multiple></label></p>
  <p><label>খুঁজুন <input type="search" name="q"></label></p>
  <input type="hidden" name="source" value="facebook-ad">
  <button>জমা দিন</button>
</form>

৫ · output, progress আর meter — ফল আর মাপ দেখানো

এ তিনটি element তথ্য নেয় না, দেখায়।

• <output> — একটি হিসাবের ফল বা ব্যবহারকারীর কাজের ফল দেখানোর জায়গা: স্লাইডারের মান, “মোট দাম: ৳ ১২৫০”. for attribute-এ লিখে দিন কোন কোন ঘর থেকে ফলটি এসেছে। ওপরের এডিটরে <form oninput="…"> ছিল এক লাইনের JavaScript, যা প্রতিবার কোনো ঘর বদলালে output-এ মান বসায়।
• <progress> — একটি কাজ কতদূর এগোল: ফাইল আপলোড ৬৫%, ধাপ ৩-এর ২. value না দিলে হয় “অনির্দিষ্ট” progress — শুধু বোঝায় “কাজ চলছে, কতক্ষণ জানি না”.
• <meter> — একটি জানা সীমার মধ্যে মাপ: ফোনের চার্জ, স্টোরেজ কতটা ভরা, পাসওয়ার্ড কতটা শক্ত। low, high আর optimum বলে দেয় কোন অংশটা ভালো, আর ব্রাউজার সেই অনুযায়ী সবুজ, হলুদ বা লাল দেখায়।

পার্থক্যটা মনে রাখার উপায়: progress সময়ের সাথে শেষের দিকে এগোয়, meter একটি অবস্থা মাপে। ব্যাটারির চার্জ কোনো “কাজ” নয়, যা শেষ হবে — তাই সেটা meter.

<p><label for="up">ফাইল আপলোড:</label>
   <progress id="up" max="100" value="65">65%</progress> 65%</p>
<p><label for="wait">ফল প্রস্তুত হচ্ছে:</label>
   <progress id="wait"></progress></p>
<p><label for="bat">ফোনের চার্জ:</label>
   <meter id="bat" min="0" max="100" low="20" high="80" optimum="100" value="15">15%</meter> 15%</p>
<p><label for="pw">পাসওয়ার্ডের শক্তি:</label>
   <meter id="pw" min="0" max="4" low="1" high="3" optimum="4" value="2"></meter></p>
<p><label for="disk">স্টোরেজ ভরা:</label>
   <meter id="disk" min="0" max="64" low="40" high="56" optimum="0" value="30"></meter> 30 / 64 GB</p>

৬ · Built-in validation — ব্রাউজারের নিজের পরীক্ষক

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

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

কয়েকটি খুঁটিনাটি, যা নতুনদের প্রায়ই অবাক করে:

• step-এর হিসাব শুরু হয় min থেকে। number-এ ডিফল্ট step হলো 1, তাই 2.5 লিখলে ব্রাউজার বলবে “নিকটতম বৈধ মান 2 বা 3”. দশমিক চাইলে step="0.5" বা যেকোনো মানের জন্য step="any". min="1" step="2" হলে বৈধ মান 1, 3, 5… — 4 নয়।
• maxlength টাইপ করতেই দেয় না — সীমার পর আর অক্ষর ঢোকে না। কিন্তু minlength টাইপ আটকায় না, শুধু জমার সময় বলে “আরও লিখুন”.
• type="email" শুধু দেখে লেখাটি “কিছু@কিছু” আকারের কি না — rahim@gmail-কেও বৈধ ধরে। ঠিকানাটি সত্যি আছে কি না, ব্রাউজার জানে না।
• type="url" চায় scheme সহ পূর্ণ ঠিকানা: abcltech.com অবৈধ, https://abcltech.com বৈধ — তাই পাশে উদাহরণ দিন।
• radio দলে একটিতে required দিলেই পুরো দল বাধ্যতামূলক। checkbox-এ required মানে “এই ঘরে টিক দিতেই হবে”; “কমপক্ষে একটি বাছুন” HTML একা পারে না (অংশ ৯)।
• ফাঁকা ঘরে অন্য শর্ত খাটে না। required না থাকলে ফাঁকা ঘর বৈধ, pattern বা minlength যাচাই-ই হয় না; কিন্তু কিছু লিখলে ঠিকভাবে লিখতে হয়।

এবার দেখা যাক “জমা দিন” চাপার মুহূর্তে ব্রাউজারের ভেতরে ঠিক কী কী ঘটে। একটি চাকরির আবেদন ফর্ম ধরুন — নাম, মোবাইল, বয়স; মোবাইলের ঘরটি ভুল। “পরে” চাপুন:

৭ · pattern — বাংলাদেশি মোবাইল নম্বর দিয়ে regex পড়া

বাংলাদেশের মোবাইল নম্বর দেখতে কেমন? ১১টি অঙ্ক; শুরু 01 দিয়ে; তৃতীয় অঙ্কটি অপারেটরের কোড, যা ৩ থেকে ৯-এর মধ্যে (013, 017, 018, 019…)। এই বর্ণনাকে যন্ত্রের ভাষায় লেখার উপায়ের নাম regular expression (সংক্ষেপে regex) — লেখার একটি “নকশা” বা ছাঁচ। আর pattern attribute-এ সেই ছাঁচটি লিখে দিলে ব্রাউজার মিলিয়ে দেখে:

<input type="tel" name="mobile" pattern="01[3-9][0-9]{8}"
       title="১১ অঙ্কের নম্বর, 01 দিয়ে শুরু — যেমন 01712345678">

প্রথম দেখায় অদ্ভুত চিহ্নের জঙ্গল মনে হয়। কিন্তু টুকরো টুকরো করে পড়লে খুবই সহজ। “পরে” চাপুন:

title দিয়ে ইঙ্গিত দিন। pattern না মিললে ব্রাউজার বলে “অনুরোধ করা ফরম্যাট মেলান” — কোন ফরম্যাট, তা বলে না! অনেক ব্রাউজার তখন title-এর লেখাও বার্তার সাথে দেখায়, তাই সেখানে মানুষের ভাষায় নিয়মটা লিখুন। তবে title সব ফোনে বা screen reader-এ নিশ্চিত আসে না — জরুরি নির্দেশনা ঘরের পাশে সাধারণ লেখায়ও দিন।

:invalid, :valid আর :user-invalid — CSS-কে জানানো

ব্রাউজার যে প্রতিটি ঘরের validity জানে, CSS সেটা ধরতে পারে pseudo-class দিয়ে — ঘরের অবস্থা দেখে বাছাই করার selector. :valid আর :invalid সাথে সাথে অবস্থা দেখায়। সমস্যা: পাতা খোলার মুহূর্তেই ফাঁকা required ঘর :invalid — কিছু লেখার আগেই লাল দাগ, যেন বকা খাচ্ছেন। সমাধান :user-invalid আর :user-valid — এরা কাজ করে কেবল ব্যবহারকারী ঘরটি নিয়ে কিছু করার পর (লিখে অন্য ঘরে গেলে, বা জমা দিতে চাইলে)। ২০২৩ সাল থেকে সব প্রধান ব্রাউজারে আছে (Baseline 2023); পুরোনো ব্রাউজারে শুধু রংটা আসবে না, ফর্ম ঠিকই চলবে। সাজানোর পুরো কৌশল পর্ব ৪৩-এ; এখানে এক ঝলক:

<style>
  input:user-invalid { outline: 3px solid crimson; }
  input:user-valid   { outline: 3px solid seagreen; }
</style>
<form>
  <p><label>নাম* <input name="name" required minlength="3" maxlength="40"></label></p>
  <p><label>মোবাইল* <input type="tel" name="mobile" required
     pattern="01[3-9][0-9]{8}" title="১১ অঙ্ক, 01 দিয়ে শুরু — যেমন 01712345678"></label>
     <small>১১ অঙ্ক, যেমন 01712345678</small></p>
  <p><label>ইমেইল <input type="email" name="email"></label></p>
  <p><label>বয়স* <input type="number" name="age" required min="18" max="35"></label></p>
  <p><label>সপ্তাহে কত ঘণ্টা সময় দেবেন? <input type="number" name="hours"
     min="0" max="20" step="0.5" value="2"></label></p>
  <p><label>পোর্টফোলিও লিংক <input type="url" name="site"></label></p>
  <button>আবেদন জমা দিন</button>
</form>

৮ · novalidate, formnovalidate, disabled আর readonly

যাচাই বন্ধ করার দুই উপায়

• <form novalidate> — পুরো ফর্মের built-in যাচাই বন্ধ। সাধারণত তখন, যখন JavaScript দিয়ে নিজের সুন্দর ভুল-বার্তা দেখাতে চান: ব্রাউজারের বুদবুদ বন্ধ, কিন্তু validity রিপোর্ট ঠিকই থাকে, আর JavaScript সেটা পড়ে নিজের মতো দেখায়।
• <button formnovalidate> — শুধু ওই বোতামটি চাপলে যাচাই হবে না। ক্লাসিক উদাহরণ: “খসড়া রাখুন” বোতাম। অর্ধেক পূরণ করা আবেদনও সেভ করা যায়, কিন্তু “চূড়ান্ত জমা” বোতামে পুরো যাচাই হয়।

disabled বনাম readonly

দুটোই বলে “এই ঘর বদলানো যাবে না”, কিন্তু বাকি সব আচরণে আলাদা। পরীক্ষার খাতার কভার পাতা ভাবুন: রোল নম্বর আগে থেকে ছাপানো — আপনি বদলাতে পারবেন না, কিন্তু খাতার সাথে সেটা জমা যায় (readonly). আর কাটা দাগ দেওয়া একটি পুরোনো ঘর, যা এ বছর প্রযোজ্যই নয় — সেটা কেউ পড়েই না (disabled).

<form>
  <p><label>রোল নম্বর <input name="roll" value="101" readonly></label></p>
  <p><label>পুরোনো আইডি <input name="oldid" value="A-7" disabled></label></p>
  <p><label>মোবাইল* <input name="mobile" required></label></p>
  <button>চূড়ান্ত জমা</button>
  <button formnovalidate>খসড়া রাখুন</button>
</form>

“জমা দিলে আসলে কী যায়” — এটা ফর্মের সবচেয়ে কম বোঝা অংশ। ব্রাউজার জমার আগে একটি তালিকা বানায় — সার্ভারে যাওয়া নাম=মান জোড়ার তালিকা। পুরোনো spec একে বলত form data set, আজকের WHATWG নিয়মে নাম entry list. নিচের ফর্মে লাইন ধরে ধরে দেখুন কে ঢোকে আর কে বাদ পড়ে:

1<form>2  <input name="name" value="রহিম">3  <input type="checkbox" name="news">4  <input type="checkbox" name="terms" checked>5  <input type="radio" name="pay" value="bkash" checked>6  <input type="radio" name="pay" value="cod">7  <select name="tag" multiple> (html, css বাছা; js নয়)8  <input name="roll" value="101" readonly>9  <input name="oldid" value="A-7" disabled>10  <input type="hidden" name="price" value="500">11</form>

৯ · নিজের নিয়ম, setCustomValidity — আর সার্ভারে আবার যাচাই

যখন attribute যথেষ্ট নয়

কিছু নিয়ম attribute দিয়ে লেখা যায় না: “দুই ঘরের পাসওয়ার্ড মিলতে হবে”, “কমপক্ষে একটি বিষয় বাছুন”, “শেষ তারিখ শুরুর তারিখের পরে হতে হবে”. তখন একটু JavaScript লাগে — কিন্তু পুরো যাচাই নতুন করে লেখার দরকার নেই। ব্রাউজারের যাচাই-ব্যবস্থাতেই নিজের নিয়ম যোগ করা যায় setCustomValidity() দিয়ে: এতে একটি বার্তা দিলে ঘরটি invalid হয়ে যায় (আর জমার সময় ঠিক সেই বার্তাটিই দেখায়); ফাঁকা লেখা '' দিলে আবার valid. সবচেয়ে প্রচলিত ভুল — ঠিক হয়ে গেলে '' দিতে ভুলে যাওয়া; তখন ঘরটি চিরকাল invalid থাকে আর ফর্ম আর কখনো জমা হয় না।

নিচের ছোট স্ক্রিপ্টে নিজেই দেখুন। ফর্মটি ওপরে দেখাবে, আর স্ক্রিপ্টের রিপোর্ট নিচে:

const pw1 = document.getElementById('pw1');
const pw2 = document.getElementById('pw2');
const mob = document.getElementById('mob');

// ১) ব্রাউজারের নিজের রিপোর্ট পড়া
console.log('mobile valid?', mob.validity.valid, '| patternMismatch:', mob.validity.patternMismatch);

// ২) নিজের নিয়ম: দুই পাসওয়ার্ড মিলতে হবে
function checkMatch() {
  pw2.setCustomValidity(pw1.value === pw2.value ? '' : 'দুটি পাসওয়ার্ড মেলেনি');
}
pw1.addEventListener('input', checkMatch);
pw2.addEventListener('input', checkMatch);
checkMatch();
console.log('pw2 customError:', pw2.validity.customError, '|', pw2.validationMessage);

// ৩) ব্যবহারকারী ঠিক করলেন
pw2.value = 'dhaka2026';
checkMatch();
console.log('after fix, pw2 valid?', pw2.validity.valid);
console.log('whole form valid?', document.getElementById('reg').checkValidity());

এই পর্বে JavaScript এটুকুই। ফর্মের সাথে JavaScript-এর পুরো কাজ — ঘটনা ধরা, নিজের ভুল-বার্তা দেখানো, সার্ভারে পাঠানো — JavaScript কোর্সের ফর্ম ও validation পর্বে দেখবেন; regex নিয়ে আরও গভীরে যেতে আছে regex পর্ব।

সবচেয়ে জরুরি কথা — ব্রাউজারের যাচাই নিরাপত্তা নয়

এতক্ষণ যা দেখলেন, তার সবই ঘটে ব্যবহারকারীর নিজের কম্পিউটারে — তাই একে বলে client-side validation. আর ব্যবহারকারীর কম্পিউটার পুরোপুরি ব্যবহারকারীর নিয়ন্ত্রণে। ভেবে দেখুন, কেউ চাইলে কী কী করতে পারেন:

• DevTools খুলে required বা pattern মুছে দিতে পারেন — দুই সেকেন্ডের কাজ।
• hidden ঘরের price=500-কে price=5 করে দিতে পারেন।
• ব্রাউজার একদমই ব্যবহার না করে সরাসরি সার্ভারে request পাঠাতে পারেন — তখন আপনার HTML-এর কোনো নিয়মই সেখানে নেই:

curl -X POST https://shop.example.com/order -d "product=42&price=5&mobile=hello"

কাউন্টারের লোকটির কথা আবার ভাবুন: কেউ পেছনের দরজা দিয়ে সরাসরি অফিসে ঢুকে ফর্ম জমা দিলে কাউন্টারের যাচাই কোনো কাজে আসে না। তাই অফিসের ভেতরে, অর্থাৎ সার্ভারে, প্রতিটি তথ্য আবার যাচাই করতে হয় — একে বলে server-side validation. দাম সার্ভার নেবে নিজের ডেটাবেস থেকে, ফর্ম থেকে নয়; মোবাইল নম্বর সার্ভার আবার মেলাবে; ফাইলের ধরন সার্ভার নিজে পরীক্ষা করবে, accept-এর ভরসায় নয়।

১০ · AI-এর যুগে — AI-এর বানানো ফর্ম যাচাই

“একটা রেজিস্ট্রেশন ফর্ম বানিয়ে দাও” — AI মুহূর্তে সুন্দর কোড দেবে। কিন্তু ফর্মে ছোট গলদ বড় ক্ষতি করে: কেউ পূরণই করতে পারেন না, ভুল তথ্য ঢোকে, বা নিরাপত্তার ফাঁক থাকে। পুরোনো কোড থেকে শেখা AI কিছু ভুল বারবার করে:

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

• validator.w3.org-এ কোড দিয়েছি — error নেই, অচল attribute নেই, label-এর for আর input-এর id মিলেছে
• শুধু কি-বোর্ড দিয়ে (Tab, Space, তীর চিহ্ন, Enter) পুরো ফর্ম পূরণ ও জমা দিয়ে দেখেছি
• ইচ্ছা করে ভুল তথ্য দিয়েছি — ফাঁকা ঘর, ১০ অঙ্কের নম্বর, ভুল ইমেইল, সীমার বাইরের সংখ্যা — প্রতিটির বার্তা বোধগম্য
• নিজের বাংলা নাম লিখে দেখেছি — আটকায় না
• DevTools-এর Network প্যানেলে দেখেছি জমার সময় কোন নাম=মান যাচ্ছে; Elements-এর Accessibility অংশে প্রতিটি ঘরের নাম আর role ঠিক আছে; Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি
• নতুন কোনো type বা CSS (যেমন :user-invalid, month) পেলে MDN আর Can I use-এ সমর্থন দেখেছি; আর নিশ্চিত হয়েছি সার্ভারেও একই নিয়মে যাচাই হবে