Custom Form Validation Rules তৈরি করা

Web Development - এক্সটিজেএস (ExtJS) - ExtJS Form এবং Form Validation |

ExtJS তে Custom Form Validation Rules তৈরি করা একটি সাধারণ প্রক্রিয়া, যা আপনাকে আপনার ফর্ম ফিল্ডের জন্য নির্দিষ্ট শর্ত তৈরি করতে সাহায্য করে। এই কাস্টম ভ্যালিডেশনগুলি ফর্ম ডেটা যাচাই করার সময় ব্যবহার করা হয় এবং এটি সাধারণত validator ফাংশন বা asyncValidator ফাংশন ব্যবহার করে সম্পন্ন করা হয়।


কাস্টম ভ্যালিডেশন তৈরির জন্য উপাদানগুলি:

  1. validator: সিঙ্ক্রোনাস (synchronous) ভ্যালিডেশন এর জন্য ব্যবহার করা হয়। এটি একটি ফাংশন যা ডেটার ভিত্তিতে ফিল্ডটি বৈধ কিনা চেক করে।
  2. asyncValidator: অ্যাসিঙ্ক্রোনাস (asynchronous) ভ্যালিডেশন, যা কলব্যাক ফাংশন ব্যবহার করে কাজ করে এবং প্রায়ই সার্ভার সাইড যাচাইয়ের জন্য ব্যবহার করা হয়।

১. সিঙ্ক্রোনাস কাস্টম ভ্যালিডেশন

সিঙ্ক্রোনাস ভ্যালিডেশন ফাংশন সাধারণত validator প্রপার্টির মধ্যে লেখা হয় এবং এটি ফিল্ডের ইনপুট ডেটা যাচাই করে। যদি ইনপুটটি বৈধ না হয়, এটি একটি ত্রুটি বার্তা ফিরিয়ে দেয়।

উদাহরণ: নামের দৈর্ঘ্য চেক করা

ধরা যাক, আমরা একটি ফিল্ড তৈরি করতে চাই যেখানে ব্যবহারকারীর নাম কমপক্ষে ৫ অক্ষরের হতে হবে।

Ext.create('Ext.form.Panel', {
    title: 'User Form',
    width: 300,
    bodyPadding: 10,
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        allowBlank: false,  // এই ফিল্ডটি খালি রাখা যাবে না
        validator: function(value) {
            if (value.length < 5) {
                return 'Username must be at least 5 characters long';
            }
            return true; // এটি বৈধ হলে 'true' ফেরত দেয়
        }
    }, {
        xtype: 'button',
        text: 'Submit',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                Ext.Msg.alert('Success', 'Form is valid');
            } else {
                Ext.Msg.alert('Failure', 'Form is invalid');
            }
        }
    }],
    renderTo: Ext.getBody()
});

এখানে:

  • validator ফাংশনটি ব্যবহার করা হয়েছে যাতে ফিল্ডের ইনপুট যাচাই করা যায়। যদি নামের দৈর্ঘ্য ৫ অক্ষরের কম হয়, তবে একটি ত্রুটি বার্তা প্রদর্শিত হবে।

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

অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন সাধারণত সার্ভার সাইড যাচাই করার জন্য ব্যবহৃত হয়, যেখানে একটি ফাংশন ব্যবহারকারীকে একটি সার্ভারে পাঠাতে এবং তার ফলাফল ফেরত পেতে পারে।

উদাহরণ: ইউজারনেমের ইউনিকনেস চেক করা (সার্ভার সাইড)

ধরা যাক, আমাদের একটি ইউজারনেম ফিল্ড রয়েছে, যেখানে আমাদের সার্ভার চেক করতে হবে যে এটি আগে নিবন্ধিত হয়েছে কিনা।

Ext.create('Ext.form.Panel', {
    title: 'User Form',
    width: 300,
    bodyPadding: 10,
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        allowBlank: false,
        validator: function(value) {
            // এটি অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন, কলব্যাক ফাংশন ব্যবহার করে
            var result = false;
            Ext.Ajax.request({
                url: '/check-username',  // সার্ভার API
                params: { username: value },
                async: false,
                success: function(response) {
                    var data = Ext.decode(response.responseText);
                    if (data.exists) {
                        result = 'Username already exists';
                    } else {
                        result = true;
                    }
                },
                failure: function() {
                    result = 'Server error';
                }
            });
            return result;
        }
    }, {
        xtype: 'button',
        text: 'Submit',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                Ext.Msg.alert('Success', 'Form is valid');
            } else {
                Ext.Msg.alert('Failure', 'Form is invalid');
            }
        }
    }],
    renderTo: Ext.getBody()
});

এখানে:

  • async: false সেট করা হয়েছে যাতে Ext.Ajax.request সার্ভারের সঙ্গে যোগাযোগ করার পর সিঙ্ক্রোনাস ভ্যালিডেশন শেষে তার ফলাফল ফেরত দেয়।
  • যদি ইউজারনেমের জন্য সেরা ফলাফল পাওয়া না যায়, তবে এটি ত্রুটি বার্তা দেখাবে, অন্যথায় এটি 'সঠিক' বা 'ভাল' হিসেবে দেখাবে।

৩. ভ্যালিডেটরের অন্যান্য উদাহরণ

ইমেইল ভ্যালিডেশন:

validator: function(value) {
    var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    if (!emailRegex.test(value)) {
        return 'Please enter a valid email address';
    }
    return true;
}

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

validator: function(value) {
    var phoneRegex = /^[0-9]{10}$/;
    if (!phoneRegex.test(value)) {
        return 'Phone number must be 10 digits';
    }
    return true;
}

৪. ফর্মের পুরো ভ্যালিডেশন

ফর্মের পুরো ভ্যালিডেশন চালাতে, আপনি form.isValid() ব্যবহার করতে পারেন যা সমস্ত ফিল্ডের জন্য কাস্টম ভ্যালিডেশন চেক করবে।

var form = this.up('form').getForm();
if (form.isValid()) {
    // ফর্ম সঠিক হলে, সার্ভারে পাঠান বা প্রয়োজনীয় কার্যকলাপ করুন
    console.log('Form is valid!');
} else {
    console.log('Form is invalid!');
}

সারাংশ

  • Custom Form Validation: কাস্টম ভ্যালিডেশন ফাংশন ব্যবহার করে আপনি আপনার ফর্ম ফিল্ডের জন্য নির্দিষ্ট শর্ত তৈরি করতে পারেন।
  • validator: সিঙ্ক্রোনাস ভ্যালিডেশন জন্য ব্যবহৃত হয়, যেখানে ডেটা ফিল্ডের ইনপুট যাচাই করা হয়।
  • asyncValidator: অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন যা সার্ভার সাইড যাচাইয়ের জন্য ব্যবহৃত হয়।
  • form.isValid(): পুরো ফর্মের ভ্যালিডেশন চেক করার জন্য ব্যবহৃত হয়।

এটি আপনার ফর্মের ডেটা যাচাই এবং ব্যবহারকারীদের জন্য সঠিক ইনপুট নিশ্চিত করতে সহায়ক।

Content added By
Promotion