ফর্মস এবং ফর্ম ভ্যালিডেশন

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

১. Aurelia ফর্ম তৈরি করা

Aurelia ফ্রেমওয়ার্কে ফর্ম তৈরি করা খুবই সহজ। এখানে HTML এবং JavaScript ব্যবহার করে ফর্ম ডিজাইন এবং পরিচালনা করা হয়।

১.১. একটি বেসিক ফর্ম উদাহরণ

<template>
  <form submit.delegate="submitForm()">
    <label for="username">Username:</label>
    <input type="text" id="username" value.bind="user.username" required>
    <br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" value.bind="user.email" required>
    <br>
    
    <button type="submit">Submit</button>
  </form>
</template>

১.২. JavaScript ফাইল (কম্পোনেন্টের ভিউমডেল)

export class UserForm {
  user = {
    username: '',
    email: ''
  };

  submitForm() {
    console.log('Form submitted', this.user);
  }
}

এই উদাহরণে, একটি সাধারণ form তৈরি করা হয়েছে যেখানে দুটি ইনপুট ফিল্ড (username এবং email) এবং একটি সাবমিট বাটন রয়েছে। value.bind ব্যবহার করে আমরা ভ্যালু বাইন্ডিং করেছি যাতে ফর্মের ইনপুট ফিল্ডের ডেটা আমাদের user অবজেক্টে সিঙ্ক্রোনাইজ হয়।

২. ফর্ম ভ্যালিডেশন

Aurelia ফ্রেমওয়ার্কে ফর্ম ভ্যালিডেশন দুটি প্রধান উপায়ে করা যায়:

• HTML5 ভ্যালিডেশন (যেমন, required, email, ইত্যাদি)
• কাস্টম ভ্যালিডেশন (ডেভেলপার কর্তৃক কাস্টম লগিক তৈরি)

২.১. HTML5 ভ্যালিডেশন

HTML5-এর বিল্ট-ইন ফিচার যেমন required, minlength, pattern, ইত্যাদি ব্যবহার করে সহজেই ভ্যালিডেশন করা যায়। এটি ব্রাউজার-লেভেল ভ্যালিডেশন নিশ্চিত করে।

<template>
  <form submit.delegate="submitForm()">
    <label for="username">Username:</label>
    <input type="text" id="username" value.bind="user.username" required minlength="5">
    <br>

    <label for="email">Email:</label>
    <input type="email" id="email" value.bind="user.email" required>
    <br>

    <button type="submit" disabled.bind="!isFormValid()">Submit</button>
  </form>
</template>

এখানে:

• required এবং minlength="5" ব্যবহার করে ইনপুট ফিল্ডের ভ্যালিডেশন নিশ্চিত করা হয়েছে।
• ইমেইল ভ্যালিডেশন স্বয়ংক্রিয়ভাবে ব্রাউজার দ্বারা করা হয়।

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

কাস্টম ভ্যালিডেশন করতে, আপনি Aurelia এর Custom Validator ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একটি কাস্টম ভ্যালিডেটর তৈরি করতে পারেন যা ব্যবহারকারীর নামের মধ্যে বিশেষ চরিত্র থাকতে বাধা দিবে।

export class UsernameValidatorValueConverter {
  toView(value) {
    // কাস্টম ভ্যালিডেশন: শুধুমাত্র অক্ষর ও সংখ্যা গ্রহণ করা হবে
    return /^[a-zA-Z0-9]+$/.test(value);
  }
}

এখন, আপনি এই কাস্টম ভ্যালিডেটরটি ফর্মের ইনপুটে ব্যবহার করতে পারেন:

<template>
  <form submit.delegate="submitForm()">
    <label for="username">Username:</label>
    <input type="text" id="username" value.bind="user.username & usernameValidator" required>
    <br>

    <label for="email">Email:</label>
    <input type="email" id="email" value.bind="user.email" required>
    <br>

    <button type="submit" disabled.bind="!isFormValid()">Submit</button>
  </form>
</template>

এখানে usernameValidator কাস্টম ভ্যালিডেটর যোগ করা হয়েছে যা নিশ্চিত করে যে username শুধুমাত্র অক্ষর এবং সংখ্যা হতে পারে।

৩. ফর্ম ভ্যালিডেশন মেসেজ প্রদর্শন

Aurelia তে আপনি সহজেই ইনপুট ফিল্ডের জন্য ভ্যালিডেশন মেসেজ প্রদর্শন করতে পারেন। আপনি valid এবং invalid ক্লাসের সাহায্যে ইনপুট ফিল্ডের ভ্যালিডেশন স্টেট চেক করতে পারেন এবং ভ্যালিডেশন মেসেজ শো করতে পারেন।

<template>
  <form submit.delegate="submitForm()">
    <label for="username">Username:</label>
    <input type="text" id="username" value.bind="user.username" required minlength="5">
    <span if.bind="usernameCtrl.invalid">Username must be at least 5 characters</span>
    <br>

    <label for="email">Email:</label>
    <input type="email" id="email" value.bind="user.email" required>
    <span if.bind="emailCtrl.invalid">Please enter a valid email</span>
    <br>

    <button type="submit" disabled.bind="!isFormValid()">Submit</button>
  </form>
</template>

এখানে, আমরা invalid এবং valid চেক করে ইনপুট ফিল্ডের পাশে ভ্যালিডেশন মেসেজ দেখাচ্ছি। এছাড়া, submit বাটনকে disabled করে রাখা হয়েছে যতক্ষণ না ফর্মটি সঠিকভাবে পূর্ণ হয়।

৪. Aurelia Validation Library

Aurelia-তে আরও উন্নত ফর্ম ভ্যালিডেশন করতে আপনি Aurelia Validation লাইব্রেরি ব্যবহার করতে পারেন। এই লাইব্রেরিটি আপনাকে ফর্ম ভ্যালিডেশন এবং কাস্টম ভ্যালিডেটর সহজে তৈরি করতে সাহায্য করে।

লাইব্রেরি ইন্সটল করা:

npm install aurelia-validation

ইনস্টল করার পর:

1. Validation কনফিগারেশন করা:

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

@inject(ValidationControllerFactory)
export class UserForm {
  constructor(controllerFactory) {
    this.controller = controllerFactory.createForCurrentScope();
  }

  user = {
    username: '',
    email: ''
  };

  submitForm() {
    this.controller.validate()
      .then(result => {
        if (result.valid) {
          console.log('Form is valid:', this.user);
        } else {
          console.log('Form is invalid');
        }
      });
  }
}

এখানে, Aurelia Validation কনট্রোলার ব্যবহার করে আপনি ফর্মের ভ্যালিডেশন করতে পারবেন এবং submit হওয়ার আগে ফর্মটি চেক করতে পারবেন।

উপসংহার

Aurelia ফ্রেমওয়ার্কে ফর্ম তৈরি এবং ফর্ম ভ্যালিডেশন করা সহজ এবং খুবই শক্তিশালী। আপনি HTML5 ফর্ম ভ্যালিডেশন, কাস্টম ভ্যালিডেটর, এবং Aurelia Validation Library ব্যবহার করে শক্তিশালী এবং ব্যবহারকারী-বান্ধব ভ্যালিডেশন সিস্টেম তৈরি করতে পারবেন। এর মাধ্যমে আপনি ফর্মের ইনপুট সঠিকভাবে যাচাই করতে পারবেন এবং একটি নির্ভুল ও নিরাপদ অ্যাপ্লিকেশন তৈরি করতে সক্ষম হবেন।

Aurelia ফ্রেমওয়ার্কে ফর্ম ডাটাবাইন্ডিং একটি শক্তিশালী এবং সহজ উপায়, যার মাধ্যমে ইউজারের ইনপুট এবং অ্যাপ্লিকেশনের ডেটার মধ্যে একত্রিতকরণ করা যায়। Aurelia এর ডাটাবাইন্ডিং সিস্টেম two-way data binding সাপোর্ট করে, যার ফলে ইউজার ইনপুটের পরিবর্তন সরাসরি মডেল (জাভাস্ক্রিপ্ট অবজেক্ট) এবং ভিউ (HTML) এর মধ্যে সিঙ্ক্রোনাইজ করা হয়।

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

Aurelia ফর্ম ডাটাবাইন্ডিং কিভাবে কাজ করে

Aurelia ফ্রেমওয়ার্কে ডাটাবাইন্ডিং অত্যন্ত সহজ এবং শক্তিশালী। আমরা এটি নিম্নলিখিত প্রকারে ব্যবহার করতে পারি:

• Two-Way Binding: এটি ইউজারের ইনপুট এবং মডেলকে সিঙ্ক্রোনাইজ করে।
• One-Way Binding: এটি শুধুমাত্র মডেল থেকে ভিউ তে ডেটা পাঠায়।
• One-Time Binding: এটি শুধুমাত্র পেজ লোডের সময় একবার ডেটা পাঠায়।

১. টেক্সট ইনপুট ফিল্ডে ডাটাবাইন্ডিং

Aurelia এর two-way data binding ফিচার ব্যবহার করে, আপনি সহজেই ইনপুট ফিল্ডের মধ্যে ডেটা পাঠাতে এবং গ্রহণ করতে পারেন। এটি সাধারণত bind কনস্ট্রেন্ট ব্যবহার করে করা হয়।

উদাহরণ: টেক্সট ইনপুট ফিল্ডে ডাটাবাইন্ডিং

<template>
  <div>
    <label for="username">Username:</label>
    <input id="username" type="text" value.bind="username">
    <p>Hello, ${username}!</p>
  </div>
</template>

app.js:

export class App {
  username = '';  // ইনপুটের জন্য ডিফল্ট ভ্যালু
}

এখানে value.bind="username" ব্যবহার করা হয়েছে যা username ভ্যারিয়েবলের সাথে ইনপুট ফিল্ডটিকে বাইন্ড করে। যখন ইউজার ইনপুট করবে, তখন এটি username ভ্যারিয়েবলে পরিবর্তন হবে এবং সেটি ভিউতে দেখানো হবে।

২. চেকবক্সে ডাটাবাইন্ডিং

Aurelia চেকবক্সের ক্ষেত্রে two-way binding সিস্টেম ব্যবহার করে। যখন চেকবক্সের ভ্যালু পরিবর্তন হয়, এটি সংশ্লিষ্ট মডেল বা ভেরিয়েবলে আপডেট হয়।

উদাহরণ: চেকবক্সে ডাটাবাইন্ডিং

<template>
  <div>
    <label for="agree">I agree to the terms and conditions</label>
    <input id="agree" type="checkbox" checked.bind="agreed">
    <p>${agreed ? 'Agreed' : 'Not Agreed'}</p>
  </div>
</template>

app.js:

export class App {
  agreed = false;  // চেকবক্সের ডিফল্ট স্টেট
}

এখানে, checked.bind="agreed" ব্যবহার করা হয়েছে, যা agreed ভ্যারিয়েবলের সাথে চেকবক্সটিকে বাইন্ড করে। চেকবক্সে ক্লিক করলে, ভ্যালু পরিবর্তিত হয়ে "Agreed" অথবা "Not Agreed" প্রদর্শিত হবে।

৩. রেডিও বাটনে ডাটাবাইন্ডিং

Aurelia রেডিও বাটনগুলোর জন্যও ডাটাবাইন্ডিং সাপোর্ট করে। একাধিক রেডিও বাটনের মধ্যে একটি সিলেক্ট করা হলে, তা সংশ্লিষ্ট মডেল বা ভ্যারিয়েবলে আপডেট হবে।

উদাহরণ: রেডিও বাটনে ডাটাবাইন্ডিং

<template>
  <div>
    <label>Choose your gender:</label>
    <label>
      <input type="radio" name="gender" value="male" checked.bind="gender === 'male'"> Male
    </label>
    <label>
      <input type="radio" name="gender" value="female" checked.bind="gender === 'female'"> Female
    </label>
    <p>You selected: ${gender}</p>
  </div>
</template>

app.js:

export class App {
  gender = '';  // রেডিও বাটনের ডিফল্ট ভ্যালু
}

এখানে checked.bind="gender === 'male'" এবং checked.bind="gender === 'female'" ব্যবহার করা হয়েছে। এটি ইউজার সিলেকশন অনুযায়ী gender ভ্যারিয়েবলকে আপডেট করবে।

৪. ড্রপডাউন মেনুতে ডাটাবাইন্ডিং

ড্রপডাউন মেনুতে ডাটাবাইন্ডিং করার জন্য, value.bind ব্যবহার করা হয়, যাতে ইউজারের সিলেক্ট করা অপশন ডেটা মডেল বা ভ্যারিয়েবলে আপডেট হয়।

উদাহরণ: ড্রপডাউন মেনুতে ডাটাবাইন্ডিং

<template>
  <div>
    <label for="fruit">Choose a fruit:</label>
    <select id="fruit" value.bind="selectedFruit">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </select>
    <p>You selected: ${selectedFruit}</p>
  </div>
</template>

app.js:

export class App {
  selectedFruit = '';  // ড্রপডাউন মেনুর ডিফল্ট ভ্যালু
}

এখানে, value.bind="selectedFruit" ব্যবহার করা হয়েছে। ইউজার যখন একটি ফ্রুট সিলেক্ট করবে, তখন selectedFruit ভ্যারিয়েবল আপডেট হবে এবং ভিউতে সিলেক্ট করা ফ্রুট প্রদর্শিত হবে।

৫. টেক্সট এরিয়াতে ডাটাবাইন্ডিং

Aurelia টেক্সট এরিয়া ইনপুট ফিল্ডে ডাটাবাইন্ডিং সাপোর্ট করে। এটি ইনপুটের পরিবর্তন এবং মডেলের মধ্যে সম্পর্ক স্থাপন করতে ব্যবহার হয়।

উদাহরণ: টেক্সট এরিয়া ডাটাবাইন্ডিং

<template>
  <div>
    <label for="message">Your message:</label>
    <textarea id="message" value.bind="message"></textarea>
    <p>You wrote: ${message}</p>
  </div>
</template>

app.js:

export class App {
  message = '';  // টেক্সট এরিয়ার ডিফল্ট ভ্যালু
}

এখানে, value.bind="message" ব্যবহার করা হয়েছে, যা message ভ্যারিয়েবলের সাথে টেক্সট এরিয়াটিকে বাইন্ড করে।

৬. ফর্ম সাবমিশন

ফর্ম সাবমিশনের সময় ডাটাবাইন্ডিংয়ের মাধ্যমে ইউজারের ইনপুট ডেটা মডেলেও সংরক্ষণ করা হয় এবং এটি প্রক্রিয়াজাত করা যায়।

উদাহরণ: ফর্ম সাবমিশন

<template>
  <form submit.delegate="submitForm()">
    <label for="username">Username:</label>
    <input id="username" type="text" value.bind="username">
    <button type="submit">Submit</button>
  </form>
  <p>Your username: ${username}</p>
</template>

app.js:

export class App {
  username = '';

  submitForm() {
    alert(`Form submitted with username: ${this.username}`);
  }
}

এখানে, submit.delegate="submitForm()" ব্যবহার করা হয়েছে, যা ফর্ম সাবমিশনের সময় submitForm() ফাংশন কল করবে এবং ইউজারের ইনপুট ভ্যালু আউটপুট হিসেবে দেখাবে।

উপসংহার

Aurelia ফ্রেমওয়ার্কে ফর্ম ডাটাবাইন্ডিং খুবই সহজ এবং শক্তিশালী, যা UI ইনপুট এবং মডেল ডেটার মধ্যে একত্রিতকরণ এবং সিঙ্ক্রোনাইজেশন করতে সাহায্য করে। এতে two-way binding, one-way binding এবং event binding এর মতো বিভিন্ন শক্তিশালী বৈশিষ্ট্য রয়েছে, যা ডেভেলপারদের জন্য দ্রুত এবং কার্যকরী সমাধান প্রদান করে।

Aurelia ফ্রেমওয়ার্কে ফর্ম ইনপুট এবং ইভেন্ট হ্যান্ডলিং অত্যন্ত সহজ এবং কার্যকর। আপনি খুব সহজেই ডেটা বাইন্ডিং এবং ইভেন্ট হ্যান্ডলার ব্যবহার করে ইউজারের ইনপুট গ্রহণ এবং সেই ইনপুটের উপর ভিত্তি করে কাজ করতে পারেন। এই প্রক্রিয়ায় two-way data binding এবং event delegation সহ বেশ কিছু শক্তিশালী কৌশল ব্যবহৃত হয়।

এই গাইডে, আমরা দেখবো কীভাবে Aurelia ব্যবহার করে ফর্ম ইনপুট এবং ইভেন্ট হ্যান্ডলিং করা যায়।

১. Aurelia-তে ফর্ম ইনপুট এবং ডেটা বাইন্ডিং

Aurelia ফ্রেমওয়ার্ক two-way data binding সাপোর্ট করে, যা ফর্ম ইনপুট ফিল্ড এবং ভিউমডেলের মধ্যে ডেটা সিঙ্ক্রোনাইজ করতে সহায়তা করে।

ফর্ম ইনপুটের জন্য ডেটা বাইন্ডিং

Aurelia-তে ইনপুট ফিল্ডে ডেটা বাইন্ডিং করার জন্য, আপনি HTML ইনপুট এলিমেন্টে value.bind অথবা value.twoWay ব্যবহার করতে পারেন। এর মাধ্যমে ইনপুট ফিল্ডের মান স্বয়ংক্রিয়ভাবে ভিউমডেলের সঙ্গে সিঙ্ক্রোনাইজ হবে।

Example: ফর্ম ইনপুটের মাধ্যমে ডেটা বাইন্ডিং

app.html:

<template>
  <h2>Welcome to the Aurelia Form Example</h2>
  
  <form submit.delegate="submitForm()">
    <label for="username">Username:</label>
    <input type="text" id="username" value.bind="username" />

    <label for="email">Email:</label>
    <input type="email" id="email" value.bind="email" />

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

  <div>
    <h3>Form Data:</h3>
    <p>Username: ${username}</p>
    <p>Email: ${email}</p>
  </div>
</template>

app.js (ভিউমডেল):

export class App {
  username = '';  // ইনপুটের জন্য ভিউমডেল
  email = '';

  submitForm() {
    alert(`Username: ${this.username}, Email: ${this.email}`);
  }
}

এখানে, value.bind="username" এবং value.bind="email" এর মাধ্যমে ইনপুট ফিল্ডের মান ভিউমডেলের username এবং email ভেরিয়েবলের সাথে সিঙ্ক্রোনাইজ হচ্ছে। যখন ইউজার ইনপুট ফিল্ডে কিছু লিখবেন, তা সরাসরি ভিউমডেলে চলে যাবে। ফর্ম সাবমিট করলে, submitForm() মেথড কল হবে।

২. ইভেন্ট হ্যান্ডলিং

Aurelia ফ্রেমওয়ার্কে ইভেন্ট হ্যান্ডলিং খুবই সহজ। আপনি click.delegate, submit.delegate বা অন্য কোনো DOM ইভেন্ট ব্যবহার করে ইভেন্ট হ্যান্ডলিং করতে পারেন। ইভেন্ট হ্যান্ডলার ফাংশন ভিউমডেলে যুক্ত করা হয় এবং প্রয়োজন অনুযায়ী ইভেন্ট প্যারামিটার গ্রহণ করে।

Example: একটি বাটনে ক্লিক করার ইভেন্ট হ্যান্ডলিং

app.html:

<template>
  <h2>Click the Button</h2>
  <button click.delegate="onClick()">Click Me</button>
  <p>${message}</p>
</template>

app.js (ভিউমডেল):

export class App {
  message = '';

  onClick() {
    this.message = 'Button clicked!';
  }
}

এখানে, click.delegate="onClick()" দিয়ে বাটনে ক্লিক করলে onClick() ফাংশন কল হবে, এবং সেই ফাংশনে message প্রোপার্টি পরিবর্তন হবে। এটি UI তে আপডেট হবে এবং "Button clicked!" প্রদর্শিত হবে।

৩. ফর্ম ইনপুটের মাধ্যমে ডেটা ভ্যালিডেশন

Aurelia ফ্রেমওয়ার্কে আপনি ফর্ম ইনপুটের জন্য ডেটা ভ্যালিডেশন খুব সহজে করতে পারেন। উদাহরণস্বরূপ, আপনি required এবং minlength বা email টাইপ ভ্যালিডেশন অ্যাট্রিবিউট ব্যবহার করতে পারেন।

Example: ফর্ম ভ্যালিডেশন

app.html:

<template>
  <h2>Sign Up Form</h2>
  
  <form submit.delegate="submitForm()" novalidate>
    <label for="username">Username (Required):</label>
    <input type="text" id="username" value.bind="username" required />

    <label for="email">Email (Valid Email Required):</label>
    <input type="email" id="email" value.bind="email" required />

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

  <div if.bind="!isValid">
    <p>Please fill in all fields correctly.</p>
  </div>
</template>

app.js (ভিউমডেল):

export class App {
  username = '';
  email = '';
  isValid = true;

  submitForm() {
    if (this.username && this.email && this.email.includes('@')) {
      alert('Form submitted!');
    } else {
      this.isValid = false;  // ফর্ম ভ্যালিডেশন চেক করা
    }
  }
}

এখানে, required অ্যাট্রিবিউট ইনপুট ফিল্ডে যুক্ত করা হয়েছে, যা ইউজারকে সঠিকভাবে ইনপুট দিতে বাধ্য করবে। যখন ফর্ম সাবমিট হবে, তখন submitForm() ফাংশনটি চেক করবে ফর্মের ইনপুট ফিল্ডগুলি পূর্ণ এবং বৈধ কিনা। যদি না হয়, একটি বার্তা দেখানো হবে।

৪. ফর্ম ইনপুটে কাস্টম ইভেন্ট হ্যান্ডলিং

Aurelia-তে আপনি কাস্টম ইভেন্টও তৈরি করতে পারেন, যা ইউজারের কিছু নির্দিষ্ট ইনপুট বা ফর্ম জমা দেওয়ার প্রক্রিয়া পরিচালনা করে।

Example: কাস্টম ইনপুট ফিল্ডে ইভেন্ট হ্যান্ডলিং

app.html:

<template>
  <h2>Custom Input Event</h2>

  <label for="customInput">Enter Text:</label>
  <input type="text" id="customInput" value.bind="inputText" input.delegate="onInputChange()" />

  <p>Input Value: ${inputText}</p>
</template>

app.js (ভিউমডেল):

export class App {
  inputText = '';

  onInputChange() {
    console.log('Input value changed:', this.inputText);
  }
}

এখানে, input.delegate="onInputChange()" ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে যা ইনপুট ফিল্ডে টাইপ করার সময় কল হবে। এইভাবে আপনি কাস্টম ইভেন্ট তৈরি এবং ইনপুট মান ট্র্যাক করতে পারেন।

৫. শুধুমাত্র সাবমিট ইভেন্ট হ্যান্ডলিং

আপনি শুধুমাত্র submit ইভেন্ট হ্যান্ডলিংও করতে পারেন। নিচে একটি সাধারণ উদাহরণ দেয়া হলো যেখানে ফর্ম সাপোর্ট করা হয়।

Example: ফর্ম সাবমিট ইভেন্ট

app.html:

<template>
  <h2>Login Form</h2>

  <form submit.delegate="loginUser()">
    <label for="username">Username:</label>
    <input type="text" id="username" value.bind="username" />

    <label for="password">Password:</label>
    <input type="password" id="password" value.bind="password" />

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

app.js (ভিউমডেল):

export class App {
  username = '';
  password = '';

  loginUser() {
    if (this.username && this.password) {
      alert(`Login Successful for ${this.username}`);
    } else {
      alert('Please fill in both fields');
    }
  }
}

এখানে, ফর্মটি সাবমিট হওয়ার সময় loginUser() ফাংশন কল হবে এবং এটি ইউজারের username এবং password যাচাই করবে।

উপসংহার

Aurelia ফ্রেমওয়ার্কে ফর্ম ইনপুট এবং ইভেন্ট হ্যান্ডলিং অত্যন্ত সহজ এবং শক্তিশালী। Two-way data binding এবং event delegation ব্যবহার করে আপনি দ্রুত এবং কার্যকরীভাবে ইউজারের ইনপুট গ্রহণ করতে এবং সেই অনুযায়ী প্রতিক্রিয়া জানাতে পারেন। ভ্যালিডেশন, কাস্টম ইভেন্ট, এবং ফর্ম সাবমিট ইভেন্ট গুলি ব্যবহারের মাধ্যমে, আপনার অ্যাপ্লিকেশন আরও ইন্টারঅ্যাকটিভ এবং ইউজ

ার-ফ্রেন্ডলি হয়ে ওঠে।

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 প্লাগইনটি অত্যন্ত শক্তিশালী এবং সহজে ব্যবহারযোগ্য। এটি আপনাকে আপনার অ্যাপ্লিকেশনে ইনপুট ভ্যালিডেশন সহজে পরিচালনা করার সুযোগ দেয়। ফর্ম ডেটার সঠিকতা নিশ্চিত করার জন্য এটি আপনাকে বিভিন্ন ধরনের ভ্যালিডেশন রুল এবং কাস্টম এরর মেসেজ সহ পূর্ণাঙ্গ সমাধান প্রদান করে।

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 মেথডের মাধ্যমে কাস্টম ত্রুটি বার্তা প্রদর্শন করতে পারেন। এটি ডেটা ইনপুটের নিরাপত্তা নিশ্চিত করতে এবং ব্যবহারকারীদের সুবিধার্থে ত্রুটি বার্তা সরবরাহ করতে সাহায্য করে।