KnockoutJS এ Custom Validation Rules তৈরি করা একটি গুরুত্বপূর্ণ কৌশল, যা আপনার ফর্ম ভ্যালিডেশনকে কাস্টমাইজ এবং এক্সটেন্ড করতে সাহায্য করে। KnockoutJS এর মূল বৈশিষ্ট্য হলো two-way data binding, তবে এটি স্বয়ংক্রিয়ভাবে ফর্ম ভ্যালিডেশন সাপোর্ট করে না, কিন্তু আপনি নিজেই কাস্টম ভ্যালিডেশন রুলস তৈরি করতে পারেন।
এই গাইডে, আমরা KnockoutJS এর মাধ্যমে কাস্টম ভ্যালিডেশন রুলস তৈরি করার প্রক্রিয়া ব্যাখ্যা করব, যাতে আপনি আপনার অ্যাপ্লিকেশনে ব্যবহারকারী ইনপুট ভ্যালিডেশন করতে পারেন।
1. KnockoutJS তে Custom Validation Rule তৈরি করা:
KnockoutJS তে কাস্টম ভ্যালিডেশন রুল তৈরি করার জন্য আমরা observable এবং computed ব্যবহার করে ফর্ম ইনপুট ভ্যালিডেশন কাস্টমাইজ করব। আমরা কাস্টম ভ্যালিডেশন রুল তৈরি করব যেমন required, email format, এবং minimum length।
Custom Validation উদাহরণ:
ধরা যাক, আমাদের একটি ফর্ম আছে যেখানে ব্যবহারকারীর নাম এবং ইমেইল ইনপুট নেওয়া হচ্ছে। আমরা এখানে কাস্টম ভ্যালিডেশন রুল তৈরি করব যাতে:
- Name অবশ্যই ফিল্ডে থাকতে হবে।
- Email সঠিক ফরম্যাটে থাকতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Custom Validation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
<style>
.error { color: red; }
</style>
</head>
<body>
<div>
<form data-bind="submit: submitForm">
<label for="name">Name:</label>
<input type="text" id="name" data-bind="value: name, valueUpdate: 'input'"/>
<span data-bind="visible: nameError, text: nameErrorText" class="error"></span><br>
<label for="email">Email:</label>
<input type="text" id="email" data-bind="value: email, valueUpdate: 'input'"/>
<span data-bind="visible: emailError, text: emailErrorText" class="error"></span><br>
<button type="submit">Submit</button>
</form>
</div>
<script>
function AppViewModel() {
var self = this;
// Observables for Name and Email
self.name = ko.observable("");
self.email = ko.observable("");
// Error observables
self.nameError = ko.observable(false);
self.emailError = ko.observable(false);
// Error messages
self.nameErrorText = ko.observable("");
self.emailErrorText = ko.observable("");
// Custom Validation Rule for Name
self.isNameValid = ko.computed(function() {
if (!self.name()) {
self.nameError(true);
self.nameErrorText("Name is required.");
return false;
}
self.nameError(false);
self.nameErrorText("");
return true;
});
// Custom Validation Rule for Email
self.isEmailValid = ko.computed(function() {
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!self.email()) {
self.emailError(true);
self.emailErrorText("Email is required.");
return false;
} else if (!emailRegex.test(self.email())) {
self.emailError(true);
self.emailErrorText("Invalid email format.");
return false;
}
self.emailError(false);
self.emailErrorText("");
return true;
});
// Submit form
self.submitForm = function() {
if (self.isNameValid() && self.isEmailValid()) {
alert("Form Submitted Successfully!");
} else {
alert("Form is invalid!");
}
};
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
ব্যাখ্যা:
- Observables:
self.nameএবংself.emailদুটি observable, যেগুলো ব্যবহারকারী ইনপুট সংরক্ষণ করবে।
- Validation Computed Observables:
self.isNameValidএবংself.isEmailValidকাস্টম ভ্যালিডেশন রুলস। যখনই name বা email পরিবর্তিত হবে, এই কম্পিউটেড প্রপার্টি সেই পরিবর্তনগুলো চেক করবে।
- Error Handling:
self.nameErrorএবংself.emailErrorব্যবহার করে আপনি ভ্যালিডেশন স্ট্যাটাস ট্র্যাক করতে পারেন, এবংself.nameErrorTextএবংself.emailErrorTextদ্বারা ইউজারকে ত্রুটির বার্তা দেখানো হয়।
submitForm:- যখন ফর্মটি সাবমিট হবে, তখন
submitFormমেথড চেক করবে যে সমস্ত ইনপুট সঠিকভাবে ভ্যালিডেট হয়েছে কিনা। যদি না হয়, তবেই ত্রুটি বার্তা দেখানো হবে।
- যখন ফর্মটি সাবমিট হবে, তখন
3. আরো কিছু কাস্টম ভ্যালিডেশন রুল:
a. Minimum Length Validation:
self.isNameLongEnough = ko.computed(function() {
if (self.name().length < 5) {
self.nameError(true);
self.nameErrorText("Name must be at least 5 characters long.");
return false;
}
self.nameError(false);
self.nameErrorText("");
return true;
});
এটি name এর জন্য একটি মিনিমাম লেন্থ চেক করবে, এবং যদি নামটি ৫ অক্ষরের কম হয়, তাহলে ত্রুটি বার্তা দেখানো হবে।
b. Pattern Matching Validation:
self.isPhoneNumberValid = ko.computed(function() {
var phoneRegex = /^\d{10}$/; // Validate for 10-digit phone number
if (!phoneRegex.test(self.phone())) {
self.phoneError(true);
self.phoneErrorText("Invalid phone number.");
return false;
}
self.phoneError(false);
self.phoneErrorText("");
return true;
});
এটি phone number ভ্যালিডেশনের জন্য একটি প্যাটার্ন চেক করবে। এখানে ১০ অঙ্কের ফোন নম্বর মেনে চলবে।
c. Custom Validations with ko.validation:
KnockoutJS এর জন্য একটি থার্ড-পার্টি প্যাকেজ রয়েছে ko.validation, যা আরও বেশি কাস্টম ভ্যালিডেশন রুলস তৈরি করতে সাহায্য করে। আপনি এটি Knockout Validation Plugin ব্যবহার করতে পারেন।
KnockoutJS তে Custom Validation Rules তৈরি করা খুবই সহজ এবং নমনীয়। আপনি observables এবং computed observables ব্যবহার করে কাস্টম ভ্যালিডেশন রুলস তৈরি করতে পারেন। এর মাধ্যমে আপনি খুব সহজে ফর্ম ইনপুট ভ্যালিডেশন পরিচালনা করতে পারবেন, এবং ব্যবহারকারীদের ত্রুটি বার্তা প্রদান করতে পারবেন।
আপনার প্রয়োজনে বিভিন্ন ধরনের কাস্টম ভ্যালিডেশন যেমন required, email validation, minimum length, regex matching ইত্যাদি তৈরি করা সম্ভব। এছাড়া, ko.validation প্যাকেজ ব্যবহার করে আরও শক্তিশালী ভ্যালিডেশন সিস্টেম তৈরি করতে পারেন।
Read more
