MooTools-এ ফর্ম ইনপুট ভ্যালিডেশন তৈরি করা অত্যন্ত সহজ এবং কার্যকরী। এটি ওয়েব ফর্মে ব্যবহারকারীর ইনপুট যাচাই করার জন্য ব্যবহৃত হয়, যাতে নিশ্চিত করা যায় যে ব্যবহারকারী সঠিকভাবে তথ্য প্রদান করছেন। MooTools এর Validator ক্লাস এবং কাস্টম ভ্যালিডেটর তৈরি করার মাধ্যমে, আপনি খুব সহজে ফর্ম ইনপুট ভ্যালিডেশন করতে পারেন।
এই টিউটোরিয়ালে আমরা দেখব কিভাবে MooTools দিয়ে ফর্ম ইনপুট ভ্যালিডেশন করা যায় এবং কাস্টম ভ্যালিডেটর তৈরি করা যায়।
MooTools দিয়ে ফর্ম ইনপুট ভ্যালিডেশন
MooTools এর মাধ্যমে ফর্ম ভ্যালিডেশন করতে, আপনি Validator ক্লাস ব্যবহার করতে পারেন। এটি ইনপুট ফিল্ডগুলো যাচাই করতে সাহায্য করে, যেমন টেক্সট ফিল্ডে সঠিক ডেটা টাইপ, সঠিক ফরম্যাটে ইনপুট ইত্যাদি।
১. MooTools Validator ক্লাসের মাধ্যমে বেসিক ভ্যালিডেশন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Form Validation</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var form = document.id('myForm');
form.addEvent('submit', function(event) {
event.stop(); // ফর্ম সাবমিট হওয়া আটকানো
if (form.validate()) {
alert('ফর্ম সফলভাবে ভ্যালিড!');
} else {
alert('ফর্ম ভ্যালিড হয়নি!');
}
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="name">নাম:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">ইমেইল:</label>
<input type="email" id="email" name="email" required><br>
<button type="submit">ফর্ম সাবমিট করুন</button>
</form>
</body>
</html>
এখানে:
form.validate()ফাংশনটি ফর্মের সমস্ত ইনপুট ভ্যালিডেশন পরীক্ষা করে।- যদি সমস্ত ইনপুট ফিল্ড সঠিক হয়, তাহলে ফর্ম সাবমিট হবে, অন্যথায় একটি আলার্ট বার্তা দেখাবে।
কাস্টম ভ্যালিডেটর তৈরি করা
MooTools আপনাকে কাস্টম ভ্যালিডেটর তৈরি করার সুবিধা দেয়, যার মাধ্যমে আপনি আপনার ফর্মের ইনপুট যাচাই করার জন্য নিজস্ব লজিক তৈরি করতে পারেন। উদাহরণস্বরূপ, আমরা একটি কাস্টম ভ্যালিডেটর তৈরি করব যা ব্যবহারকারীর বয়স যাচাই করবে।
২. কাস্টম ভ্যালিডেটর উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Custom Validator</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// কাস্টম ভ্যালিডেটর তৈরি
Form.Validator.add('ageValidator', function(value, field) {
if (value >= 18 && value <= 100) {
return true;
} else {
return 'অনুগ্রহ করে একটি বৈধ বয়স প্রদান করুন (১৮-১০০ এর মধ্যে)';
}
});
var form = document.id('myForm');
form.addEvent('submit', function(event) {
event.stop(); // ফর্ম সাবমিট হওয়া আটকানো
if (form.validate()) {
alert('ফর্ম সফলভাবে ভ্যালিড!');
} else {
alert('ফর্ম ভ্যালিড হয়নি!');
}
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="name">নাম:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">ইমেইল:</label>
<input type="email" id="email" name="email" required><br>
<label for="age">বয়স:</label>
<input type="number" id="age" name="age" class="ageValidator" required><br>
<button type="submit">ফর্ম সাবমিট করুন</button>
</form>
</body>
</html>
এখানে:
Form.Validator.add()ফাংশন ব্যবহার করে আমরা একটি কাস্টম ভ্যালিডেটর তৈরি করেছি, যেটি বয়সের মান যাচাই করে (১৮ থেকে ১০০ এর মধ্যে)।- ফর্মে
ageValidatorক্লাস যোগ করা হয়েছে, যাতে বয়স ইনপুট যাচাই করা যায়।
আরও কিছু কাস্টম ভ্যালিডেটরের উদাহরণ
৩. ফোন নম্বর ভ্যালিডেটর
Form.Validator.add('phoneValidator', function(value, field) {
var phonePattern = /^[0-9]{10}$/; // ১০ ডিজিটের ফোন নম্বর
if (phonePattern.test(value)) {
return true;
} else {
return 'অনুগ্রহ করে একটি বৈধ ফোন নম্বর প্রদান করুন (১০ ডিজিট)';
}
});
এই কাস্টম ভ্যালিডেটরটি ফোন নম্বর যাচাই করবে, যাতে এটি ১০ ডিজিটের হয়।
৪. পাসওয়ার্ড শক্তি ভ্যালিডেটর
Form.Validator.add('passwordStrengthValidator', function(value, field) {
var passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/; // কমপক্ষে ৮ ক্যারেক্টার, একটি সংখ্যা এবং একটি অক্ষর
if (passwordPattern.test(value)) {
return true;
} else {
return 'পাসওয়ার্ডে কমপক্ষে ৮ ক্যারেক্টার, একটি সংখ্যা এবং একটি অক্ষর থাকতে হবে';
}
});
এই কাস্টম ভ্যালিডেটরটি পাসওয়ার্ডের শক্তি যাচাই করবে।
সারাংশ
MooTools-এ ফর্ম ইনপুট ভ্যালিডেশন এবং কাস্টম ভ্যালিডেটর তৈরি করা অত্যন্ত সহজ। MooTools এর Form.Validator ক্লাসের মাধ্যমে আপনি সহজেই বিভিন্ন ধরনের ইনপুট ভ্যালিডেশন করতে পারেন, এবং নিজের প্রয়োজন অনুসারে কাস্টম ভ্যালিডেটর তৈরি করতে পারেন। এটি একটি শক্তিশালী টুল, যা ওয়েব ডেভেলপমেন্টে সঠিক ডেটা ইনপুট নিশ্চিত করতে সাহায্য করে।
Read more
