ফর্মে সঠিক ডেটা লিখতে ব্যবহারকারীদের সাহায্য করুন

ব্যবহারকারীরা সঠিক ফর্ম্যাটে ডেটা লিখেছেন কিনা তা চেক করার জন্য ব্রাউজারে যাচাইকরণের বিল্ট-ইন ফিচার আছে। সঠিক এলিমেন্ট ও অ্যাট্রিবিউট ব্যবহার করে আপনি এইসব ফিচার অ্যাক্টিভেট করতে পারবেন। এছাড়াও, আপনি CSS এবং জাভাস্ক্রিপ্ট ব্যবহার করে ফর্ম যাচাইকরণ উন্নত করতে পারেন।

আপনার ফর্ম কেন যাচাই করা উচিত?

আপনি আগের মডিউলে শিখেছেন যে কীভাবে ব্যবহারকারীদের ফর্মে বারবার তথ্য আবার লিখতে এড়াতে সাহায্য করা যায়। সঠিক ডেটা লিখতে আপনি কীভাবে ব্যবহারকারীদের সাহায্য করতে পারেন?

কোন কোন ফিল্ড পূরণ করা বাধ্যতামূলক বা সেই ফিল্ডের সীমাবদ্ধতা কী তা না জেনে ফর্ম পূরণ করা বিরক্তিকর। যেমন, আপনি কোনও ইউজারনেম লিখে ফর্ম জমা দিলেন—কিন্তু পরে জানতে পারলেন যে ইউজারনেমে অন্তত আটটি অক্ষর থাকতে হবে।

আপনি যাচাইকরণ সংক্রান্ত নিয়ম নির্ধারণ ও তা ব্যবহারকারীদের জানিয়ে তাদের সাহায্য করতে পারেন।

ব্যবহারকারীদের ভুলবশত প্রয়োজনীয় ফিল্ড পূরণ করতে ভুলে যাওয়া থেকে রক্ষা করুন

আপনার ফর্মে লেখা ডেটার সঠিক ফর্ম্যাট ও সীমাবদ্ধতা নির্দিষ্ট করতে আপনি HTML ব্যবহার করতে পারেন। এছাড়াও, কোন কোন ফিল্ড পূরণ করা বাধ্যতামূলক তা আপনাকে উল্লেখ করতে হবে।

কোনও ডেটা না লিখে এই ফর্ম জমা দেওয়ার চেষ্টা করুন। আপনি কি <input>-এর সাথে অ্যাটাচ করা কোনও সমস্যার মেসেজ দেখতে পাচ্ছেন যেখানে বলা হয়েছে যে ফিল্ডটি ফাঁকা রাখা যাবে না?

required অ্যাট্রিবিউটের কারণে এটি হয়।

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

আপনি আগেই জেনেছেন যে আরও অনেক ধরনের ডেটা ব্যবহার করতে পারবেন, যেমন, type="email"। প্রয়োজনীয় ইমেল <input> দেখে নেওয়া যাক।

কোনও ডেটা না লিখে এই ফর্ম জমা দেওয়ার চেষ্টা করুন। আগের ডেমো থেকে কি কোনও পার্থক্য আছে? এখন ইমেল ফিল্ডে আপনার নাম লিখুন এবং জমা দেওয়ার চেষ্টা করুন। আপনি অন্য একটি সমস্যার মেসেজ দেখতে পাচ্ছেন। সেটা কীভাবে সম্ভব? আপনি অন্য একটি মেসেজ পাবেন কারণ আপনার লেখা ভ্যালুটি সঠিক ইমেল আইডি নয়।

required অ্যাট্রিবিউট ব্রাউজারকে জানায় যে ফিল্ডটি পূরণ করা বাধ্যতামূলক। এছাড়াও, ব্রাউজার চেক করে দেখে যে লেখা ডেটা type-এর ফর্ম্যাটের সাথে মিলছে কিনা। উদাহরণে দেখানো ইমেল ফিল্ডটি তখনই সঠিক হবে যদি এটি খালি না থাকে এবং যদি লেখা ডেটা একটি সঠিক ইমেল আইডি হয়।

ব্যবহারকারীকে সঠিক ফর্ম্যাট লিখতে সাহায্য করা

আপনি শিখেছেন কীভাবে কোনও ফিল্ড বাধ্যতামূলক করতে হয়। কোনও ফর্ম ফিল্ডে ব্যবহারকারীকে অন্তত আটটি অক্ষর লিখতে হবে, এই নির্দেশ আপনি ব্রাউজারকে কীভাবে দেবেন?

ডেমো ব্যবহার করে দেখুন। আপনার পরিবর্তনের পরে, আপনি আটটির কম অক্ষর লিখলে ফর্ম জমা দিতে পারবেন না।

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

আপনার যাচাইকরণের নিয়মগুলি জানান

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

সব ব্যবহারকারী যাতে আপনার যাচাইকরণ সংক্রান্ত নিয়ম বুঝতে পারেন তা নিশ্চিত করুন। এর জন্য, ফর্ম কন্ট্রোলকে এমন একটি এলিমেন্টের সাথে কানেক্ট করুন যা নিয়মগুলি ব্যাখ্যা করে। এটি করতে, ফর্মের id সহ এলিমেন্টে একটি aria-describedby অ্যাট্রিবিউট যোগ করুন।

প্যাটার্ন অ্যাট্রিবিউট

কখনও কখনও আপনি আরও উন্নত যাচাইকরণ নিয়ম সংজ্ঞায়িত করতে চান। আবার, আপনি HTML অ্যাট্রিবিউট ব্যবহার করতে পারেন। এটিকে pattern বলা হয় এবং আপনি ভ্যালু হিসেবে রেগুলার এক্সপ্রেশন নির্ধারণ করতে পারবেন।

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

এখানে, শুধুমাত্র ছোট হাতের অক্ষর ব্যবহার করা যাবে; ব্যবহারকারীকে কমপক্ষে দুটি অক্ষর লিখতে হবে, তবে কুড়িটির বেশি নয়।

আপনি কীভাবে pattern পরিবর্তন করবেন যাতে বড় হাতের অক্ষরও ব্যবহার করা যায়? এটি ব্যবহার করে দেখুন।

স্টাইল যোগ করুন

আপনি এখন HTML-এ কীভাবে যাচাইকরণ যোগ করতে হয় তা শিখেছেন। আপনি যদি যাচাইকরণের স্ট্যাটাসের উপর ভিত্তি করে ফর্ম কন্ট্রোল স্টাইল করতে পারতেন, তাহলে কি দারুণ হত না? CSS-এর মাধ্যমে এটি করা সম্ভব।

প্রয়োজনীয় ফর্ম ফিল্ড কীভাবে স্টাইল করবেন

ব্যবহারকারী আপনার ফর্মের সাথে ইন্টার‍্যাক্ট করার আগে তাকে দেখান যে কোনও ফিল্ড বাধ্যতামূলক।

আপনি :required CSS সিউডো ক্লাসের মাধ্যমে required ফিল্ড স্টাইল করতে পারবেন।

input:required {
  border: 2px solid;
}

ভুল ফর্ম কন্ট্রোল স্টাইল করুন

ব্যবহারকারীর লেখা ডেটা ভুল হলে কী হয় তা কি আপনার মনে আছে? ফর্ম কন্ট্রোলের সাথে অ্যাটাচ করা সমস্যার মেসেজ দেখা যায়। এটি ঘটলে এলিমেন্টের চেহারা মানিয়ে নিলে কি ভালো হবে না?

ভুল ফর্ম কন্ট্রোলে স্টাইল যোগ করতে আপনি :invalid সিউডো-ক্লাস ব্যবহার করতে পারেন। এছাড়াও, সঠিক ফর্ম এলিমেন্ট স্টাইল করার জন্য :valid সিউডো-ক্লাসও আছে।

যাচাইকরণের উপর ভিত্তি করে আপনার স্টাইল মানিয়ে নেওয়ার আরও অনেক উপায় আছে। CSS সংক্রান্ত মডিউলে আপনি স্টাইলিং ফর্ম সম্পর্কে আরও জানতে পারবেন।

জাভাস্ক্রিপ্টের মাধ্যমে যাচাইকরণ

আপনার ফর্মের যাচাইকরণ আরও উন্নত করতে, আপনি JavaScript Constraint Validation API ব্যবহার করতে পারেন।

অর্থপূর্ণ ত্রুটি মেসেজ প্রদান করা

আপনি আগেই জেনেছেন যে সব ব্রাউজারে ত্রুটি মেসেজ একরকম হয় না। আপনি কীভাবে সবাইকে একই মেসেজ দেখাতে পারেন?

এটি করতে, Constraint Validation API-এর setCustomValidity() পদ্ধতি ব্যবহার করুন। এটি কীভাবে কাজ করে তা দেখা যাক।

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

যে এলিমেন্টে কাস্টম সমস্যার মেসেজ সেট করতে চান সেটি কোয়েরি করুন। আপনার নির্দিষ্ট করা এলিমেন্টের invalid ইভেন্ট শুনুন। সেখানে আপনি setCustomValidity()-এর সাথে মেসেজ সেট করেন। ইনপুট ভুল হলে, এই উদাহরণে Please enter your name. মেসেজটি দেখানো হয়।

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

Constraint Validation API-এর সাহায্যে আপনি আরও অনেক কিছু করতে পারবেন। পরবর্তী মডিউলে আপনি জাভাস্ক্রিপ্টের মাধ্যমে যাচাইকরণ ব্যবহার করার বিষয়ে বিস্তারিত তথ্য পাবেন।

কীভাবে রিয়েল-টাইমে যাচাই করবেন আপনি ফর্ম কন্ট্রোলের onblur ইভেন্ট শুনে জাভাস্ক্রিপ্টে রিয়েল-টাইম যাচাইকরণ যোগ করতে পারেন, এবং ব্যবহারকারী ফর্ম ফিল্ড ছেড়ে চলে গেলে অবিলম্বে ইনপুট যাচাই করতে পারেন।

ডেমোতে ফর্ম ফিল্ডে ক্লিক করুন, "web" লিখুন এবং পৃষ্ঠার অন্য কোথাও ক্লিক করুন। ফর্ম ফিল্ডের নিচে আপনি minlength-এর জন্য নেটিভ ত্রুটি মেসেজ দেখতে পাবেন।

আসন্ন মডিউলে JavaScript-এর মাধ্যমে রিয়েল-টাইম যাচাইকরণ প্রয়োগ করা সম্পর্কে আরও জানুন।

আপনি কতটা বুঝেছেন তা চেক করুন

ফর্ম যাচাই করার ব্যাপারে আপনার জ্ঞান পরীক্ষা করুন

রিসোর্স

• ফর্ম জমা দেওয়া হয়ে গেলে পেমেন্ট বোতাম বন্ধ করে দিন
• ফর্ম যাতে আরও ভালোভাবে কাজ করে তার জন্য CSS যোগ করুন