ওয়েব ফর্ম ভ্যালিডেইশন
কাকে বলে, কত প্রকার ও কি কি, সংগা সহ উদাহরণ--- এসব বিস্তারিত জানার জন্য প্রথমেই
এই লেখাটি পড়ে নিন -
.
……তাহলে আপনারা
জানেন যে ক্লায়েন্ট সাইড ভ্যালিডেইশন বা ফ্রন্ট-এন্ড ভ্যালিডেশন জিনিসটা কি ।
.
আপনি যখন কোন ওয়েব ফর্মের
ক্লায়েন্ট সাইড ভ্যালিডেইশন করার সিদ্ধান্ত নেবেন তখন কয়েকটি অপশন আপনার সামনে আসবে
।
.
১. শুধুমাত্র
HTML5 দিয়ে ক্লায়েন্ট সাইড ভ্যালিডেইশন করতে পারেন ।
.
অথবা ২. শুধুমাত্র
JavaScript দিয়ে ক্লায়েন্ট সাইড ভ্যালিডেইশন করতে পারেন ।
.
অথবা ৩. প্রথমে
HTML5 দিয়ে ভ্যালিডেইশন করে ফলব্যাক হিসেবে JavaScript দিয়ে ভ্যালিডেইশন করতে পারেন
। এক্ষেত্রে প্রথম পছন্দ হচ্ছে HTML5 । কিন্তু যেসব ব্রাউজার HTML5 সাপোর্ট করবে না
সেসব ব্রাউজারে JavaScript Validation কাজ করবে ।
.
অথবা ৪.
HTML5 দিয়ে ভ্যালিডেইশন করে Constraint Validation API দিয়ে কাস্টমাইজ(মেসেজ এবং বাবল)
ও ক্রসব্রাউজার সাপোর্ট দিতে পারেন ।
.
আমার ব্যক্তিগত
পছন্দ ৩ এবং ৪ । কারণটা পরের অংশটুকু পড়লেই বুঝতে পারবেন J ।
.
HTML5 দিয়ে ক্লায়েন্ট সাইডে
ফর্ম ভ্যালিডেইশন করাকে বলা হয় Constraint Validation বা Inline Validation ।
.
এই Constraint
Validation এ ব্যবহার করা হয় কিছু HTML5 Constraint Validation Attributes । Attribute গুলোর মধ্যে রয়েছে কিছু ইনপুট
টাইপ এট্রিবউট যেমন- text, email, url, number, tel, password, file, date, time,
datetime, datetime-local, month, week, image, radio, checkbox, range, search । এই
ইনপুট টাইপগুলোর মধ্যে কয়েকটি আগে থেকেই ছিল । বাকীগুলো HTML5 এ এসে যুক্ত হয়েছে ।
এছাড়াও আরো কিছু এট্রিবউট রয়েছে, যেমন- required, pattern, step, min, max,
maxlength ইত্যাদি ।
.
Attribute গুলোর পাশাপাশি
আরো ব্যবহার করা যায় Constraint Validation API । API গুলো দিয়ে ভ্যালিডেইশনের ম্যাসেজ, বাবল(bubble)
ইত্যাদি কাস্টমাইজেইশন করা যায় । এমনকি ক্রসব্রাউজার সাপোর্টও দেয়া যায় । API এ ব্যবহৃত
মেথডগুলো হলো: checkValidity(), setCustomValidity() ইত্যাদি । আরো ব্যবহৃত হয় কিছু
প্রপারটি , যেমন- willValidate, validity.valueMissing, validity.patternMismatch,
validity.stepMismatch, validity.typeMismatch, validity.tooLong,
validity.rangeOverflow, validity.rangeUnderflow, validity.customError,
validationMessage ইত্যাদি ইত্যাদি ।
.
পুরো ভ্যালিডেইশনকে
Visitor/User এর কাছে আনন্দায়ক এবং সুখকর করার জন্য প্রয়োজন পড়ে একটি চমৎকার UI ডিজাইন
। চমৎকার ডিজাইনের
জন্য CSS এর রয়েছে কিছু চমৎকার hook, যেমন-
:invalid{}, :valid{},
:required{}, :optional{}, :in-range{}, :out-of-range{}, :read-only{}, :read-write{},
:disabled{}, :enabled{}, :default{} ইত্যাদি । এগুলো ব্যবহার করে মনের মাধুরি মিশিয়ে
আপনার ফর্মের UI(User Interface) ডিজাইন করতে পারবেন । জানেন তো, ক্লায়েন্ট সাইড ভ্যালিডেইশনের
প্রধান উদ্দেশ্যই হলো ইউজারের মনোতুষ্টি করা । ইউজার অখুশি তো আপনার ক্লায়েন্ট অখুশি
। আর ক্লায়েন্ট অখুশি তো আপনি অখুশি ।
.
চলুন এবার জেনে আসি
HTML5 দিয়ে ফর্ম ভ্যালিডেইশনের কিছু সীমাবদ্ধতা :
.
১. HTML5 এর সবগুলো
input type এবং CSS selector সব ব্রাউজারে সাপোর্ট করে না । যেমন- time, datetime,
datetime-local, month, week ইত্যাদি ইনপুট টাইপ Firefox-42.0 সাপোর্ট করে না । আবার datetime Chrome- 46.0.2490.86 m
এবং Opera-33.0 সাপোর্ট করে না । Safari-5.1.1 color type সাপোর্ট করে না ।
বিশেষভাবে লক্ষণীয়:
যখন কোনো ব্রাউজার HTML5 এর কোনো input type সাপোর্ট না করে তখন সেই input type কে
text হিসেবে ধরে নেয় । ফলে টেক্সট টাইপের যেকোন ইনপুটকেই ব্রাউজারটি গ্রহণ করে নেয়
। এক্ষেত্রে pattern ব্যবহার করে সমস্যার সমাধান করা যেতে পারে ।
.
২. সাফারি-5.1.1
ব্রাউজারটি HTML5 এর ভ্যালিডেইশনের পুরো প্রক্রিয়াটিকে অগ্রাহ্য করে অর্থাৎ ভ্যালিডেইশন
না করেই ইনপুট গ্রহণ করে । accept এট্রিবিউট সাপোর্ট করে না । মজার ব্যাপার হলো ব্রাউজারটি
ইনপুট টাইপ number, date, time, datetime, datetime-local, month, week, file,
image, search ইত্যাদি সাপোর্ট করে এবং কার্যকর ও দৃষ্টিনন্দন একটি UI প্রদান করে ।
CSS hook গুলোকেও মোটামুটি সাপোর্ট করে ।
.
৩. একেক ব্রাউজারে
একেক রকম UI দেখা যায় । ফায়ারফক্স-এর UI সাদামাটা । কিন্তু number, date, time,
datetime, datetime-local, month, week এসবের জন্য ক্রোম, অপেরা, সাফারি এবং
iPhone গুলোতে অনেক সুন্দর এবং কার্যকর UI পাওয়ার যায় । iPhone এ emil, url ইত্যাদির
ইনপুট দেয়ার জন্য আলাদা আলাদা অন-স্ক্রিন কী-বোর্ড পাওয়া যায় ।
.
৪. Bubble গুলোকে
কাস্টমাইজ করা এখন পর্যন্ত সম্ভব হচ্ছে না । তবে শুধুমাত্র Chrome-28 এর আগের ভার্সনে
কাস্টমাইজ করা যেত ।
.
৫. ডিফল্ট মেসেজ
টেক্সটকে এডিট করা গেলেও স্টাইল দেয়া সম্ভব নয় ।
.
৬. IE <= 9, iOS Safari, এবং default Android
browser এ constraint
validation সাপোর্ট করে না ।
.
৭. পুরো ভ্যালিডেইশন
প্রক্রিয়াটাই ব্রাউজারের উপর নির্ভরশীল । যেমন- আপনি একটা পেইজ করলেন ইংরেজি ভাষায়
। কিন্তু ব্রাউজারটি ফ্রেঞ্চ ভাষায় হওয়ায় ভ্যালিডেইশন ম্যাচেজ গুলোও চলে আসলো ফ্রেঞ্চ
ভাষায় । এটা একটা সমস্যা ।
তাহলে এতসব সীমাবদ্ধতার পরেও
আমরা কেন HTML5 Validation করবো ? আসুন সেটাও জেনে নেই …
.
১.
JavaScript এর প্রতি ৪/৫ লাইন কোডের বদলে একটি HTML5 attribute ব্যবহার করে ভ্যালিডেইশন
করা যায় । ফলে বেঁচে যায় অনেক সময়, শ্রম এবং খরচ ।
.
২. ডিফল্ট মেসেজ
কাস্টমাইজ করা যায় Constraint Validation API দিয়ে ।
.
৩. ডিফল্ট
bubble কে বন্ধ (suppress) করে নতুন করে কাস্টামাইজড বাবল তৈরি করা যায় Constraint
Validation API দিয়ে । এবং এটা হবে ক্রসব্রাউজার (কাস্টমাইজড বাবল এবং ভ্যালিডেইশন)
সাপোর্টেড ।
৪. ক্রসব্রাউজার
সমাধানে প্রথমে HTML5 দিয়ে ভ্যালিডেইশন করে ফলব্যাক হিসেবে JavaScript ভ্যালিডেইশন
করা যায় । ফলে যেসব ব্রাইজার HTML5 সাপোর্ট করে সেসব ব্রাউজারে পাওয়া যাবে HTML5 এর
চিরচেনা স্বাদ আর গন্ধ । আবার যারা সাপোর্ট করবে না সেখানেও ভ্যালিডেইশন ব্যাহত হবে
না জাভাস্ক্রি্টের কারণে ।
.
৫. বর্তমান HTML5
এর কার্যক্রম খুলে দিচ্ছে ভবিষ্যতের কিছু সম্ভাবনাময় কার্যক্রমের দ্বার । যেমন- ভবিষ্যতে
ইউজারের কনট্যাকট লিস্ট বা এড্রেসবুকের ঠিকানা অনুযায়ী ইনপুট টাইপ email/ tel ইত্যাদি
অটো কমপ্লিটের ব্যবস্থা হতে পারে । search টাইপ ব্রাউজার, AT(assistive technology
like screen reader) এবং স্বয়ংক্রীয় ক্রলারদের জন্য দিতে পারে স্মার্ট কোন অপশন যেমন-
কোন নির্দিষ্ট সাইটে স্বয়ংক্রীয়ভাবে কাস্টম সার্চ তৈরির অপশন দিতেই পারে কোন কোন ব্রাউজার
।
.
সবচেয়ে বড় কথা,
ব্রাউজারগুলো খুব দ্রুত আপডেট হচ্ছে । ফলে ক্রসব্রাউজার সমস্যাগুলো অচিরেই মিটে যাবে,
আশা করা যায় । ক্রসব্রাউজার এবং অন্যান্য ছোট-খাট সমস্যাগুলো মিটে গেলে ক্লায়েন্ট সাইড
ভ্যালিডেইশনে জাভাস্ক্রিপ্ট নির্ভরতা একটা সময় শূন্যের কোঠায় নেমে আসবে । সময়, শ্রম
ও খরচ কমার কারণে স্বাভাবিকভাবেই HTML5 Validition এর জনপ্রিয়তা অতি দ্রুত বেড়ে যাবে
।
.
তাহলে আর দেরি
কেন? চলুন এখুনিই HTML5 দিয়ে ক্লায়েন্ট সাইড ভ্যালিডেইশন শেখা শুরু করি এবং বাস্তবে
কাজে লাগাই ।
.
বিশেষ সতর্কীকরণ:
ক্লায়েন্ট সাইড
ভ্যালিডেইশন করুন বা না করুন সার্ভার সাইড ভ্যালিডেইশন অবশ্যই করতে হবে আপনার ফর্মটিকে
নিরাপদ রাখার জন্য । ক্লায়েন্ট সাইড ভ্যালিডেইশন করা হয় মূলত visitor/user -দেরকে একটি
মনোমুগ্ধকর আমেজ দেয়ার জন্য । এটিকে অনেকে ভ্যালিডেইশন বলতে নারাজ । ক্লায়েন্ট সাইড
ভ্যালিডেইশনকে এড়িয়ে (bypass) ফর্ম সাবমিট করা সম্ভব । তাই ফর্মের আসল নিরাপত্তা দেবে
সার্ভার সাইড ভ্যালিডেইশন বা ব্যাক-এন্ড ভ্যালিডেইশন । সুতরাং আপনার ফর্মের সার্ভার
সাইড ভ্যালিডেইশন করতে কখনই ভুলবেন না । (y)
একজন টুনা ভাইয়ের মন্তব্য:
HTML 5 is not good to validation
. Cause if you inspect element then you can change type="" easily
এবং আমার প্রতি মন্তব্য:
টুনা ভাই, কেউ
HTML5 বাইপাস করলে তার জন্য তো ফলব্যাকে JavaScript থাকবেই , মু হা হা হা…। আর
JavaScript বাইপাস করলে ব্যাক-এন্ডে থাকবে বাপের বেটা সাদ্দাম ভ্যালিডেইশন, মু হি হি
হি । আর সেটাকে বাইপাস করলে থাকবে…. থাক ভাই আর কিছু করার দরকার নেই । এত টাইট দিলে
হ্যাকার ভাইয়েরা তো বেকার হইয়া যাইবো । তাগোরে একটা সুযোগ দ্যাননা রে ভাই…হিক হিক হি…হি.. হি..
