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

ব্যবহারকারীরা সঠিক বিন্যাসে ডেটা প্রবেশ করেছে কিনা তা যাচাই করার জন্য ব্রাউজারগুলিতে বিল্ট-ইন বৈশিষ্ট্য রয়েছে। আপনি সঠিক উপাদান এবং গুণাবলী ব্যবহার করে এই বৈশিষ্ট্য সক্রিয় করতে পারেন. তার উপরে, আপনি CSS এবং JavaScript দিয়ে ফর্মের বৈধতা বাড়াতে পারেন।

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

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

কোন ক্ষেত্রগুলি প্রয়োজন, বা সেই ক্ষেত্রগুলির সীমাবদ্ধতাগুলি না জেনে একটি ফর্ম পূরণ করা হতাশাজনক৷ উদাহরণস্বরূপ, আপনি একটি ব্যবহারকারীর নাম লিখুন এবং একটি ফর্ম জমা দিন—কেবলমাত্র ব্যবহারকারীর নামগুলিতে কমপক্ষে আটটি অক্ষর থাকতে হবে তা খুঁজে বের করতে৷

আপনি বৈধতা নিয়ম সংজ্ঞায়িত করে এবং তাদের সাথে যোগাযোগ করে ব্যবহারকারীদের সাহায্য করতে পারেন।

ঘটনাক্রমে অনুপস্থিত প্রয়োজনীয় ক্ষেত্র থেকে ব্যবহারকারীদের সাহায্য করুন

আপনার ফর্মগুলিতে প্রবেশ করা ডেটার জন্য সঠিক বিন্যাস এবং সীমাবদ্ধতাগুলি নির্দিষ্ট করতে আপনি 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 ক্ষেত্রগুলিকে :required সিএসএস সিউডো ক্লাস দিয়ে স্টাইল করতে পারেন।

input:required {
  border: 2px solid;
}

স্টাইল অবৈধ ফর্ম নিয়ন্ত্রণ

আপনি কি মনে রাখবেন ব্যবহারকারীর দ্বারা প্রবেশ করা ডেটা অবৈধ হলে কি হবে? ফর্ম নিয়ন্ত্রণ সংযুক্ত ত্রুটি বার্তা প্রদর্শিত হবে. যখন এটি ঘটে তখন উপাদানটির চেহারাটি মানিয়ে নেওয়া কি দুর্দান্ত হবে না?

আপনি অবৈধ ফর্ম নিয়ন্ত্রণে শৈলী যোগ করতে :invalid ছদ্ম-শ্রেণী ব্যবহার করতে পারেন। উপরন্তু, বৈধ ফর্ম উপাদান স্টাইল করার জন্য :valid pseudo-class আছে।

বৈধতার উপর ভিত্তি করে আপনার শৈলী মানিয়ে নেওয়ার আরও উপায় আছে। CSS সম্পর্কে মডিউলে আপনি স্টাইলিং ফর্ম সম্পর্কে আরও শিখবেন।

জাভাস্ক্রিপ্টের সাথে বৈধতা

আপনার ফর্মগুলির বৈধতা আরও উন্নত করতে আপনি JavaScript Constraint Validation API ব্যবহার করতে পারেন।

অর্থপূর্ণ ত্রুটি বার্তা প্রদান করুন

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

এটি অর্জন করতে, সীমাবদ্ধতা যাচাইকরণ 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 ইভেন্ট শুনে জাভাস্ক্রিপ্টে রিয়েল-টাইম ভ্যালিডেশন যোগ করতে পারেন এবং যখন কোনো ব্যবহারকারী একটি ফর্ম ফিল্ড ছেড়ে চলে যায় তখনই ইনপুটটি যাচাই করতে পারেন।

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

একটি আসন্ন মডিউলে জাভাস্ক্রিপ্টের সাথে রিয়েল-টাইম বৈধতা বাস্তবায়ন সম্পর্কে আরও জানুন।

আপনার উপলব্ধি পরীক্ষা করুন

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

সম্পদ

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