Form Data Binding এবং Validation Rules

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 ফ্রেমওয়ার্কের এই বৈশিষ্ট্যগুলি আপনার ওয়েব অ্যাপ্লিকেশনকে আরও শক্তিশালী, ব্যবহারকারী-বান্ধব এবং ইন্টারেক্টিভ করে তোলে।