২০২৬ সালে ফর্ম ভ্যালিডেশন: অপ্রয়োজনে লাইব্রেরি ব্যবহার করা বন্ধ করুন
২০২৬ সালে একটি ফর্ম ভ্যালিডেট করার জন্য আপনার কোনো ভারী JavaScript লাইব্রেরির প্রয়োজন নেই।
গত মাসে আমি কোনো ভ্যালিডেশন লাইব্রেরি ছাড়াই একটি চেকআউট ফর্ম তৈরি করেছি। শুধুমাত্র নেটিভ HTML এবং ৩০ লাইনের JavaScript ব্যবহার করে আমি এতে রিকয়ার্ড ফিল্ড (required fields), ইমেইল ফরম্যাট এবং পাসওয়ার্ডের দৈর্ঘ্য নিয়ন্ত্রণ করেছি।
npm install চালানোর আগে, বেশিরভাগ সমস্যা সমাধানের জন্য এই ছয়টি নেটিভ অ্যাট্রিবিউট ব্যবহার করুন:
• required: টেক্সট, সিলেক্ট এবং চেকবক্সের ক্ষেত্রে খালি সাবমিশন রোধ করে। • type: সাধারণ ফরম্যাটের ভুল ধরার জন্য type="email" বা type="url" ব্যবহার করুন। • minlength এবং maxlength: কাস্টম লজিক ছাড়াই ক্যারেক্টার লিমিট বা অক্ষরের সীমা নির্ধারণ করে। • min, max, এবং step: সংখ্যা এবং তারিখের রেঞ্জ বা সীমা নিয়ন্ত্রণ করে। • pattern: পোস্টাল কোডের মতো নির্দিষ্ট ফরম্যাট নিশ্চিত করতে regex ব্যবহার করে। • inputmode এবং autocomplete: সঠিক কিবোর্ড প্রদর্শন করে বা পরিচিত তথ্য দিয়ে পূরণ করার মাধ্যমে ভুল কমায়।
যদি নেটিভ মেসেজগুলো খুব সাধারণ মনে হয়, তবে Constraint Validation API ব্যবহার করুন।
প্রতিটি ইনপুটের একটি validity অবজেক্ট থাকে। আরও কার্যকর এরর মেসেজ লেখার জন্য আপনি valueMissing বা typeMismatch-এর মতো প্রপার্টিগুলো চেক করতে পারেন। নিজের টেক্সট দেখানোর জন্য setCustomValidity ব্যবহার করুন।
মনে রাখবেন, input ইভেন্টের সময় আপনার কাস্টম মেসেজটি ক্লিয়ার করতে হবে। তা না হলে, ব্যবহারকারী ভুল সংশোধন করার পরেও ফিল্ডটি এরর স্টেটে আটকে থাকবে।
স্টাইলিংয়ের জন্য, একটি ফিল্ড "touched" কি না তা ট্র্যাক করতে JavaScript ব্যবহার করা বন্ধ করুন।
এখন CSS :user-invalid pseudo-class এটি হ্যান্ডেল করতে পারে। এটি শুধুমাত্র ব্যবহারকারী একটি ফিল্ডের সাথে ইন্টারঅ্যাক্ট করার পরেই স্টাইল প্রয়োগ করে। এরর টেক্সট স্বয়ংক্রিয়ভাবে দেখানোর জন্য এটিকে :has() সিলেক্টরের সাথে ব্যবহার করুন। এটি ডজন ডজন অপ্রয়োজনীয় কোড কমিয়ে দেয়।
আপনার আসলে কখন একটি লাইব্রেরি ব্যবহার করা উচিত?
শুধুমাত্র দুটি নির্দিষ্ট ক্ষেত্রে লাইব্রেরি ব্যবহার করার কথা ভাবুন:
১. Cross-field validation: যখন একটি ফিল্ড অন্যটির ওপর নির্ভর করে, যেমন "confirm password" বা জটিল কন্ডিশনাল লজিক। ২. Async validation: যখন আপনাকে ডাটাবেস চেক করতে হয়, যেমন "এই ইউজারনেমটি কি ইতিমধ্যে নেওয়া হয়েছে?"
যদি আপনার ফর্মে শুধুমাত্র সিঙ্গেল-ফিল্ড রুলস প্রয়োজন হয়, তবে নেটিভ পদ্ধতিতেই থাকুন। কম কোড মানে কম বাগ (bugs)। ব্রাউজার দিয়ে শুরু করুন। ব্রাউজার যখন তার সীমাবদ্ধতায় পৌঁছাবে, কেবল তখনই একটি লাইব্রেরি যোগ করুন।
ঐচ্ছিক লার্নিং কমিউনিটি: https://t.me/GyaanSetuAi