Form Validation একটি গুরুত্বপূর্ণ প্রক্রিয়া, যা ওয়েব ফর্মে ইনপুট যাচাই করার জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীর ভুল ইনপুট থেকে সিস্টেমকে রক্ষা করে এবং ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে তোলে। Foundation ফ্রেমওয়ার্কে Form Validation এবং Custom Validation করার জন্য একটি সহজ এবং কার্যকরী সিস্টেম রয়েছে।
ফাউন্ডেশন (Foundation): Form Validation
Foundation-এর form validation সিস্টেমটি খুবই সহজ এবং শক্তিশালী। এটি ইনপুট ফিল্ডগুলির জন্য পূর্বনির্ধারিত বৈশিষ্ট্য যেমন, required, pattern, min/max length ইত্যাদি ব্যবহার করে ডেভেলপারদের জন্য সহজ validation প্রক্রিয়া সরবরাহ করে। Foundation ফ্রেমওয়ার্ক CSS এবং JavaScript প্লাগইন ব্যবহার করে ফর্ম ভ্যালিডেশন সম্পন্ন করে।
ফাউন্ডেশন ফর্ম ভ্যালিডেশনের মূল বৈশিষ্ট্য:
- Required Fields: কিছু ইনপুট ফিল্ড অবশ্যই পূর্ণ করা আবশ্যক।
- Pattern Matching: ইনপুটটি নির্দিষ্ট প্যাটার্ন মেনে হতে হবে (যেমন ইমেল ঠিকানা, ফোন নম্বর)।
- Length Validation: ইনপুটের দৈর্ঘ্য নির্দিষ্ট পরিমাণ হতে হবে।
- Custom Messages: আপনি নিজের ভ্যালিডেশন বার্তা কাস্টমাইজ করতে পারেন।
১. ফর্ম ভ্যালিডেশন উদাহরণ
<form data-abide="ajax">
<label for="email">ইমেল</label>
<input type="email" id="email" name="email" required pattern="email" placeholder="আপনার ইমেল লিখুন">
<small class="error">একটি বৈধ ইমেল ঠিকানা প্রদান করুন</small>
<label for="password">পাসওয়ার্ড</label>
<input type="password" id="password" name="password" required minlength="6" placeholder="পাসওয়ার্ড লিখুন">
<small class="error">পাসওয়ার্ড কমপক্ষে ৬টি ক্যারেক্টার হতে হবে</small>
<button type="submit" class="button">সাবমিট করুন</button>
</form>
এখানে:
- data-abide="ajax": Foundation-এর Abide প্লাগইন ব্যবহার করে ফর্ম ভ্যালিডেশন সক্রিয় করা হয়েছে।
- required: ইনপুট ফিল্ডটি পূর্ণ করা আবশ্যক।
- pattern="email": এটি একটি বৈধ ইমেল ঠিকানা চেক করবে।
- minlength="6": পাসওয়ার্ডের দৈর্ঘ্য কমপক্ষে ৬টি ক্যারেক্টার হতে হবে।
২. ইনপুটের জন্য কাস্টম ভ্যালিডেশন মেসেজ
Foundation এর Abide প্লাগইনে error messages কাস্টমাইজ করা যেতে পারে। উদাহরণস্বরূপ, ইমেল ফিল্ডের জন্য একটি কাস্টম মেসেজ:
<small class="error">আপনার প্রদানকৃত ইমেলটি সঠিক নয়।</small>
এটি ইমেল ইনপুটের জন্য একটি কাস্টম ভ্যালিডেশন মেসেজ সরবরাহ করবে।
৩. ফর্ম ভ্যালিডেশন কনফিগারেশন
Foundation-এর Abide প্লাগইন আপনাকে ফর্ম ভ্যালিডেশনের জন্য বিভিন্ন কনফিগারেশন সেট করার সুযোগ দেয়। উদাহরণস্বরূপ, আপনি Abide এর কনফিগারেশন সেশন সেট করতে পারেন:
$(document).foundation('abide', {
validation_error: function() {
alert("ফর্মে কিছু ভুল আছে, দয়া করে সেগুলো ঠিক করুন!");
}
});
ফাউন্ডেশন (Foundation): Custom Validation
Custom Validation আপনাকে আপনার নিজের কাস্টম ভ্যালিডেশন ফাংশন তৈরি করার সুযোগ দেয়, যা বিশেষ ধরনের চেক বা শর্তাবলী অনুসারে ইনপুট যাচাই করতে ব্যবহৃত হয়। এটি তখন ব্যবহারী প্রয়োজন যখন ফাউন্ডেশন দ্বারা সরবরাহ করা ডিফল্ট ভ্যালিডেশন ফিচার পর্যাপ্ত না হয়।
১. Custom Validation উদাহরণ
ধরা যাক, আপনার একটি ফর্মে একটি ইনপুট ফিল্ড রয়েছে, যা ব্যবহারকারীকে একটি ইউজারনেম প্রদান করতে বলে, এবং আপনি চান যে ওই ইউজারনেমটি অবশ্যই "admin" না হয়ে অন্য কিছু হতে হবে। এর জন্য একটি কাস্টম ভ্যালিডেশন ব্যবহার করতে হবে।
<form id="customForm">
<label for="username">ইউজারনেম</label>
<input type="text" id="username" name="username" placeholder="ইউজারনেম লিখুন" required>
<small class="error" id="usernameError">"admin" ইউজারনেমটি গ্রহণযোগ্য নয়।</small>
<button type="submit" class="button">সাবমিট করুন</button>
</form>
<script>
// কাস্টম ভ্যালিডেশন
$(document).ready(function() {
$('#customForm').on('submit', function(e) {
var username = $('#username').val();
if (username === "admin") {
e.preventDefault(); // সাবমিট বন্ধ করুন
$('#usernameError').show(); // ত্রুটি বার্তা দেখান
} else {
$('#usernameError').hide(); // ত্রুটি বার্তা সরান
}
});
});
</script>
এখানে:
- যদি ব্যবহারকারী "admin" ইউজারনেম প্রদান করে, তবে ফর্ম সাবমিট হবে না এবং ত্রুটি বার্তা দেখানো হবে।
- যদি ইউজারনেমটি "admin" না হয়, তবে ফর্মটি সাবমিট হবে।
২. কাস্টম প্যাটার্ন ভ্যালিডেশন
আপনি আপনার পছন্দসই প্যাটার্ন দিয়ে কাস্টম ইনপুট ভ্যালিডেশন করতে পারেন। উদাহরণস্বরূপ, যদি আপনি একটি নির্দিষ্ট প্যাটার্ন অনুসরণ করা একটি ফোন নম্বর চেক করতে চান:
<form data-abide="ajax">
<label for="phone">ফোন নম্বর</label>
<input type="text" id="phone" name="phone" required pattern="^\(\d{3}\) \d{3}-\d{4}$" placeholder="ফোন নম্বর (XXX) XXX-XXXX">
<small class="error">ফোন নম্বরটি সঠিক ফরম্যাটে দিন (যেমন: (123) 456-7890)</small>
<button type="submit" class="button">সাবমিট করুন</button>
</form>
এখানে:
- pattern="^ \d{3}-\d{4}$": এটি একটি কাস্টম রেগুলার এক্সপ্রেশন ব্যবহার করে ফোন নম্বরের প্যাটার্ন চেক করবে।
Foundation ফ্রেমওয়ার্কে Form Validation এবং Custom Validation এর জন্য অনেক সহজ এবং কার্যকরী সিস্টেম রয়েছে। Foundation-এর Abide প্লাগইন এর মাধ্যমে ইনপুট ফিল্ডের জন্য সহজ ভ্যালিডেশন তৈরি করা যায়, এবং আপনি চাইলে কাস্টম ভ্যালিডেশন ফাংশন ব্যবহার করে আরো জটিল এবং নির্দিষ্ট শর্তে ইনপুট যাচাই করতে পারেন। এই সিস্টেমটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে এবং ফর্ম সাবমিশনের সময় ভুল ইনপুট কমাতে সাহায্য করে।
Read more
