Aurelia Validation প্লাগইন ব্যবহার

Aurelia-তে Validation প্লাগইন ব্যবহার করে আপনি সহজেই আপনার ফর্ম এবং ইনপুট ভ্যালিডেশন পরিচালনা করতে পারেন। এটি একটি শক্তিশালী প্লাগইন যা ডেভেলপারদের ইনপুট ডেটা যাচাই করতে সাহায্য করে, যেন ভুল বা অসম্পূর্ণ ডেটা প্রক্রিয়াজাত না হয়। এটি ব্যবহারকারী ইন্টারফেসে সহজেই ভ্যালিডেশন ম্যাসেজ প্রদর্শন এবং ডেটা সঠিকভাবে প্রক্রিয়া করার সুযোগ দেয়।

১. Aurelia Validation প্লাগইন ইনস্টল করা

Aurelia Validation প্লাগইন ইনস্টল করতে আপনাকে প্রথমে নিচের কমান্ডটি চালাতে হবে:

npm install aurelia-validation --save

এটি aurelia-validation প্যাকেজ ইনস্টল করবে এবং আপনার package.json ফাইলে এটি অন্তর্ভুক্ত করবে।

২. Aurelia Validation প্লাগইন কনফিগার করা

এখন, main.js বা main.ts ফাইলে প্লাগইনটি কনফিগার করতে হবে। এটি আপনার অ্যাপ্লিকেশনের মূল এন্ট্রি পয়েন্ট।

import { Aurelia } from 'aurelia-framework';
import { Validation } from 'aurelia-validation';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin(Validation);

  aurelia.start().then(() => aurelia.setRoot());
}

এখানে, Validation প্লাগইনটি aurelia.use.plugin() মাধ্যমে অ্যাপ্লিকেশনে যোগ করা হয়েছে।

৩. ভ্যালিডেশন রুল তৈরি করা

এখন, আপনি একটি কম্পোনেন্টে ভ্যালিডেশন রুল তৈরি করতে পারেন। ধরুন, আপনি একটি সিম্পল ফর্ম তৈরি করতে চান যেখানে ব্যবহারকারী নাম এবং ইমেইল প্রদান করবে।

উদাহরণ: Form with Validation

app.html (ফর্মের HTML)

<template>
  <form submit.delegate="submitForm()">
    <label for="name">Name:</label>
    <input id="name" value.bind="name" />
    <span if.bind="nameError" class="error">${nameError}</span>

    <label for="email">Email:</label>
    <input id="email" value.bind="email" />
    <span if.bind="emailError" class="error">${emailError}</span>

    <button type="submit">Submit</button>
  </form>
</template>

app.js (ভ্যালিডেশন এবং সাবমিট লজিক)

import { inject } from 'aurelia-framework';
import { ValidationController, ValidationRules, validateTrigger } from 'aurelia-validation';

@inject(ValidationController)
export class App {
  constructor(validationController) {
    this.validationController = validationController;

    // Validation rules
    ValidationRules
      .ensure('name').required().minLength(3)
      .ensure('email').required().email()
      .on(this);

    // Trigger validation on blur
    this.validationController.validateTrigger = validateTrigger.blur;
  }

  submitForm() {
    this.validationController.validate().then(result => {
      if (result.valid) {
        alert("Form Submitted!");
      } else {
        alert("Form has validation errors!");
      }
    });
  }
}

এখানে ValidationRules দিয়ে name এবং email এর জন্য ভ্যালিডেশন রুলস সেট করা হয়েছে:

• name: এটি ৩টি অক্ষরের কম হওয়া চলবে না এবং অবশ্যই পূর্ণ করতে হবে।
• email: এটি অবশ্যই একটি বৈধ ইমেইল ঠিকানা হতে হবে এবং অবশ্যই পূর্ণ করতে হবে।

যখন ফর্মটি সাবমিট করা হবে, তখন this.validationController.validate() কল করা হবে যা সমস্ত ইনপুটের ভ্যালিডেশন পরীক্ষা করবে। যদি সব কিছু সঠিক হয়, তাহলে "Form Submitted!" ম্যাসেজ প্রদর্শিত হবে; অন্যথায়, "Form has validation errors!" প্রদর্শিত হবে।

৪. ভ্যালিডেশন রেস্পন্স এবং এরর ম্যাসেজ

ভ্যালিডেশন এরর ম্যাসেজ গুলি সরাসরি HTML এ প্রদর্শিত হবে যেমন উপরের উদাহরণে nameError এবং emailError স্প্যান ট্যাগে ব্যবহৃত হয়েছে। যদি কোন ইনপুট ভ্যালিড না হয়, এটি স্বয়ংক্রিয়ভাবে এরর ম্যাসেজ প্রদর্শন করবে।

উদাহরণ: কাস্টম এরর ম্যাসেজ

আপনি কাস্টম এরর ম্যাসেজ তৈরি করতে পারেন, যেমন:

ValidationRules
  .ensure('name').required().withMessage('Name is required').minLength(3).withMessage('Name must be at least 3 characters long')
  .ensure('email').required().withMessage('Email is required').email().withMessage('Please enter a valid email address')
  .on(this);

এটি কাস্টম এরর মেসেজ ব্যবহার করতে সাহায্য করবে, যেমন "Name is required" বা "Please enter a valid email address"।

৫. অটো ভ্যালিডেশন

আপনি চাইলে অটো ভ্যালিডেশন সক্ষম করতে পারেন, যাতে ইনপুট ফিল্ডে কোনো পরিবর্তন হলে স্বয়ংক্রিয়ভাবে ভ্যালিডেশন চলতে থাকে।

ValidationRules
  .ensure('name').required().minLength(3)
  .ensure('email').required().email()
  .on(this)
  .validateTrigger = validateTrigger.change;

এভাবে, প্রতিটি ইনপুটে পরিবর্তন ঘটলে অটো ভ্যালিডেশন চলবে।

৬. ভ্যালিডেশন কন্ট্রোলার এবং কাস্টম ভ্যালিডেশন

Aurelia Validation প্লাগইন ValidationController ব্যবহার করে আপনার ফর্মের ভ্যালিডেশন পরিচালনা করতে পারে। আপনি কাস্টম ভ্যালিডেশন তৈরি করতে পারেন যেখানে নির্দিষ্ট ফিল্ড বা রুল নির্ধারণ করা থাকে।

কাস্টম ভ্যালিডেশন রুল

ValidationRules.customRule(
  'greaterThan', 
  (value, obj, args) => value > args[0], 
  'Value must be greater than ${args[0]}'
);

এটি একটি কাস্টম রুল তৈরি করবে যেখানে আপনি একটি নির্দিষ্ট মানের বেশি হতে হবে এমন শর্ত যোগ করতে পারবেন।

উপসংহার

Aurelia Validation প্লাগইনটি অত্যন্ত শক্তিশালী এবং সহজে ব্যবহারযোগ্য। এটি আপনাকে আপনার অ্যাপ্লিকেশনে ইনপুট ভ্যালিডেশন সহজে পরিচালনা করার সুযোগ দেয়। ফর্ম ডেটার সঠিকতা নিশ্চিত করার জন্য এটি আপনাকে বিভিন্ন ধরনের ভ্যালিডেশন রুল এবং কাস্টম এরর মেসেজ সহ পূর্ণাঙ্গ সমাধান প্রদান করে।