Form Validation এবং Input হ্যান্ডলিং

মুটুলস (Mootools) - Web Development

327

MooTools লাইব্রেরি ফর্ম ভ্যালিডেশন (Form Validation) এবং ইনপুট হ্যান্ডলিং (Input Handling)-এর জন্য কিছু শক্তিশালী এবং সহজ ব্যবহারযোগ্য টুলস সরবরাহ করে। এটি ডেভেলপারদের ওয়েব ফর্মের ইনপুটগুলো যাচাই করার সময় সহজভাবে কাস্টম ভ্যালিডেশন এবং ইনপুট ফিল্ডগুলির সাথে ইন্টারঅ্যাক্ট করতে সহায়তা করে।

Form Validation in MooTools

MooTools-এ ফর্ম ভ্যালিডেশন সাধারণত ইনপুট ফিল্ডগুলির মান চেক করা এবং সঠিকতা যাচাই করা হয়। আপনি কাস্টম ভ্যালিডেশন ফাংশন ব্যবহার করে ওয়েব ফর্মের প্রতিটি ইনপুট ক্ষেত্রের জন্য ভ্যালিডেশন তৈরি করতে পারেন।

১. ফর্ম ভ্যালিডেশন: ইমেইল চেক করা

ধরা যাক, আপনি একটি ফর্মে ইমেইল ইনপুট চেক করতে চান। নিচের উদাহরণে ইমেইল ভ্যালিডেশন প্রদর্শিত হয়েছে:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>ফর্ম ভ্যালিডেশন</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() {
            // ফর্ম সাবমিট হলে
            $('myForm').addEvent('submit', function(event) {
                event.preventDefault();  // ফর্ম সাবমিট বন্ধ করা

                var email = $('emailInput').value;  // ইমেইল ইনপুট থেকে মান নেওয়া
                var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;  // ইমেইল প্যাটার্ন

                if (!emailPattern.test(email)) {
                    alert('অবৈধ ইমেইল ঠিকানা!');  // যদি ইমেইল প্যাটার্নের সাথে মিল না খায়
                } else {
                    alert('ফর্ম সফলভাবে সাবমিট হয়েছে!');  // ইমেইল সঠিক হলে
                }
            });
        });
    </script>
</head>
<body>

    <form id="myForm">
        <label for="emailInput">ইমেইল:</label>
        <input type="text" id="emailInput" name="email">
        <button type="submit">ফর্ম সাবমিট করুন</button>
    </form>

</body>
</html>

এখানে, MooTools-এর addEvent() মেথড ব্যবহার করে ইমেইল ইনপুটের মান যাচাই করা হয়েছে এবং একটি সঠিক ইমেইল ঠিকানা ফরম্যাট চেক করা হয়েছে।

২. ফর্ম ভ্যালিডেশন: মিনিমাম লেন্থ চেক

ধরা যাক, আপনি চান যে, একটি টেক্সট ইনপুট ক্ষেত্রের জন্য মিনিমাম লেন্থ (অন্তত ৬ ক্যারেক্টার) থাকতে হবে। নিচের উদাহরণে এমন ভ্যালিডেশন করা হয়েছে:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>মিনিমাম লেন্থ ভ্যালিডেশন</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() {
            // ফর্ম সাবমিট হলে
            $('myForm').addEvent('submit', function(event) {
                event.preventDefault();  // ফর্ম সাবমিট বন্ধ করা

                var name = $('nameInput').value;  // ইনপুট থেকে মান নেওয়া

                if (name.length < 6) {
                    alert('নাম অন্তত ৬টি অক্ষর হতে হবে!');
                } else {
                    alert('ফর্ম সফলভাবে সাবমিট হয়েছে!');
                }
            });
        });
    </script>
</head>
<body>

    <form id="myForm">
        <label for="nameInput">নাম:</label>
        <input type="text" id="nameInput" name="name">
        <button type="submit">ফর্ম সাবমিট করুন</button>
    </form>

</body>
</html>

এখানে length প্রপার্টি ব্যবহার করে ইনপুটের লেন্থ চেক করা হয়েছে, এবং যদি লেন্থ ৬ এর নিচে হয়, তাহলে একটি বার্তা দেখানো হয়।

Input Handling in MooTools

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

১. ইনপুট ফিল্ডের মান পরিবর্তন হওয়া চেক করা

MooTools-এর addEvent() মেথড ব্যবহার করে আপনি ইনপুট ফিল্ডের মান পরিবর্তন হওয়া সনাক্ত করতে পারেন এবং সেক্ষেত্রে কোনো নির্দিষ্ট কার্যকলাপ (যেমন একটি লেবেল আপডেট করা) করতে পারেন।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>ইনপুট হ্যান্ডলিং</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() {
            // ইনপুট ফিল্ডে টাইপ করা হলে
            $('inputField').addEvent('input', function() {
                var inputValue = $('inputField').value;  // ইনপুটের মান নেওয়া
                $('output').set('text', 'আপনি টাইপ করেছেন: ' + inputValue);  // আউটপুট দেখানো
            });
        });
    </script>
</head>
<body>

    <label for="inputField">আপনার নাম লিখুন:</label>
    <input type="text" id="inputField">
    <p id="output"></p>

</body>
</html>

এখানে, যখন ইউজার ইনপুট ফিল্ডে কিছু টাইপ করেন, তখন সেটি সনাক্ত করে একটি আউটপুট এলিমেন্টে দেখানো হচ্ছে।

২. ইনপুট ফিল্ডে কিপ্যাড ইনপুট চেক করা

MooTools-এ আপনি কিপ্যাড ইনপুটও সনাক্ত করতে পারেন, যেমন কী চাপলে তা নির্দিষ্ট কার্যকলাপে পাঠানো হবে।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>কিপ্যাড ইনপুট চেক</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() {
            // ইনপুট ফিল্ডে কী চাপা হলে
            $('inputField').addEvent('keydown', function(event) {
                if (event.key == 'Enter') {
                    alert('এন্টার কী চাপা হয়েছে!');
                }
            });
        });
    </script>
</head>
<body>

    <label for="inputField">কী চাপুন:</label>
    <input type="text" id="inputField">

</body>
</html>

এখানে, keydown ইভেন্ট ব্যবহার করে আপনি কোন কী চাপা হয়েছে তা সনাক্ত করতে পারেন।

সারাংশ

MooTools-এ Form Validation এবং Input Handling খুবই সহজ এবং কার্যকরী। আপনি কাস্টম ভ্যালিডেশন এবং ইনপুট হ্যান্ডলিং সিস্টেম তৈরি করতে পারেন, যাতে ফর্মের ইনপুটগুলো যাচাই করা এবং ইউজারের ইনপুট ইন্টারঅ্যাকশন ট্র্যাক করা সম্ভব হয়। এটি ওয়েব ফর্মের মান যাচাই এবং ইউজার অভিজ্ঞতা উন্নত করতে অত্যন্ত সহায়ক। MooTools-এর সহজ সিনট্যাক্স এবং শক্তিশালী ফিচার আপনাকে দ্রুত এবং কার্যকরী কোড লেখার সুযোগ দেয়।

Content added By

Rezwan Siddiki Tamim

Form Elements নির্বাচন এবং হ্যান্ডল করা

183

MooTools ব্যবহার করে আপনি ফর্ম উপাদানগুলিকে সহজে নির্বাচন এবং হ্যান্ডল করতে পারেন। এর মাধ্যমে আপনি ফর্মের বিভিন্ন উপাদান যেমন input, select, textarea ইত্যাদি নির্বাচন, মান (value) পড়া, সেট করা, এবং ফর্ম হ্যান্ডলিং কাজগুলি করতে পারবেন। MooTools-এর DOM ম্যানিপুলেশন এবং ইভেন্ট হ্যান্ডলিং মেথডগুলি ব্যবহার করে এসব কাজ খুব সহজে করা যায়।

Form Elements নির্বাচন

MooTools-এ ফর্ম উপাদান নির্বাচন করতে আপনি $('elementId') বা $$('formElement') সিনট্যাক্স ব্যবহার করতে পারেন। এটি ফর্মের কোন উপাদান বা গ্রুপের উপাদান সহজে নির্বাচন করতে সহায়তা করে।

উদাহরণ

<form id="myForm">
    <input type="text" id="name" placeholder="আপনার নাম">
    <input type="email" id="email" placeholder="আপনার ইমেইল">
    <textarea id="message" placeholder="আপনার বার্তা"></textarea>
    <button type="submit">জমা দিন</button>
</form>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var nameField = $('name');  // 'name' ইনপুট ফিল্ড নির্বাচন
        var emailField = $('email');  // 'email' ইনপুট ফিল্ড নির্বাচন
        var messageField = $('message');  // 'message' টেক্সটএরিয়া নির্বাচন
        
        // যদি ফর্ম সাবমিট হয়
        $('myForm').addEvent('submit', function(event) {
            event.preventDefault();  // ফর্ম সাবমিটের ডিফল্ট কাজ বন্ধ করা
            
            console.log('নাম:', nameField.get('value'));  // ইনপুট থেকে মান পড়া
            console.log('ইমেইল:', emailField.get('value'));  // ইনপুট থেকে মান পড়া
            console.log('বার্তা:', messageField.get('value'));  // টেক্সট এরিয়া থেকে মান পড়া
        });
    });
</script>

এখানে, $('name'), $('email'), এবং $('message') ফর্ম উপাদানগুলি নির্বাচন করতে ব্যবহৃত হয়েছে। get('value') ব্যবহার করে ফর্মের মান পাওয়া গেছে।

ফর্ম উপাদান থেকে মান পড়া এবং সেট করা

MooTools ব্যবহার করে আপনি ফর্ম উপাদানগুলির মান (value) সহজেই পড়তে এবং সেট করতে পারেন। get('value') এবং set('value', newValue) মেথড ব্যবহার করে মান পড়া এবং সেট করা যায়।

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

<input type="text" id="username" value="অক্সফোর্ড">
<button id="changeName">নাম পরিবর্তন করুন</button>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var usernameField = $('username');
        
        // ইনপুট ফিল্ডের মান পড়া
        console.log(usernameField.get('value'));  // 'অক্সফোর্ড'
        
        // নাম পরিবর্তন করার জন্য একটি বাটন
        $('changeName').addEvent('click', function() {
            // নতুন মান সেট করা
            usernameField.set('value', 'নতুন নাম');
            console.log(usernameField.get('value'));  // 'নতুন নাম'
        });
    });
</script>

এখানে set('value', 'new value') এবং get('value') মেথড ব্যবহার করে ইনপুট ফিল্ডের মান পড়া এবং সেট করা হয়েছে।

ফর্ম উপাদানে ইভেন্ট হ্যান্ডলিং

MooTools-এ আপনি ফর্মের উপাদানগুলিতে ইভেন্ট হ্যান্ডল করতে পারেন, যেমন focus, blur, input, change, submit ইত্যাদি। এর মাধ্যমে আপনি ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে বিভিন্ন কাজ করতে পারেন।

উদাহরণ: ইনপুট ফিল্ডে `focus` এবং `blur` ইভেন্ট

<input type="text" id="username" placeholder="আপনার নাম">
<p id="message"></p>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var usernameField = $('username');
        var message = $('message');
        
        // ফোকাস ইভেন্ট
        usernameField.addEvent('focus', function() {
            message.set('html', 'আপনি নাম ইনপুট ফিল্ডে ক্লিক করেছেন।');
        });
        
        // ব্লার ইভেন্ট
        usernameField.addEvent('blur', function() {
            message.set('html', 'ফিল্ডটি খালি রয়েছে।');
        });
    });
</script>

এখানে, focus এবং blur ইভেন্ট ব্যবহার করে ইনপুট ফিল্ডে ফোকাস এবং ব্লার ইভেন্ট হ্যান্ডল করা হয়েছে।

ফর্ম উপাদান পরীক্ষা করা

MooTools-এ checked প্রপার্টি ব্যবহার করে চেকবক্স, রেডিও বাটন ইত্যাদি নির্বাচিত বা চেক করা হয়েছে কিনা পরীক্ষা করা যায়। এছাড়াও disabled প্রপার্টি ব্যবহার করে ফর্ম উপাদানটি নিষ্ক্রিয় করা যায়।

উদাহরণ: চেকবক্স পরীক্ষা করা

<form id="myForm">
    <input type="checkbox" id="subscribe" checked> সাবস্ক্রাইব করুন
    <button type="submit">জমা দিন</button>
</form>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var subscribeCheckbox = $('subscribe');
        
        // চেকবক্সের চেক করা আছে কিনা পরীক্ষা
        $('myForm').addEvent('submit', function(event) {
            event.preventDefault();
            
            if (subscribeCheckbox.get('checked')) {
                console.log('আপনি সাবস্ক্রাইব করেছেন।');
            } else {
                console.log('আপনি সাবস্ক্রাইব করেননি।');
            }
        });
    });
</script>

এখানে, get('checked') মেথড ব্যবহার করে চেকবক্সের মান পরীক্ষা করা হয়েছে।

সারাংশ

MooTools ব্যবহার করে আপনি ফর্ম উপাদানগুলি যেমন input, select, textarea ইত্যাদি সহজভাবে নির্বাচন এবং হ্যান্ডল করতে পারেন। আপনি get('value') মেথড ব্যবহার করে মান পড়তে পারেন এবং set('value', newValue) মেথড ব্যবহার করে নতুন মান সেট করতে পারেন। এছাড়াও focus, blur, change ইভেন্টের মাধ্যমে আপনি ফর্ম উপাদানগুলিতে ইন্টারঅ্যাকটিভ কার্যকারিতা যোগ করতে পারেন। MooTools এর এই ফিচারগুলি ফর্ম হ্যান্ডলিং এবং ইউজার ইন্টারঅ্যাকশনে সহজ ও কার্যকরী উপায় সরবরাহ করে।

Content added By

Rezwan Siddiki Tamim

Form Input Validation এবং Custom Validators তৈরি করা

229

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 ক্লাসের মাধ্যমে আপনি সহজেই বিভিন্ন ধরনের ইনপুট ভ্যালিডেশন করতে পারেন, এবং নিজের প্রয়োজন অনুসারে কাস্টম ভ্যালিডেটর তৈরি করতে পারেন। এটি একটি শক্তিশালী টুল, যা ওয়েব ডেভেলপমেন্টে সঠিক ডেটা ইনপুট নিশ্চিত করতে সাহায্য করে।

Content added By

Rezwan Siddiki Tamim

MooTools এর মাধ্যমে Dynamic Form Submission

180

MooTools ব্যবহার করে Dynamic Form Submission অনেক সহজ এবং কার্যকরী হতে পারে। এই প্রক্রিয়ায়, আপনি ফর্ম ডেটা সার্ভারে পাঠাতে পারবেন পেজ রিলোড ছাড়াই, যা ইউজার এক্সপেরিয়েন্স (UX) উন্নত করে এবং ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং দ্রুত করে তোলে। MooTools এর AJAX ফিচার ব্যবহার করে আপনি ফর্মের ডেটা সাবমিট করতে পারবেন এবং সার্ভার থেকে রেসপন্স পেয়ে পেজের কনটেন্ট আপডেট করতে পারবেন।

MooTools এর মাধ্যমে Dynamic Form Submission

MooTools-এ ডাইনামিক ফর্ম সাবমিশন করতে Request ক্লাস ব্যবহার করা হয়, যা AJAX রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। এখানে আমরা একটি উদাহরণ দেখব, যেখানে ফর্ম ডেটা সার্ভারে POST রিকোয়েস্টের মাধ্যমে পাঠানো হবে এবং পেজ রিলোড ছাড়াই রেসপন্স গ্রহণ করা হবে।

1. ফর্ম ডেটা পাঠানো (POST Method)

এখানে, একটি ফর্ম সাবমিট করা হবে এবং MooTools এর মাধ্যমে ডেটা সার্ভারে পাঠানো হবে, তারপর সার্ভার থেকে পাওয়া রেসপন্স দিয়ে পেজের কনটেন্ট পরিবর্তন করা হবে।

উদাহরণ: Dynamic Form Submission (POST Method)

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>MooTools Dynamic Form Submission</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.preventDefault(); // ফর্মের ডিফল্ট সাবমিশন ব্লক করা

                // ফর্ম ডেটা সংগ্রহ
                var formData = form.toQueryString();

                // AJAX রিকোয়েস্ট তৈরি
                var request = new Request({
                    method: 'post',
                    url: 'submitForm.php', // সার্ভার ফাইল বা API URL
                    data: formData, // ফর্ম ডেটা
                    onSuccess: function(responseText) {
                        // সার্ভার থেকে রেসপন্স পাওয়ার পর পেজ আপডেট
                        document.id('response').set('html', responseText);
                    },
                    onFailure: function() {
                        alert('Form submission failed!');
                    }
                });
                request.send(); // রিকোয়েস্ট পাঠানো
            });
        });
    </script>
</head>
<body>

    <form id="myForm">
        <label for="name">নাম:</label>
        <input type="text" name="name" id="name" required>
        <br><br>
        <label for="email">ইমেইল:</label>
        <input type="email" name="email" id="email" required>
        <br><br>
        <button type="submit">সাবমিট করুন</button>
    </form>

    <div id="response"></div> <!-- সার্ভার থেকে পাওয়া রেসপন্স এখানে প্রদর্শিত হবে -->

</body>
</html>

এখানে কী ঘটছে:

ফর্ম ডেটা সংগ্রহ করা: ফর্মে যেকোনো ইনপুট ভ্যালু form.toQueryString() মেথডের মাধ্যমে সংগ্রহ করা হয়। এটি ফর্মের ডেটাকে একটি query string ফরম্যাটে রূপান্তরিত করে যা সার্ভারে পাঠানো যায়।
AJAX রিকোয়েস্ট: MooTools এর Request ক্লাস ব্যবহার করে POST রিকোয়েস্ট তৈরি করা হয়েছে। ফর্মের ডেটা data প্রপার্টি দিয়ে সার্ভারে পাঠানো হচ্ছে।
সার্ভার রেসপন্স: onSuccess ফাংশনটি সার্ভার থেকে সফলভাবে রেসপন্স পেলে কল হয়। সার্ভার থেকে পাওয়া রেসপন্স HTML বা টেক্সট হিসেবে response ডিভে প্রদর্শিত হবে।
ফর্ম সাবমিশন ব্লক করা: event.preventDefault() ব্যবহার করে ফর্মের ডিফল্ট সাবমিশন কার্যকলাপ (পেজ রিলোড) ব্লক করা হয়েছে, যাতে AJAX রিকোয়েস্টে ডেটা পাঠানো হয়।

2. ফর্ম ডেটা পাঠানো (GET Method)

MooTools দিয়ে আপনি GET মেথড ব্যবহার করেও ফর্ম ডেটা সার্ভারে পাঠাতে পারেন। এখানে GET মেথডে ফর্ম ডেটা পাঠানোর একটি উদাহরণ দেওয়া হল।

উদাহরণ: Dynamic Form Submission (GET Method)

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>MooTools Dynamic Form Submission (GET)</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.preventDefault(); // ফর্মের ডিফল্ট সাবমিশন ব্লক করা

                // ফর্ম ডেটা সংগ্রহ
                var formData = form.toQueryString();

                // AJAX রিকোয়েস্ট তৈরি
                var request = new Request({
                    method: 'get',
                    url: 'submitForm.php', // সার্ভার ফাইল বা API URL
                    data: formData, // ফর্ম ডেটা
                    onSuccess: function(responseText) {
                        // সার্ভার থেকে রেসপন্স পাওয়ার পর পেজ আপডেট
                        document.id('response').set('html', responseText);
                    },
                    onFailure: function() {
                        alert('Form submission failed!');
                    }
                });
                request.send(); // রিকোয়েস্ট পাঠানো
            });
        });
    </script>
</head>
<body>

    <form id="myForm">
        <label for="name">নাম:</label>
        <input type="text" name="name" id="name" required>
        <br><br>
        <label for="email">ইমেইল:</label>
        <input type="email" name="email" id="email" required>
        <br><br>
        <button type="submit">সাবমিট করুন</button>
    </form>

    <div id="response"></div> <!-- সার্ভার থেকে পাওয়া রেসপন্স এখানে প্রদর্শিত হবে -->

</body>
</html>

এখানে:

GET মেথড ব্যবহার করা হয়েছে যা URL এ query string আকারে ডেটা পাঠাবে।
toQueryString() মেথড ব্যবহার করে ফর্ম ডেটা পাঠানো হচ্ছে এবং onSuccess ফাংশনে সার্ভারের রেসপন্স পাওয়া যাচ্ছে।

সারাংশ

MooTools ব্যবহার করে ডাইনামিক ফর্ম সাবমিশন একটি সহজ এবং কার্যকরী পদ্ধতি, যা সার্ভার থেকে ডেটা পেতে এবং পেজ রিলোড ছাড়াই কনটেন্ট আপডেট করতে সাহায্য করে। Request ক্লাস ব্যবহার করে আপনি ফর্ম ডেটা পাঠাতে পারেন এবং রেসপন্স অনুযায়ী পেজের কনটেন্ট পরিবর্তন করতে পারেন। এটি ব্যবহারকারীর জন্য আরও দ্রুত এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে।

Content added By

Rezwan Siddiki Tamim

Form Events (onSubmit, onChange) হ্যান্ডল করা

184

MooTools-এ ফর্ম ইভেন্টস (Form Events) হ্যান্ডল করা খুবই সহজ এবং কার্যকরী। আপনি onSubmit এবং onChange ইভেন্টগুলো MooTools এর addEvent মেথড ব্যবহার করে সুনির্দিষ্ট ফর্ম উপাদানগুলিতে অ্যাটাচ করতে পারেন। এই ইভেন্টগুলির মাধ্যমে আপনি ফর্মের সাবমিশন বা কোনো ইনপুটের পরিবর্তন অনুসরণ করতে পারেন এবং বিভিন্ন কার্যকলাপ পরিচালনা করতে পারেন যেমন ফর্ম ভ্যালিডেশন, ডেটা সংগ্রহ ইত্যাদি।

এখানে আমরা onSubmit এবং onChange ইভেন্ট হ্যান্ডল করার উদাহরণ দেখাবো।

1. onSubmit ইভেন্ট হ্যান্ডল করা

onSubmit ইভেন্ট ফর্ম সাবমিশন হলে ট্রিগার হয়। আপনি ফর্ম সাবমিশনের আগে কিছু কার্যকলাপ করতে চাইলে এটি ব্যবহার করতে পারেন, যেমন ফর্ম ভ্যালিডেশন।

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

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>MooTools onSubmit Example</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');
            
            // onSubmit ইভেন্ট হ্যান্ডল করা
            form.addEvent('submit', function(event) {
                event.preventDefault(); // ফর্ম সাবমিশন রোধ করা

                // ফর্মের ডেটা প্রদর্শন
                var name = document.id('name').get('value');
                var email = document.id('email').get('value');
                console.log('Name:', name);
                console.log('Email:', email);

                // ফর্ম জমা দেওয়া হলে কিছু কার্যকলাপ
                alert('ফর্ম সাবমিট করা হয়েছে!');
            });
        });
    </script>
</head>
<body>

    <form id="myForm">
        <label for="name">নাম:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">ইমেইল:</label>
        <input type="email" id="email" name="email" required><br><br>

        <button type="submit">সাবমিট</button>
    </form>

</body>
</html>

এখানে:

event.preventDefault() ব্যবহার করা হয়েছে যাতে ফর্মটি সাবমিট না হয় এবং আমরা ফর্মের ডেটা প্রক্রিয়া করতে পারি।
ফর্মের ইনপুট ভ্যালু গুলি get('value') মেথডের মাধ্যমে সংগ্রহ করা হয়েছে।
ফর্ম সাবমিশনের পর কিছু কার্যকলাপ (যেমন, একটি অ্যালার্ট) প্রদর্শন করা হয়েছে।

2. onChange ইভেন্ট হ্যান্ডল করা

onChange ইভেন্ট ফর্ম ইনপুটের মান পরিবর্তন হলে ট্রিগার হয়। এটি ফর্মের ইনপুট (যেমন টেক্সট বক্স, চেকবক্স, ড্রপডাউন ইত্যাদি) পরিবর্তিত হলে কিছু কাজ করার জন্য ব্যবহৃত হয়।

উদাহরণ: ইনপুট পরিবর্তন হলে কিছু কার্যকলাপ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>MooTools onChange Example</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 inputField = document.id('name');
            
            // onChange ইভেন্ট হ্যান্ডল করা
            inputField.addEvent('change', function() {
                var name = inputField.get('value');
                console.log('ইনপুট পরিবর্তন হয়েছে:', name);

                // ইনপুট পরিবর্তন হলে কিছু কার্যকলাপ
                alert('নাম ইনপুট পরিবর্তন হয়েছে!');
            });
        });
    </script>
</head>
<body>

    <form>
        <label for="name">নাম:</label>
        <input type="text" id="name" name="name"><br><br>

        <button type="submit">সাবমিট</button>
    </form>

</body>
</html>

এখানে:

addEvent('change', function()) দ্বারা onChange ইভেন্ট হ্যান্ডল করা হয়েছে, যা ইনপুট ফিল্ডের মান পরিবর্তন হলে ট্রিগার হবে।
get('value') দিয়ে ইনপুট ফিল্ডের মান সংগ্রহ করা হয়েছে এবং alert() ফাংশনের মাধ্যমে ব্যবহারকারীকে ইনপুট পরিবর্তনের জন্য সতর্ক করা হয়েছে।

3. onSubmit এবং onChange একসাথে ব্যবহার করা

একই ফর্মে onSubmit এবং onChange ইভেন্ট একসাথে ব্যবহার করতে পারেন, যাতে ফর্ম সাবমিশনের সময় কিছু ভ্যালিডেশন করা যায় এবং ইনপুট ফিল্ডের পরিবর্তনও ট্র্যাক করা যায়।

উদাহরণ: ফর্ম ভ্যালিডেশন ও ইনপুট পরিবর্তন ট্র্যাক করা

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>MooTools Form Events Example</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');
            
            // onSubmit ইভেন্ট হ্যান্ডল করা
            form.addEvent('submit', function(event) {
                event.preventDefault();  // ফর্ম সাবমিট বন্ধ করা

                var name = document.id('name').get('value');
                var email = document.id('email').get('value');
                
                // ফর্ম ভ্যালিডেশন
                if (name === '' || email === '') {
                    alert('অনুগ্রহ করে সব ফিল্ড পূর্ণ করুন!');
                } else {
                    alert('ফর্ম সফলভাবে সাবমিট হয়েছে!');
                }
            });

            // onChange ইভেন্ট হ্যান্ডল করা
            var inputField = document.id('name');
            inputField.addEvent('change', function() {
                var name = inputField.get('value');
                console.log('নাম ইনপুট পরিবর্তন হয়েছে:', name);
            });
        });
    </script>
</head>
<body>

    <form id="myForm">
        <label for="name">নাম:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">ইমেইল:</label>
        <input type="email" id="email" name="email" required><br><br>

        <button type="submit">সাবমিট</button>
    </form>

</body>
</html>

এখানে:

onSubmit ইভেন্টের মাধ্যমে ফর্ম ভ্যালিডেশন করা হচ্ছে। যদি কোনো ইনপুট ফিল্ড খালি থাকে, তবে সাবমিশন রোধ করা হচ্ছে।
onChange ইভেন্টের মাধ্যমে ইনপুট ফিল্ডের মান পরিবর্তন হলে তা লগ করা হচ্ছে।

সারাংশ

MooTools-এ ফর্ম ইভেন্টস হ্যান্ডল করা খুবই সহজ। onSubmit এবং onChange ইভেন্টগুলি ব্যবহার করে আপনি ফর্ম সাবমিশন এবং ইনপুট পরিবর্তন ট্র্যাক করতে পারেন। MooTools এর addEvent মেথডের মাধ্যমে এই ইভেন্টগুলি অ্যাটাচ করা যায় এবং এর মাধ্যমে ফর্ম ভ্যালিডেশন, ইনপুট ট্র্যাকিং এবং অন্যান্য কার্যকলাপ সহজে করা সম্ভব।

Content added By

Rezwan Siddiki Tamim

MooTools পরিচিতি MooTools সেটআপ এবং ইনস্টলেশন MooTools এর বেসিক সিনট্যাক্স এবং ব্যবহার MooTools এর Object Oriented Programming (OOP) DOM Manipulation এবং ইভেন্ট হ্যান্ডলিং

Form Validation এবং Input হ্যান্ডলিং

Form Validation in MooTools

১. ফর্ম ভ্যালিডেশন: ইমেইল চেক করা

২. ফর্ম ভ্যালিডেশন: মিনিমাম লেন্থ চেক

Input Handling in MooTools

১. ইনপুট ফিল্ডের মান পরিবর্তন হওয়া চেক করা

২. ইনপুট ফিল্ডে কিপ্যাড ইনপুট চেক করা

সারাংশ

Form Elements নির্বাচন এবং হ্যান্ডল করা

Form Elements নির্বাচন

উদাহরণ

ফর্ম উপাদান থেকে মান পড়া এবং সেট করা

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

ফর্ম উপাদানে ইভেন্ট হ্যান্ডলিং

উদাহরণ: ইনপুট ফিল্ডে focus এবং blur ইভেন্ট

ফর্ম উপাদান পরীক্ষা করা

উদাহরণ: চেকবক্স পরীক্ষা করা

সারাংশ

Form Input Validation এবং Custom Validators তৈরি করা

MooTools দিয়ে ফর্ম ইনপুট ভ্যালিডেশন

১. MooTools Validator ক্লাসের মাধ্যমে বেসিক ভ্যালিডেশন

কাস্টম ভ্যালিডেটর তৈরি করা

২. কাস্টম ভ্যালিডেটর উদাহরণ

আরও কিছু কাস্টম ভ্যালিডেটরের উদাহরণ

৩. ফোন নম্বর ভ্যালিডেটর

৪. পাসওয়ার্ড শক্তি ভ্যালিডেটর

সারাংশ

MooTools এর মাধ্যমে Dynamic Form Submission

MooTools এর মাধ্যমে Dynamic Form Submission

1. ফর্ম ডেটা পাঠানো (POST Method)

উদাহরণ: Dynamic Form Submission (POST Method)

এখানে কী ঘটছে:

2. ফর্ম ডেটা পাঠানো (GET Method)

উদাহরণ: Dynamic Form Submission (GET Method)

সারাংশ

Form Events (onSubmit, onChange) হ্যান্ডল করা

1. onSubmit ইভেন্ট হ্যান্ডল করা

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

2. onChange ইভেন্ট হ্যান্ডল করা

উদাহরণ: ইনপুট পরিবর্তন হলে কিছু কার্যকলাপ

3. onSubmit এবং onChange একসাথে ব্যবহার করা

উদাহরণ: ফর্ম ভ্যালিডেশন ও ইনপুট পরিবর্তন ট্র্যাক করা

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

উদাহরণ: ইনপুট ফিল্ডে `focus` এবং `blur` ইভেন্ট