Custom Validators তৈরি

Prototype Framework হল একটি JavaScript framework যা ওয়েব ডেভেলপমেন্টের জন্য বিভিন্ন ধরনের ইউটিলিটি এবং মেথড সরবরাহ করে। এটি মূলত DOM (Document Object Model) ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, AJAX রিকোয়েস্ট, এবং অন্যান্য জাভাস্ক্রিপ্ট কাজগুলোর জন্য ব্যবহৃত হয়।

Custom Validators তৈরি করা এক ধরনের কাস্টম ইভেন্ট বা ইউটিলিটি তৈরি করা যা নির্দিষ্ট মান যাচাই করার জন্য ব্যবহৃত হয়। প্রোটোটাইপ ফ্রেমওয়ার্কে custom validators তৈরি করার মাধ্যমে আপনি ফর্ম ইনপুট বা অন্য কোনো ভ্যালিডেশন কাজ সহজে করতে পারেন।

Custom Validators তৈরি করা

Prototype Framework এর সাহায্যে আপনি সহজেই কাস্টম ভ্যালিডেটর তৈরি করতে পারেন। এর জন্য আপনাকে Prototype এর Form.Element এবং Form.Validator ইউটিলিটিগুলি ব্যবহার করতে হবে।

Custom Validator তৈরি করার পদক্ষেপ:

1. Prototype ফ্রেমওয়ার্ক লোড করা: প্রথমে, Prototype.js ফ্রেমওয়ার্ক আপনার প্রোজেক্টে লোড করতে হবে। এটি সাধারণত CDN বা লোকাল ফাইল থেকে করা যেতে পারে।

   CDN লিঙ্ক:

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
   

2. Custom Validator তৈরি করা: প্রোটোটাইপ ফ্রেমওয়ার্কের Form.Validator API ব্যবহার করে আপনি কাস্টম ভ্যালিডেটর তৈরি করতে পারেন। নিচে একটি উদাহরণ দেওয়া হয়েছে যা ইনপুটে শুধুমাত্র ইমেইল ফরম্যাট চেক করবে।

   Custom Email Validator Example:

   Form.Validator.add('validate-email', {
       // Error message to display when validation fails
       errorMessage: "Please enter a valid email address.",
       
       // Function to validate the input
       validate: function(value) {
           var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
           return regex.test(value);
       }
   });
   

Explanation:

• Form.Validator.add: এটি একটি Prototype ফাংশন যা একটি কাস্টম ভ্যালিডেটর তৈরি করতে ব্যবহৃত হয়। এখানে, আমরা validate-email নামের একটি কাস্টম ভ্যালিডেটর তৈরি করেছি।
• errorMessage: যখন ইনপুট ভ্যালিডেশন ব্যর্থ হবে, তখন যে ত্রুটি বার্তা প্রদর্শিত হবে তা এখানে নির্ধারণ করা হয়েছে।
• validate: এই ফাংশনে মূল ভ্যালিডেশন লজিক লেখা হয়। এখানে, একটি সাধারণ ইমেইল রেগুলার এক্সপ্রেশন (regex) ব্যবহার করা হয়েছে যা ইনপুট ফিল্ডের মান ইমেইল ফরম্যাট অনুযায়ী সঠিক কিনা পরীক্ষা করে।

3. Custom Validator ব্যবহার করা: কাস্টম ভ্যালিডেটর ব্যবহার করতে হলে আপনাকে এটি HTML ফর্মের <input> ফিল্ডে প্রয়োগ করতে হবে।

   HTML Example:

   <form id="myForm">
       <label for="email">Email:</label>
       <input type="text" id="email" name="email" class="validate-email" />
       <input type="submit" value="Submit" />
   </form>
   
   <script type="text/javascript">
       var form = new Form.Element('email');
       form.observe('submit', function(event) {
           event.preventDefault();
           if (form.validate()) {
               alert("Form submitted!");
           } else {
               alert("Please enter a valid email.");
           }
       });
   </script>
   

Explanation:

• এখানে, validate-email ক্লাস ইনপুট ফিল্ডে যোগ করা হয়েছে যাতে কাস্টম ইমেইল ভ্যালিডেটর এটি যাচাই করতে পারে।
• form.validate() ফাংশনটি ফর্মের ইনপুট যাচাই করার জন্য ব্যবহার করা হয়। যদি ইনপুট বৈধ হয় তবে ফর্ম সাবমিট করা হবে, অন্যথায় ত্রুটি বার্তা দেখানো হবে।

Additional Custom Validator Types

1. Custom Length Validator:

আপনি একটি কাস্টম ভ্যালিডেটর তৈরি করতে পারেন যা ইনপুটের দৈর্ঘ্য যাচাই করবে।

Form.Validator.add('validate-length', {
    errorMessage: "Input length must be between 5 and 10 characters.",
    
    validate: function(value) {
        return value.length >= 5 && value.length <= 10;
    }
});

2. Custom Number Range Validator:

এটি একটি কাস্টম ভ্যালিডেটর যা নির্দিষ্ট সীমার মধ্যে নম্বর চেক করবে।

Form.Validator.add('validate-range', {
    errorMessage: "Number must be between 10 and 100.",
    
    validate: function(value) {
        var num = parseInt(value, 10);
        return num >= 10 && num <= 100;
    }
});

3. Custom Regex Validator:

আপনি যেকোনো কাস্টম regex ব্যবহার করে একটি ভ্যালিডেটর তৈরি করতে পারেন। উদাহরণস্বরূপ, শুধুমাত্র uppercase অক্ষর চেক করা:

Form.Validator.add('validate-uppercase', {
    errorMessage: "Input must contain uppercase letters only.",
    
    validate: function(value) {
        var regex = /^[A-Z]+$/;
        return regex.test(value);
    }
});

Best Practices for Creating Custom Validators:

1. Error Messages: ভ্যালিডেটর তৈরি করার সময় errorMessage সঠিকভাবে প্রদান করুন যাতে ইউজার বুঝতে পারে কোথায় ভুল হয়েছে।
2. Reusability: কাস্টম ভ্যালিডেটর তৈরি করার সময় চেষ্টা করুন সেগুলো পুনঃব্যবহারযোগ্য করার জন্য, যাতে একই ভ্যালিডেটর একাধিক জায়গায় ব্যবহার করা যায়।
3. Test the Validator: কাস্টম ভ্যালিডেটরের কার্যকারিতা পরীক্ষা করুন এবং নিশ্চিত করুন যে এটি প্রত্যাশিতভাবে কাজ করছে।
4. Modular Code: বড় প্রকল্পে, কাস্টম ভ্যালিডেটরগুলোকে আলাদা ফাইলে রেখে প্রয়োজনে import করুন। এতে কোড আরও সংগঠিত এবং রক্ষণাবেক্ষণযোগ্য হবে।

Prototype Framework এ Custom Validators তৈরি করা খুবই সহজ এবং শক্তিশালী, যা ফর্ম ইনপুট যাচাই করতে সহায়তা করে। আপনি Prototype's Form.Validator.add ফাংশন ব্যবহার করে বিভিন্ন ধরনের কাস্টম ভ্যালিডেটর তৈরি করতে পারেন, যেমন length validation, range validation, regex validation ইত্যাদি। এগুলো ফর্মের validity চেক করতে সহায়তা করে এবং ইউজারকে সহায়ক ত্রুটি বার্তা প্রদান করে।