Form Handling এবং Validation

Polymer ফ্রেমওয়ার্কে Form Handling এবং Validation একটি গুরুত্বপূর্ণ বিষয়, যা ডেভেলপারদের জন্য ইউজার ইনপুট সংগ্রহ এবং তা যাচাই (validate) করার প্রক্রিয়াকে সহজ করে তোলে। Polymer-এর কাস্টম উপাদানগুলি ব্যবহার করে আপনি ফর্ম তৈরি, ইনপুট সংগ্রহ, এবং ডেটা যাচাই করতে পারেন। এখানে ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন করতে Polymer ব্যবহার করার কয়েকটি পদ্ধতি এবং উদাহরণ দেওয়া হলো।

১. Polymer ফ্রেমওয়ার্কে Form Handling

Polymer-এ ফর্ম হ্যান্ডলিং করার জন্য আপনি সাধারণ HTML ফর্মের মতো ফর্ম তৈরি করতে পারেন, তবে Polymer ফ্রেমওয়ার্কের মধ্যে আপনি কাস্টম উপাদান এবং ডাটা-বাইন্ডিং ব্যবহার করতে পারবেন। এতে করে ফর্মের ইনপুট ফিল্ডগুলোর মান সহজে সংগ্রহ এবং প্রসেস করা যায়।

ধাপ ১: সাধারণ Form Handling উদাহরণ

<dom-module id="form-handling-example">
  <template>
    <form on-submit="handleSubmit">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>

      <button type="submit">Submit</button>
    </form>

    <div>
      <h3>Submitted Data:</h3>
      <pre>{{submittedData}}</pre>
    </div>
  </template>

  <script>
    Polymer({
      is: 'form-handling-example',

      properties: {
        submittedData: {
          type: Object,
          value: {}
        }
      },

      handleSubmit: function(event) {
        event.preventDefault(); // Default form submission prevented

        const formData = new FormData(event.target);
        this.submittedData = {
          username: formData.get('username'),
          email: formData.get('email')
        };
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

1. <form>: একটি সাধারণ HTML ফর্ম তৈরি করা হয়েছে, যাতে দুটি ইনপুট ফিল্ড (username এবং email) এবং একটি সাবমিট বাটন রয়েছে।
2. handleSubmit: এই ফাংশনটি ফর্ম সাবমিট হলে কল হয়। event.preventDefault() ব্যবহার করে ডিফল্ট ফর্ম সাবমিশন রোধ করা হয়। এরপর FormData ব্যবহার করে ফর্মের ইনপুট মান সংগ্রহ করা হয় এবং submittedData প্রপার্টিতে সেট করা হয়।
3. ডাটা-বাইন্ডিং: {{submittedData}} দিয়ে ফর্মের ডেটা UI-তে প্রদর্শিত হচ্ছে।

২. Polymer ফ্রেমওয়ার্কে Form Validation

Polymer-এ ফর্ম ভ্যালিডেশন করতে আপনি ইনপুট ফিল্ডগুলির required অ্যাট্রিবিউট ব্যবহার করতে পারেন, কিন্তু যদি কাস্টম ভ্যালিডেশন করতে চান, তবে আপনি নিজস্ব JavaScript ফাংশন ব্যবহার করে ইনপুট যাচাই করতে পারেন।

ধাপ ২: ইনপুট ভ্যালিডেশন উদাহরণ

<dom-module id="form-validation-example">
  <template>
    <form on-submit="handleSubmit">
      <label for="username">Username (Min. 3 characters):</label>
      <input type="text" id="username" name="username" required minlength="3" />

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />

      <button type="submit">Submit</button>

      <div id="error-message" style="color: red; display: none;">
        Please fill out all fields correctly!
      </div>
    </form>
  </template>

  <script>
    Polymer({
      is: 'form-validation-example',

      handleSubmit: function(event) {
        event.preventDefault(); // Default form submission prevented

        const form = event.target;

        // Check if form is valid
        if (form.checkValidity()) {
          // If valid, submit the data
          const formData = new FormData(form);
          const submittedData = {
            username: formData.get('username'),
            email: formData.get('email')
          };
          console.log('Form Submitted:', submittedData);
        } else {
          // If invalid, show error message
          this.$.error-message.style.display = 'block';
        }
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

1. required এবং minlength="3": HTML ইনপুট ফিল্ডে বেসিক ভ্যালিডেশন যেমন ফিল্ড পূর্ণ থাকা উচিত এবং ইউজারনেমের জন্য ন্যূনতম তিনটি অক্ষর থাকা উচিত, এই নিয়মগুলো সরাসরি HTML দিয়ে দেয়া হয়েছে।
2. checkValidity(): ফর্মের checkValidity() মেথডটি ফর্মের সব ইনপুট ভ্যালিডেশন চেক করে। যদি সব ইনপুট ভ্যালিড থাকে, তাহলে ফর্মের ডেটা সাবমিট হয়।
3. Error Message: যদি ফর্মটি ভ্যালিড না হয়, তাহলে একটি ত্রুটির বার্তা প্রদর্শন করা হয় (যেটি initially display: none অবস্থায় ছিল)।

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

যদি আপনি কাস্টম ভ্যালিডেশন চান, তাহলে আপনি JavaScript ব্যবহার করে নিজস্ব ভ্যালিডেশন যুক্ত করতে পারেন। এখানে username এর জন্য কাস্টম ভ্যালিডেশন উদাহরণ দেওয়া হলো।

<dom-module id="custom-validation-example">
  <template>
    <form on-submit="handleSubmit">
      <label for="username">Username (No special characters):</label>
      <input type="text" id="username" name="username" required />
      <span id="username-error" style="color: red; display: none;">Username should not contain special characters!</span>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />

      <button type="submit">Submit</button>
    </form>
  </template>

  <script>
    Polymer({
      is: 'custom-validation-example',

      handleSubmit: function(event) {
        event.preventDefault(); // Default form submission prevented

        const username = this.$.username.value;
        const usernameError = this.$.username-error;
        
        // Custom validation: Check for special characters in username
        if (/[^a-zA-Z0-9]/.test(username)) {
          usernameError.style.display = 'block'; // Show error message
        } else {
          usernameError.style.display = 'none'; // Hide error message
          const formData = new FormData(event.target);
          const submittedData = {
            username: formData.get('username'),
            email: formData.get('email')
          };
          console.log('Form Submitted:', submittedData);
        }
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

1. Custom Validation: এখানে কাস্টম ভ্যালিডেশন যুক্ত করা হয়েছে, যেখানে username ফিল্ডে শুধুমাত্র অক্ষর ও সংখ্যা থাকতে হবে। যদি স্পেশাল ক্যারেক্টার থাকে, তাহলে একটি ত্রুটির বার্তা প্রদর্শিত হবে।
2. Regular Expression: /[^a-zA-Z0-9]/.test(username) দিয়ে চেক করা হচ্ছে, username এর মধ্যে কোনো স্পেশাল ক্যারেক্টার আছে কিনা।

৪. Polymer-এ ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন করার জন্য অতিরিক্ত টিপস:

• ডাটা-বাইন্ডিং: Polymer-এ two-way data binding ব্যবহার করে আপনি ইনপুট ফিল্ডের মান সহজেই ম্যানিপুলেট করতে পারেন এবং সেগুলো ফর্ম সাবমিশন বা ভ্যালিডেশন প্রসেসে ব্যবহার করতে পারেন।
• ভ্যালিডেশন স্টেট: আপনি ইনপুট ফিল্ডের valid এবং invalid স্টেট ব্যবহার করে UI-তে ত্রুটি বার্তা প্রদর্শন করতে পারেন।
• ফর্ম গ্রুপিং: Polymer-এ ফর্ম উপাদানগুলোকে একত্রে গোষ্ঠীভুক্ত করে একটি বড় ফর্ম তৈরি করা যায়, যা সহজে পরিচালনা করা যায়।

Polymer ফ্রেমওয়ার্কে ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন করা খুবই সহজ এবং সরল। আপনি সহজেই ফর্ম তৈরি করে, ইনপুট সংগ্রহ করে এবং সেটি যাচাই (validate) করতে পারেন। Polymer-এ কাস্টম ভ্যালিডেশন, ডাটা-বাইন্ডিং, এবং ইভেন্ট হ্যান্ডলিং ব্যবহার করে আপনি অত্যন্ত শক্তিশালী এবং ইউজার-বান্ধব ফর্ম তৈরি করতে পারেন।

Polymer ফ্রেমওয়ার্কে Form তৈরি করা অত্যন্ত সহজ এবং কার্যকর। Polymer আপনাকে কাস্টম HTML উপাদান তৈরি করতে এবং তাদের সাথে ফর্মের বিভিন্ন উপাদান যুক্ত করতে সক্ষম করে। Polymer এর মাধ্যমে ফর্ম তৈরি করার জন্য, সাধারণত HTML ফর্ম উপাদান (যেমন <input>, <select>, <textarea>, ইত্যাদি) ব্যবহার করা হয়, এবং আপনি এই উপাদানগুলিকে কাস্টম ফর্ম উপাদান হিসেবে তৈরি করতে পারেন।

এখানে Polymer ব্যবহার করে একটি সাধারণ ফর্ম তৈরি করার উদাহরণ দেওয়া হলো, যা ব্যবহারকারীর ইনপুট গ্রহণ করে এবং সেই ডেটা প্রক্রিয়া করে।

Polymer Framework এ Form তৈরি করা:

১. ফর্মের জন্য কাস্টম কম্পোনেন্ট তৈরি করা:

<dom-module id="custom-form">
  <template>
    <style>
      :host {
        display: block;
        padding: 20px;
        max-width: 400px;
        margin: auto;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      input, textarea, select {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        border-radius: 5px;
        border: 1px solid #ccc;
      }

      button {
        padding: 10px 20px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      button:hover {
        background-color: #2980b9;
      }
    </style>

    <h2>Contact Form</h2>
    <form on-submit="submitForm">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>

      <label for="message">Message:</label>
      <textarea id="message" name="message" rows="4" required></textarea>

      <button type="submit">Submit</button>
    </form>

    <div id="form-message" hidden>
      <p>Your message has been sent successfully!</p>
    </div>
  </template>

  <script>
    class CustomForm extends Polymer.Element {
      static get is() {
        return 'custom-form';
      }

      submitForm(event) {
        event.preventDefault(); // Prevent form from submitting normally

        const formData = new FormData(event.target);
        const formObject = {};

        formData.forEach((value, key) => {
          formObject[key] = value;
        });

        console.log('Form Data:', formObject);

        // Display success message
        this.shadowRoot.querySelector('#form-message').hidden = false;

        // You can add AJAX calls here to submit the form data to a server if needed
      }
    }

    customElements.define(CustomForm.is, CustomForm);
  </script>
</dom-module>

ব্যাখ্যা:

1. Form Structure:
   • এখানে একটি সাধারন ফর্ম তৈরি করা হয়েছে যার মধ্যে তিনটি ফিল্ড রয়েছে: Name, Email, এবং Message।
   • প্রতিটি ইনপুট ফিল্ডের জন্য required অ্যাট্রিবিউট দেওয়া হয়েছে, যাতে ফর্মটি জমা দেওয়ার আগে এই ফিল্ডগুলো পূর্ণ করতে হবে।
2. CSS Styling:
   • কিছু বেসিক CSS স্টাইলিং যোগ করা হয়েছে, যা ইনপুট ফিল্ডগুলো এবং বাটনকে সুন্দরভাবে সাজায়।
3. Form Submission:
   • submitForm মেথডটি ফর্ম জমা দেওয়ার জন্য ব্যবহৃত হয়। এটি ফর্মটি সাধারণভাবে জমা দেওয়া থেকে বিরত রাখে (event.preventDefault()) এবং ফর্মের সব ইনপুট ডেটা সংগ্রহ করে।
   • FormData অবজেক্ট ব্যবহার করে ফর্মের সমস্ত ডেটা একটি অবজেক্টে পরিণত করা হয়। এরপর, কনসোলে সেই ডেটা লগ করা হয় (এটি আপনার সার্ভারে পাঠানোর জন্য ব্যবহার করা যেতে পারে)।
   • ফর্ম জমা দেওয়ার পর, একটি সফল বার্তা দেখানোর জন্য #form-message এলিমেন্টটি প্রদর্শিত হয়।
4. Custom Element:
   • CustomForm নামে একটি কাস্টম Polymer উপাদান তৈরি করা হয়েছে, যা <custom-form> ট্যাগ ব্যবহার করে HTML ডকুমেন্টে ব্যবহার করা যাবে।

ফর্মের HTML ব্যবহার:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Polymer Form Example</title>
  <script src="https://unpkg.com/@polymer/polymer@3.0.0/polymer-element.js"></script>
</head>
<body>

  <!-- Using the Custom Form Component -->
  <custom-form></custom-form>

</body>
</html>

এই HTML ডকুমেন্টে <custom-form></custom-form> ব্যবহার করে, আপনি Polymer কম্পোনেন্টটিকে ওয়েব পেজে সন্নিবেশিত করতে পারেন।

AJAX দিয়ে ফর্ম ডেটা সাবমিট করা:

আপনি যদি Polymer ফ্রেমওয়ার্কের মাধ্যমে ফর্মের ডেটা সার্ভারে পাঠাতে চান, তবে AJAX কল ব্যবহার করতে পারেন। এই উদাহরণে আমরা fetch() API ব্যবহার করে ফর্ম ডেটা পাঠানোর প্রক্রিয়া দেখাচ্ছি।

submitForm(event) {
  event.preventDefault(); // Prevent form from submitting normally

  const formData = new FormData(event.target);
  const formObject = {};

  formData.forEach((value, key) => {
    formObject[key] = value;
  });

  console.log('Form Data:', formObject);

  // Example AJAX request to submit the form data
  fetch('https://your-server.com/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formObject)
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
    this.shadowRoot.querySelector('#form-message').hidden = false;
  })
  .catch((error) => {
    console.error('Error:', error);
  });
}

ব্যাখ্যা:

• ফর্ম ডেটা fetch() API দিয়ে সার্ভারে পাঠানো হচ্ছে, যেখানে POST পদ্ধতি ব্যবহার করা হচ্ছে এবং ডেটা JSON.stringify() এর মাধ্যমে সার্ভারে পাঠানো হচ্ছে।
• সফলভাবে ডেটা সাবমিট হলে, ব্যবহারকারীকে একটি সফল বার্তা দেখানো হবে।

Polymer ফ্রেমওয়ার্ক ব্যবহার করে আপনি খুব সহজেই কাস্টম ফর্ম উপাদান তৈরি করতে পারেন। Polymer এর FormData API এবং fetch() ব্যবহার করে আপনি ফর্ম ডেটা গ্রহণ এবং AJAX কলের মাধ্যমে সার্ভারে পাঠাতে পারেন। এটি আপনাকে একটি সম্পূর্ণ কাস্টম, ডাইনামিক, এবং ইন্টারঅ্যাকটিভ ফর্ম তৈরি করতে সাহায্য করবে যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।

Polymer ফ্রেমওয়ার্কে Form Data Binding এবং Validation Rules ব্যবহারের মাধ্যমে আপনি সহজেই ফর্মের ডেটা পরিচালনা করতে পারেন এবং ব্যবহারকারী ইনপুট যাচাই করতে পারেন। Polymer-এর ডাটা-বাইন্ডিং ক্ষমতা এবং প্রপার্টি বৈধতা যাচাই (validation) পদ্ধতি ফর্ম তৈরি এবং পরিচালনাকে সহজ এবং কার্যকর করে তোলে।

Form Data Binding in Polymer

Polymer ফ্রেমওয়ার্কে, ডাটা-বাইন্ডিং ব্যবহার করে আপনি HTML ফর্মের ইনপুট এলিমেন্টগুলির মান (value) প্রপার্টির সাথে ডেটা বাইন্ড করতে পারেন। এতে আপনি ইনপুট ফিল্ডের মান পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে প্রপার্টি আপডেট করতে পারবেন, এবং প্রপার্টির মান পরিবর্তিত হলে ইনপুট ফিল্ডের মানও আপডেট হবে।

Form Data Binding উদাহরণ:

<dom-module id="data-binding-form">
  <template>
    <h2>User Registration Form</h2>
    <form on-submit="handleSubmit">
      <label for="username">Username:</label>
      <input type="text" id="username" value="{{username::input}}" required>

      <label for="email">Email:</label>
      <input type="email" id="email" value="{{email::input}}" required>

      <label for="password">Password:</label>
      <input type="password" id="password" value="{{password::input}}" required>

      <button type="submit">Submit</button>
    </form>

    <div>
      <h3>Form Data:</h3>
      <p>Username: [[username]]</p>
      <p>Email: [[email]]</p>
      <p>Password: [[password]]</p>
    </div>
  </template>

  <script>
    Polymer({
      is: 'data-binding-form',
      properties: {
        username: {
          type: String,
          value: ''
        },
        email: {
          type: String,
          value: ''
        },
        password: {
          type: String,
          value: ''
        }
      },
      handleSubmit: function(e) {
        e.preventDefault();
        alert('Form submitted! Username: ' + this.username + ', Email: ' + this.email);
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

• {{username::input}}: এই ডাটা-বাইন্ডিং স্যিনট্যাক্স ব্যবহার করে, আপনি ইনপুট ফিল্ডের মান username প্রপার্টির সাথে বাইন্ড করেছেন। ::input স্টাইল ব্যবহার করলে, ইনপুটের মান পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে username প্রপার্টি আপডেট হবে এবং vice versa।
• handleSubmit: ফর্ম সাবমিটের সময় handleSubmit মেথড কল হবে, যেখানে আপনি ফর্মের তথ্য প্রদর্শন বা প্রসেস করতে পারবেন।

এখানে, ইনপুট ফিল্ডগুলির মান username, email, এবং password প্রপার্টির সাথে বাইন্ড করা হয়েছে, এবং ফর্ম সাবমিট হলে তা আলার্টে দেখানো হবে।

Form Validation in Polymer

Polymer ফ্রেমওয়ার্কে form validation করার জন্য, আপনি HTML ফর্মের ডিফল্ট বৈশিষ্ট্যগুলি যেমন required, pattern, minlength ইত্যাদি ব্যবহার করতে পারেন, অথবা কাস্টম ভ্যালিডেশন রুলস তৈরি করতে পারেন। Polymer-এর Polymer API তে আপনি কাস্টম ভ্যালিডেশন ফাংশনও ডিফাইন করতে পারেন।

HTML5 Validation Attributes:

HTML5 এর ইনপুট ফিল্ডগুলিতে আপনি required, minlength, maxlength, pattern, ইত্যাদি অ্যাট্রিবিউট ব্যবহার করে সহজে ভ্যালিডেশন করতে পারেন। এটি ব্রাউজার-ভিত্তিক ভ্যালিডেশন সুবিধা দেয়।

Polymer Form Validation উদাহরণ:

<dom-module id="validation-form">
  <template>
    <h2>Registration Form with Validation</h2>
    <form on-submit="handleSubmit">
      <label for="username">Username (required, min 3 characters):</label>
      <input type="text" id="username" value="{{username::input}}" minlength="3" required>

      <label for="email">Email (valid email):</label>
      <input type="email" id="email" value="{{email::input}}" required>

      <label for="password">Password (required, min 6 characters):</label>
      <input type="password" id="password" value="{{password::input}}" minlength="6" required>

      <button type="submit">Submit</button>
    </form>

    <div>
      <h3>Form Data:</h3>
      <p>Username: [[username]]</p>
      <p>Email: [[email]]</p>
      <p>Password: [[password]]</p>
    </div>
  </template>

  <script>
    Polymer({
      is: 'validation-form',
      properties: {
        username: {
          type: String,
          value: ''
        },
        email: {
          type: String,
          value: ''
        },
        password: {
          type: String,
          value: ''
        }
      },
      handleSubmit: function(e) {
        e.preventDefault();
        // Check if form is valid
        if (this.shadowRoot.querySelector('form').checkValidity()) {
          alert('Form submitted successfully!');
        } else {
          alert('Please fill out the form correctly.');
        }
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

• HTML5 Validation Attributes: required, minlength, এবং type="email" এর মতো HTML5 অ্যাট্রিবিউট ব্যবহার করা হয়েছে। এটি ব্রাউজার দ্বারা ডিফল্ট ভ্যালিডেশন প্রদান করবে।
• checkValidity(): handleSubmit মেথডে checkValidity() ফাংশন ব্যবহার করে যাচাই করা হচ্ছে যে ফর্মটি সঠিকভাবে পূর্ণ হয়েছে কিনা। যদি না হয়, ব্যবহারকারীকে একটি ত্রুটি বার্তা দেখানো হবে।

Custom Validation in Polymer

Polymer দিয়ে আপনি কাস্টম ভ্যালিডেশন ফাংশনও তৈরি করতে পারেন। এখানে একটি উদাহরণ যেখানে একটি কাস্টম ভ্যালিডেশন ফাংশন ব্যবহার করা হয়েছে, যা ফর্ম ইনপুটের মান যাচাই করে।

Custom Validation উদাহরণ:

<dom-module id="custom-validation-form">
  <template>
    <h2>Custom Validation Form</h2>
    <form on-submit="handleSubmit">
      <label for="username">Username (required):</label>
      <input type="text" id="username" value="{{username::input}}" required>

      <label for="email">Email (valid email):</label>
      <input type="email" id="email" value="{{email::input}}" required>

      <label for="password">Password (required, min 8 characters):</label>
      <input type="password" id="password" value="{{password::input}}" minlength="8" required>

      <span id="error-message" style="color: red; display: none;">Password must be at least 8 characters long.</span>

      <button type="submit">Submit</button>
    </form>

    <div>
      <h3>Form Data:</h3>
      <p>Username: [[username]]</p>
      <p>Email: [[email]]</p>
      <p>Password: [[password]]</p>
    </div>
  </template>

  <script>
    Polymer({
      is: 'custom-validation-form',
      properties: {
        username: {
          type: String,
          value: ''
        },
        email: {
          type: String,
          value: ''
        },
        password: {
          type: String,
          value: ''
        }
      },
      handleSubmit: function(e) {
        e.preventDefault();
        const passwordInput = this.shadowRoot.querySelector('#password');
        const errorMessage = this.shadowRoot.querySelector('#error-message');

        if (passwordInput.value.length < 8) {
          errorMessage.style.display = 'block'; // Show error message
        } else {
          errorMessage.style.display = 'none'; // Hide error message
          alert('Form submitted successfully!');
        }
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

• Custom Validation: এখানে কাস্টম ভ্যালিডেশন ব্যবহার করা হয়েছে। যদি পাসওয়ার্ড 8টি অক্ষরের কম হয়, তাহলে একটি ত্রুটি বার্তা প্রদর্শিত হবে।
• Error Message: ত্রুটির বার্তা সিএসএস দিয়ে গোপন এবং প্রদর্শিত হচ্ছে, নির্দিষ্ট শর্ত পূর্ণ হলে।

Polymer ফ্রেমওয়ার্কে Form Data Binding এবং Validation Rules ব্যবহারের মাধ্যমে আপনি আপনার ওয়েব অ্যাপ্লিকেশনে শক্তিশালী ফর্ম তৈরি করতে পারেন। Polymer-এর ডাটা-বাইন্ডিং এবং HTML5 ভ্যালিডেশন অ্যাট্রিবিউট ব্যবহার করে আপনি ফর্মের ইনপুটগুলি সহজে পরিচালনা করতে পারবেন। কাস্টম ভ্যালিডেশন যুক্ত করে, আপনি ব্যবহারকারী ইনপুট যাচাই এবং ত্রুটির বার্তা প্রদর্শন করতে পারেন। Polymer ফ্রেমওয়ার্কের এই বৈশিষ্ট্যগুলি আপনার ওয়েব অ্যাপ্লিকেশনকে আরও শক্তিশালী, ব্যবহারকারী-বান্ধব এবং ইন্টারেক্টিভ করে তোলে।

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>

ব্যাখ্যা:

1. HTML Structure:
   • এখানে একটি input ফিল্ড এবং একটি error message ডিভ রাখা হয়েছে, যা ইউজার যদি ভুল ইমেইল ঠিকানা প্রদান করেন তবে ত্রুটি বার্তা দেখাবে।
   • on-input="validateEmail" ব্যবহার করে ইমেইল ইনপুটের পরিবর্তন অনুযায়ী কাস্টম ভ্যালিডেটর ফাংশন validateEmail কল করা হচ্ছে।
2. Properties:
   • email: এটি ইনপুট ফিল্ডের ভ্যালু ধারণ করবে।
   • errorMessage: এটি ত্রুটি বার্তা ধারণ করবে, যদি ইউজার ভুল ইমেইল ঠিকানা প্রদান করেন।
3. validateEmail Function:
   • এই ফাংশনটি ইউজারের ইমেইল ইনপুট যাচাই করে একটি কাস্টম প্যাটার্ন (regular expression) ব্যবহার করে। যদি ইমেইল ভ্যালিড না হয়, তবে errorMessage প্রপার্টিতে একটি ত্রুটি বার্তা সেট করা হয়।
4. Error Message:
   • hidden$="[[!errorMessage]]": এই ডিরেকটিভটি Polymer 3.x-এ ব্যবহার করা হয়, যা এই ত্রুটি বার্তাটি শুধুমাত্র তখন দেখাবে যদি errorMessage প্রপার্টি সেট করা থাকে।

ধাপ ২: 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 এর শক্তিকে কাজে লাগিয়ে ওয়েব অ্যাপ্লিকেশনগুলির ডেটা ভ্যালিডেশনকে আরও শক্তিশালী এবং ব্যবহারকারী বান্ধব করে তোলে।

Polymer ফ্রেমওয়ার্কে Form Submission এবং Server-side Integration করতে হলে, আপনাকে HTML Forms, JavaScript (AJAX), এবং server-side (API) সমন্বয়ের মাধ্যমে ডেটা সঠিকভাবে পাঠানোর ব্যবস্থা করতে হবে। Polymer, Web Components, এবং AJAX এর মাধ্যমে সহজে server-side ডেটার সাথে ইন্টিগ্রেশন করা সম্ভব।

এখানে Polymer ব্যবহার করে Form Submission এবং Server-side Integration এর একটি মৌলিক উদাহরণ দেওয়া হল:

1. Basic Form Submission with Polymer

Polymer-এ সাধারণ form submission করতে, আপনি PolymerElement ব্যবহার করে কাস্টম কম্পোনেন্ট তৈরি করতে পারেন। এই কাস্টম কম্পোনেন্টের মাধ্যমে আপনি একটি ফর্ম ডেটা ব্যবহার করে AJAX কল পাঠাতে পারবেন, যা server-side API এর সাথে সংযোগ স্থাপন করবে।

Form Submission উদাহরণ:

<dom-module id="user-form">
  <template>
    <style>
      /* Style the form */
      :host {
        display: block;
        padding: 16px;
        border: 1px solid #ccc;
        width: 300px;
        margin: auto;
      }
      input, button {
        width: 100%;
        padding: 10px;
        margin: 5px 0;
        border-radius: 4px;
        border: 1px solid #ccc;
      }
      button {
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
      }
      button:hover {
        background-color: #45a049;
      }
    </style>

    <h2>User Form</h2>
    <form id="userForm">
      <input type="text" id="name" placeholder="Enter your name" required>
      <input type="email" id="email" placeholder="Enter your email" required>
      <button type="submit">Submit</button>
    </form>

    <p id="responseMessage"></p>
  </template>

  <script>
    import { PolymerElement, html } from '@polymer/polymer';

    class UserForm extends PolymerElement {
      static get template() {
        return html`
          <style>
            /* Inline styles */
          </style>
          <h2>User Form</h2>
          <form id="userForm">
            <input type="text" id="name" placeholder="Enter your name" required>
            <input type="email" id="email" placeholder="Enter your email" required>
            <button type="submit">Submit</button>
          </form>
          <p id="responseMessage"></p>
        `;
      }

      static get properties() {
        return {};
      }

      connectedCallback() {
        super.connectedCallback();
        this.shadowRoot.querySelector('#userForm').addEventListener('submit', this._submitForm.bind(this));
      }

      _submitForm(event) {
        event.preventDefault(); // Prevent default form submission

        const name = this.shadowRoot.querySelector('#name').value;
        const email = this.shadowRoot.querySelector('#email').value;

        // Create the form data object
        const formData = {
          name: name,
          email: email
        };

        // Send data to server using fetch
        this._sendDataToServer(formData);
      }

      async _sendDataToServer(formData) {
        try {
          const response = await fetch('https://jsonplaceholder.typicode.com/users', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
          });

          if (response.ok) {
            const responseData = await response.json();
            this.shadowRoot.querySelector('#responseMessage').textContent = 'Form submitted successfully!';
          } else {
            throw new Error('Failed to submit form');
          }
        } catch (error) {
          this.shadowRoot.querySelector('#responseMessage').textContent = 'Error: ' + error.message;
        }
      }
    }

    customElements.define('user-form', UserForm);
  </script>
</dom-module>

ব্যাখ্যা:

1. Form Elements: এখানে দুটি ইনপুট ফিল্ড (name এবং email) এবং একটি সাবমিট বাটন রয়েছে।
2. Form Submission: submit ইভেন্ট ব্যবহার করে ফর্মের ডেটা গ্রহণ করা হয় এবং _submitForm মেথডে প্রেরণ করা হয়।
3. AJAX (Fetch API): fetch() API ব্যবহার করে সার্ভারে ডেটা পাঠানো হয় (এখানে একটি ফেক API ব্যবহার করা হয়েছে jsonplaceholder.typicode.com).
4. Error Handling: যদি সার্ভারে ডেটা পাঠানোর সময় কোনো সমস্যা হয়, তবে ত্রুটির বার্তা UI তে প্রদর্শিত হয়।
5. Success Message: সফলভাবে ডেটা পাঠানোর পর একটি সফল বার্তা প্রদর্শিত হয়।

2. Server-side Integration

এখানে একটি সাধারণ AJAX কল দেখানো হয়েছে, যা server-side API এর সাথে ইন্টিগ্রেশন করতে ব্যবহৃত হয়েছে। আপনি আপনার প্রকৃত সার্ভারের URL ব্যবহার করতে পারেন যেটি ডেটা গ্রহণ এবং প্রক্রিয়া করতে পারে।

Server-Side Endpoint (Example):

যেমন আপনি যদি একটি সার্ভার সাইড PHP অথবা Node.js এ API তৈরি করেন, সেটি ডেটা গ্রহণ করতে পারবে:

Node.js Example (Express.js):

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json()); // Middleware to parse JSON body

app.post('/users', (req, res) => {
  const user = req.body;
  console.log('Received user data:', user);

  // Send a success response
  res.status(201).json({ message: 'User created successfully', data: user });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

এখানে, Express.js ব্যবহার করে একটি POST এন্ডপয়েন্ট তৈরি করা হয়েছে যা /users URL-এ ডেটা গ্রহণ করবে।

3. Form Validation (Optional)

Polymer কম্পোনেন্টে ফর্ম সঠিকভাবে প্রেরণ করার জন্য, ফর্ম ডেটার প্রাথমিক যাচাইকরণ (Validation) গুরুত্বপূর্ণ। এটি HTML5 Form Validation অথবা JavaScript Validation ব্যবহার করে করা যেতে পারে।

উদাহরণ: ফর্ম ইনপুট যাচাইকরণ:

if (name === '' || email === '') {
  this.shadowRoot.querySelector('#responseMessage').textContent = 'Please fill in all fields.';
  return;
}

Polymer ফ্রেমওয়ার্কে Form Submission এবং Server-side Integration খুবই সহজ এবং আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। আপনি AJAX ব্যবহার করে fetch() API কল করতে পারেন, এবং server-side API (যেমন Node.js, PHP, বা Python) এর মাধ্যমে ডেটা প্রক্রিয়া এবং গ্রহণ করতে পারেন। Polymer ফ্রেমওয়ার্কের সাহায্যে আপনি ইন্টারঅ্যাকটিভ এবং মডুলার ফর্ম কম্পোনেন্ট তৈরি করতে পারবেন যা server-side সিস্টেমের সাথে যোগাযোগ করে কার্যকরভাবে ডেটা পরিচালনা করবে।