KnockoutJS তে validation এবং error messages প্রদর্শন একটি সাধারণ প্রয়োজন, যা ফর্মের ইনপুট ভ্যালিডেশন এবং ইউজারের অভিজ্ঞতা উন্নত করার জন্য ব্যবহৃত হয়। KnockoutJS তে validation মেকানিজম সোজা করার জন্য আপনি observable এবং computed observables ব্যবহার করে সহজে validation messages এবং error handling যোগ করতে পারেন।
এখানে KnockoutJS তে validation messages এবং error handling প্রদর্শন করার কিছু পদ্ধতি এবং উদাহরণ দেয়া হল।
KnockoutJS তে Validation এবং Error Handling
1. Basic Form Validation Example
ধরা যাক, আপনি একটি ফর্ম তৈরি করতে চান যেখানে একটি ইউজারের email এবং password যাচাই করা হবে।
Step 1: Basic ViewModel with Validation
function AppViewModel() {
this.email = ko.observable("").extend({ required: true, email: true });
this.password = ko.observable("").extend({ required: true, minLength: 6 });
this.errors = ko.validation.group(this); // This collects all validation errors
}
ko.applyBindings(new AppViewModel());
এখানে, Ko.validation ব্যবহার করে আপনি email এবং password এর জন্য ভ্যালিডেশন রুলস যোগ করেছেন:
- required: ফিল্ডটি খালি না থাকা নিশ্চিত করবে।
- email: সঠিক ইমেইল ফরম্যাট নিশ্চিত করবে।
- minLength: পাসওয়ার্ডের জন্য মিনিমাম দৈর্ঘ্য।
ko.validation.group() সমস্ত validation error গুলি একত্রিত করতে ব্যবহৃত হয়।
Step 2: HTML Form with Validation Messages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Validation Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.validation/2.0.3/knockout.validation.min.js"></script>
</head>
<body>
<h2>User Registration Form</h2>
<form data-bind="submit: submitForm">
<label for="email">Email:</label>
<input type="text" id="email" data-bind="value: email, valueUpdate: 'input'" />
<span data-bind="visible: email.isValid, text: 'Valid Email'"></span>
<div data-bind="visible: email.hasError, text: 'Email is required and must be valid'"></div>
<label for="password">Password:</label>
<input type="password" id="password" data-bind="value: password, valueUpdate: 'input'" />
<div data-bind="visible: password.hasError, text: 'Password is required and must be at least 6 characters'"></div>
<button type="submit" data-bind="enable: isValid">Submit</button>
</form>
<script>
function AppViewModel() {
this.email = ko.observable("").extend({ required: true, email: true });
this.password = ko.observable("").extend({ required: true, minLength: 6 });
this.errors = ko.validation.group(this); // Collect all validation errors
this.isValid = ko.computed(function() {
return this.errors().length === 0;
}, this);
// Submit function to show error messages
this.submitForm = function() {
this.errors.showAllMessages();
};
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
- Observables:
emailএবংpasswordদুটি observable ডেটা। এখানেemailফিল্ডটি required এবং email format এর জন্য validation করা হচ্ছে, এবংpasswordএর জন্য minLength রুল প্রয়োগ করা হচ্ছে। - Validation Messages: validation এর ফলাফল অনুযায়ী UI তে error messages প্রদর্শিত হবে।
email.hasErrorএবংpassword.hasErrorদিয়ে যদি কোনো ত্রুটি থাকে তবে তা ব্যবহারকারীকে দেখানো হবে। - Form Submission: submitForm ফাংশন validation.errors.showAllMessages() ব্যবহার করে সমস্ত ত্রুটি বার্তা প্রদর্শন করবে যদি ফর্মটি সঠিকভাবে পূর্ণ না হয়।
Advantages of Using ko.validation:
- Declarative: KnockoutJS এর মাধ্যমে validation সহজে declarative ভাবে করা যায়।
- Error Display: validation errors সরাসরি UI তে প্রদর্শন করা যায়।
- Automatic: KnockoutJS এবং
ko.validationআপনাকে ইউজারের ইনপুট অনুযায়ী ত্রুটি গুলি স্বয়ংক্রিয়ভাবে হ্যান্ডল করতে দেয়।
2. Custom Validation Example
KnockoutJS তে আপনি কাস্টম ভ্যালিডেশন রুল তৈরি করতে পারেন যদি আপনি কিছু বিশেষ শর্তে ইনপুট যাচাই করতে চান।
Custom Validator Example:
ko.validation.rules['isPositive'] = {
validator: function(val) {
return val > 0;
},
message: 'Value must be positive'
};
function AppViewModel() {
this.amount = ko.observable().extend({ isPositive: true });
this.errors = ko.validation.group(this);
this.submitForm = function() {
if (this.errors().length === 0) {
alert('Form Submitted Successfully!');
} else {
this.errors.showAllMessages();
}
};
}
ko.applyBindings(new AppViewModel());
HTML Form for Custom Validation:
<form data-bind="submit: submitForm">
<label for="amount">Amount:</label>
<input type="text" id="amount" data-bind="value: amount" />
<div data-bind="visible: amount.hasError, text: 'Amount must be positive'"></div>
<button type="submit">Submit</button>
</form>
Explanation:
- এখানে একটি কাস্টম ভ্যালিডেশন রুল isPositive তৈরি করা হয়েছে, যা নিশ্চিত করবে যে ইনপুট মান positive।
- submitForm ফাংশনটি চালানোর আগে সমস্ত validation errors চেক করবে এবং ইউজারকে সতর্ক করবে যদি কিছু ভুল থাকে।
3. Error Messages and Styling
KnockoutJS তে validation messages প্রদর্শনের সময়, আপনি এগুলিকে স্টাইল করতে পারেন এবং আরও উন্নত ইউজার এক্সপেরিয়েন্স প্রদান করতে পারেন।
Error Styling Example:
<form data-bind="submit: submitForm">
<label for="email">Email:</label>
<input type="text" id="email" data-bind="value: email" />
<div data-bind="visible: email.hasError, css: { 'error': email.hasError }, text: 'Email is required and must be valid'"></div>
<label for="password">Password:</label>
<input type="password" id="password" data-bind="value: password" />
<div data-bind="visible: password.hasError, css: { 'error': password.hasError }, text: 'Password is required and must be at least 6 characters'"></div>
<button type="submit">Submit</button>
</form>
<style>
.error {
color: red;
font-weight: bold;
}
</style>
Explanation:
- CSS Classes: আপনি validation errors এর জন্য কাস্টম স্টাইল ব্যবহার করতে পারেন। উদাহরণস্বরূপ,
css: { 'error': password.hasError }ব্যবহার করে password ইনপুটের পাশে ত্রুটি বার্তা প্রদর্শন করা হচ্ছে। - Error Message Visibility:
data-bind="visible: password.hasError"এর মাধ্যমে শুধু তখনই ত্রুটি বার্তা দেখানো হবে যখন ইনপুটের মধ্যে ভুল থাকবে।
KnockoutJS তে validation messages এবং error handling অত্যন্ত সহজে করা যায়। ko.validation প্লাগইন এর মাধ্যমে আপনি ইউজার ইনপুটের জন্য built-in এবং custom ভ্যালিডেশন যুক্ত করতে পারেন এবং validation errors স্বয়ংক্রিয়ভাবে UI তে প্রদর্শন করতে পারেন। আপনি সহজেই observable ডেটা এবং computed observables ব্যবহার করে form validation, error handling, এবং dynamic validation কনফিগার করতে পারেন, যা আপনার অ্যাপ্লিকেশনের ইউজার এক্সপেরিয়েন্সকে উন্নত করে।
Read more
