কাস্টম ভ্যালিডেশন লজিক এবং মেসেজিং

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

এখানে আমরা দেখব কিভাবে Aurelia Validation প্লাগইন ব্যবহার করে কাস্টম ভ্যালিডেশন লজিক এবং মেসেজিং তৈরি করতে হয়।

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

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

npm install aurelia-validation

এটি ইনস্টল করার পর, Validation প্লাগইনকে আপনার main.js বা main.ts ফাইলে রেজিস্টার করতে হবে।

main.js (বা main.ts)

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

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-validation');

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

এটি Validation প্লাগইনকে গ্লোবালি রেজিস্টার করবে, যাতে আপনি কম্পোনেন্টে বা ভিউতে এটি ব্যবহার করতে পারেন।

২. কাস্টম ভ্যালিডেশন লজিক তৈরি করা

Aurelia Validation প্লাগইনে কাস্টম ভ্যালিডেশন লজিক তৈরি করা বেশ সহজ। আপনাকে ValidationRules API ব্যবহার করে ভ্যালিডেশন রুলস তৈরি করতে হবে।

উদাহরণ: কাস্টম ভ্যালিডেশন রুল

ধরা যাক, আমাদের একটি ফিল্ড আছে যেটি শুধুমাত্র ইংরেজি অক্ষর গ্রহণ করবে। আমরা এই রুলটি কাস্টম ভ্যালিডেশন হিসেবে তৈরি করবো।

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

import { ValidationRules } from 'aurelia-validation';

ValidationRules
  .ensure('name')
  .matches(/^[a-zA-Z\s]*$/).withMessage('Name must contain only letters and spaces.')
  .on(User);

এখানে, name ফিল্ডে শুধুমাত্র অক্ষর এবং স্পেস অনুমোদিত। যদি ইউজার কোনো অক্ষর ছাড়া অন্য কিছু প্রবেশ করায়, তবে একটি কাস্টম মেসেজ প্রদর্শিত হবে।

৩. কাস্টম মেসেজিং

Aurelia Validation প্লাগইনে আপনি কাস্টম মেসেজও দিতে পারেন, যাতে ব্যবহারকারীরা কী ভুল করেছেন তা সঠিকভাবে বুঝতে পারে।

কাস্টম মেসেজ সেট করা

আপনি withMessage মেথড ব্যবহার করে কাস্টম মেসেজ নির্ধারণ করতে পারেন। পূর্বের উদাহরণে, যখন নামের ক্ষেত্রে ভুল ইনপুট দেওয়া হয়, তখন একটি কাস্টম মেসেজ ("Name must contain only letters and spaces.") প্রদর্শিত হবে।

ValidationRules
  .ensure('name')
  .matches(/^[a-zA-Z\s]*$/).withMessage('Name must contain only letters and spaces.')
  .on(User);

এখানে, withMessage ব্যবহার করে আপনি একটি কাস্টম মেসেজ প্রদান করতে পারেন। এছাড়াও আপনি multi-language সাপোর্টের জন্য কাস্টম মেসেজ ফাইলও ব্যবহার করতে পারেন।

৪. ভ্যালিডেশন এক্সিকিউট করা এবং মেসেজ দেখানো

একবার ভ্যালিডেশন রুলস তৈরি হয়ে গেলে, আপনাকে সেটি ValidationController এর মাধ্যমে পরিচালনা করতে হবে। ভ্যালিডেশন এক্সিকিউট করার জন্য আপনি validate মেথড ব্যবহার করতে পারেন।

উদাহরণ: ফর্ম ভ্যালিডেশন

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

User.js (ViewModel)

import { ValidationController, ValidationControllerFactory } from 'aurelia-validation';

export class User {
  static inject = [ValidationControllerFactory];

  constructor(validationControllerFactory) {
    this.controller = validationControllerFactory.createForCurrentScope();
    this.name = '';
    this.email = '';
  }

  submit() {
    this.controller.validate().then(results => {
      if (results.length === 0) {
        alert('Form is valid!');
      } else {
        alert('Form is invalid!');
      }
    });
  }
}

User.html (View)

<template>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" value.bind="name" />
    
    <label for="email">Email:</label>
    <input type="email" id="email" value.bind="email" />
    
    <button click.delegate="submit()">Submit</button>
  </form>
</template>

এখানে, submit() মেথডের মধ্যে আমরা this.controller.validate() ব্যবহার করেছি। এটি সমস্ত ইনপুট ভ্যালিডেশন এক্সিকিউট করবে এবং যদি কোনো ত্রুটি থাকে, তবে সেগুলো দেখাবে।

৫. ভ্যালিডেশন মেসেজ শো করা

ভ্যালিডেশন মেসেজ দেখানোর জন্য আপনি validation রেজাল্ট ব্যবহার করতে পারেন এবং সেগুলো UI তে ডিসপ্লে করতে পারেন।

User.html (Updated with error messages)

<template>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" value.bind="name" />
    <div if.bind="controller.errors.length > 0">
      <p class="error" repeat.for="error of controller.errors">${error.message}</p>
    </div>
    
    <label for="email">Email:</label>
    <input type="email" id="email" value.bind="email" />
    <div if.bind="controller.errors.length > 0">
      <p class="error" repeat.for="error of controller.errors">${error.message}</p>
    </div>
    
    <button click.delegate="submit()">Submit</button>
  </form>
</template>

এখানে, আমরা controller.errors থেকে সমস্ত ত্রুটি মেসেজ সংগ্রহ করেছি এবং repeat.for ব্যবহার করে সেগুলো লুপের মাধ্যমে দেখাচ্ছি।

উপসংহার

Aurelia Validation প্লাগইন ব্যবহার করে আপনি কাস্টম ভ্যালিডেশন লজিক এবং মেসেজিং তৈরি করতে পারবেন, যা ব্যবহারকারীর ইনপুট যাচাই করার প্রক্রিয়াকে সহজ, কার্যকরী এবং ব্যবহারকারী-বান্ধব করে তোলে। আপনি ValidationRules API ব্যবহার করে বিভিন্ন ধরণের কাস্টম রুলস তৈরি করতে পারেন এবং withMessage মেথডের মাধ্যমে কাস্টম ত্রুটি বার্তা প্রদর্শন করতে পারেন। এটি ডেটা ইনপুটের নিরাপত্তা নিশ্চিত করতে এবং ব্যবহারকারীদের সুবিধার্থে ত্রুটি বার্তা সরবরাহ করতে সাহায্য করে।