Polymer ফ্রেমওয়ার্কে Custom Validators তৈরি করা খুবই সহজ এবং এটি আপনাকে কাস্টম ইনপুট যাচাইকরণের নিয়ম তৈরি করতে সহায়তা করে। সাধারণত, আপনি Polymer properties এবং data binding ব্যবহার করে কাস্টম ভ্যালিডেটর তৈরি করতে পারেন, যা আপনার ওয়েব কম্পোনেন্টের ডেটা ইনপুট ভ্যালিডেশন কার্যকর করতে পারে।
Custom Validator তৈরি করার পদ্ধতি
Polymer ফ্রেমওয়ার্কে Custom Validators তৈরি করার জন্য, আপনাকে Polymer কম্পোনেন্টের properties সেকশনে কাস্টম ভ্যালিডেশন যুক্ত করতে হবে। এই কাস্টম ভ্যালিডেটরটি ডেটা প্রবাহের সময় ডেটার সঠিকতা যাচাই করবে এবং প্রয়োজনে ত্রুটি বার্তা দেখাবে।
Custom Validator উদাহরণ
ধরা যাক, আপনি একটি ইনপুট ফিল্ড তৈরি করতে চান যেখানে ইউজার একটি ইমেইল ঠিকানা প্রবেশ করবে এবং আপনি কাস্টম ভ্যালিডেটর দিয়ে ইমেইল ঠিকানার বৈধতা যাচাই করতে চান।
ধাপ ১: Polymer কম্পোনেন্ট তৈরি করা এবং Custom Validator যুক্ত করা
<dom-module id="email-validator">
<template>
<style>
:host {
display: block;
padding: 16px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
}
input {
padding: 8px;
margin: 10px 0;
width: 100%;
box-sizing: border-box;
}
.error {
color: red;
font-size: 14px;
}
</style>
<div>
<label for="email">Enter your email:</label>
<input id="email" type="email" value="{{email::input}}" on-input="validateEmail">
<div class="error" hidden$="[[!errorMessage]]">{{errorMessage}}</div>
</div>
</template>
<script>
class EmailValidator extends Polymer.Element {
static get is() {
return 'email-validator';
}
static get properties() {
return {
email: {
type: String,
value: ''
},
errorMessage: {
type: String,
value: ''
}
};
}
// কাস্টম ভ্যালিডেটর ফাংশন
validateEmail() {
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(this.email)) {
this.errorMessage = 'Please enter a valid email address.';
} else {
this.errorMessage = '';
}
}
}
customElements.define(EmailValidator.is, EmailValidator);
</script>
</dom-module>
ব্যাখ্যা:
- HTML Structure:
- এখানে একটি
inputফিল্ড এবং একটি error message ডিভ রাখা হয়েছে, যা ইউজার যদি ভুল ইমেইল ঠিকানা প্রদান করেন তবে ত্রুটি বার্তা দেখাবে। on-input="validateEmail"ব্যবহার করে ইমেইল ইনপুটের পরিবর্তন অনুযায়ী কাস্টম ভ্যালিডেটর ফাংশনvalidateEmailকল করা হচ্ছে।
- এখানে একটি
- Properties:
email: এটি ইনপুট ফিল্ডের ভ্যালু ধারণ করবে।errorMessage: এটি ত্রুটি বার্তা ধারণ করবে, যদি ইউজার ভুল ইমেইল ঠিকানা প্রদান করেন।
- validateEmail Function:
- এই ফাংশনটি ইউজারের ইমেইল ইনপুট যাচাই করে একটি কাস্টম প্যাটার্ন (regular expression) ব্যবহার করে। যদি ইমেইল ভ্যালিড না হয়, তবে
errorMessageপ্রপার্টিতে একটি ত্রুটি বার্তা সেট করা হয়।
- এই ফাংশনটি ইউজারের ইমেইল ইনপুট যাচাই করে একটি কাস্টম প্যাটার্ন (regular expression) ব্যবহার করে। যদি ইমেইল ভ্যালিড না হয়, তবে
- Error Message:
- hidden$="[[!errorMessage]]": এই ডিরেকটিভটি Polymer 3.x-এ ব্যবহার করা হয়, যা এই ত্রুটি বার্তাটি শুধুমাত্র তখন দেখাবে যদি
errorMessageপ্রপার্টি সেট করা থাকে।
- hidden$="[[!errorMessage]]": এই ডিরেকটিভটি Polymer 3.x-এ ব্যবহার করা হয়, যা এই ত্রুটি বার্তাটি শুধুমাত্র তখন দেখাবে যদি
ধাপ ২: Polymer উপাদান ব্যবহার করা
এখন এই কাস্টম ইমেইল ভ্যালিডেটর উপাদানটি যেকোনো HTML ডকুমেন্টে ব্যবহার করা যেতে পারে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polymer Custom Validator Example</title>
<script src="https://cdn.jsdelivr.net/npm/@polymer/polymer@3.0.0/polymer-element.js"></script>
<script src="path-to-your-email-validator.js"></script> <!-- আপনার কাস্টম ভ্যালিডেটর ফাইল -->
</head>
<body>
<email-validator></email-validator>
</body>
</html>
এখানে, যখন ব্যবহারকারী ভুল ইমেইল ঠিকানা প্রদান করবেন, তখন ত্রুটি বার্তা প্রদর্শিত হবে।
Custom Validator ফাংশনালিটি উন্নত করা
Polymer ফ্রেমওয়ার্কে কাস্টম ভ্যালিডেটর তৈরি করার সময়, আপনি আরও উন্নত ভ্যালিডেশন যুক্ত করতে পারেন যেমন:
- Multiple validators: একাধিক কাস্টম ভ্যালিডেটর যুক্ত করা।
- Async validation: অ্যাসিঙ্ক্রোনাস ডেটা যাচাইকরণ (যেমন সার্ভারের মাধ্যমে যাচাইকরণ)।
- Error handling: ত্রুটি বার্তা এবং স্টাইলিং আরও উন্নত করা।
Multiple Validators Example:
validateEmail() {
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(this.email)) {
this.errorMessage = 'Please enter a valid email address.';
} else if (this.email === 'test@example.com') {
this.errorMessage = 'This email is not allowed.';
} else {
this.errorMessage = '';
}
}
এখানে, আপনি ইমেইল ঠিকানা যাচাই করতে আরও একটি কাস্টম শর্ত যোগ করেছেন, যেখানে test@example.com এর মতো একটি নির্দিষ্ট ইমেইল নিষিদ্ধ করা হয়েছে।
Polymer ফ্রেমওয়ার্কে Custom Validators তৈরি করা সহজ এবং অত্যন্ত কাস্টমাইজযোগ্য। আপনি সহজেই কাস্টম ভ্যালিডেটর তৈরি করতে পারেন যা আপনার ইনপুট ডেটার সঠিকতা যাচাই করবে এবং ব্যবহারকারীদের কাছে প্রাসঙ্গিক ত্রুটি বার্তা প্রদর্শন করবে। এই পদ্ধতিটি Polymer এর properties এবং data binding এর শক্তিকে কাজে লাগিয়ে ওয়েব অ্যাপ্লিকেশনগুলির ডেটা ভ্যালিডেশনকে আরও শক্তিশালী এবং ব্যবহারকারী বান্ধব করে তোলে।
Read more
