Form Elements এবং Input Validation

Polymer Framework-এ Form Elements এবং Input Validation ব্যবহারের জন্য আপনি কাস্টম কম্পোনেন্ট তৈরি করতে পারেন, যা HTML ফর্মের অংশ হিসেবে ইনপুট ডেটা গ্রহণ করে এবং সেগুলির বৈধতা পরীক্ষা করে। Polymer এ আপনি ওয়েব কম্পোনেন্ট এবং ফর্ম ইনপুট ভ্যালিডেশন ব্যবহারের মাধ্যমে সহজেই কাস্টম ফর্ম তৈরি করতে পারেন।

Polymer Framework এ Form Elements এবং Input Validation

১. Form Elements:

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

Polymer ফ্রেমওয়ার্কে ফর্ম এলিমেন্ট তৈরির জন্য input, textarea, select এবং অন্যান্য HTML ফর্ম উপাদানগুলির সাথে কাজ করতে পারবেন।

২. Input Validation:

Polymer ব্যবহার করে আপনি ইনপুট ভ্যালিডেশনও করতে পারেন। এটি করার জন্য আপনি ইনপুট ফিল্ডের ভ্যালিডেশন চেক করতে JavaScript ব্যবহার করতে পারেন এবং যদি ইনপুটটি সঠিক না হয়, তাহলে ব্যবহারকারীকে একটি ত্রুটির বার্তা দেখাতে পারেন।

Polymer Example: Input Validation সহ Form Element

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

উদাহরণ:

<dom-module id="user-form">
  <template>
    <style>
      input:invalid {
        border: 2px solid red;
      }
      input:valid {
        border: 2px solid green;
      }
      .error-message {
        color: red;
        font-size: 12px;
      }
    </style>

    <form id="form">
      <label for="username">Username:</label>
      <input id="username" type="text" minlength="5" required pattern="^[a-zA-Z0-9]+$">
      <div class="error-message" hidden$="[[!_usernameValid]]">Username must be at least 5 characters long and contain only letters and numbers.</div>
      <br>

      <label for="email">Email:</label>
      <input id="email" type="email" required>
      <div class="error-message" hidden$="[[!_emailValid]]">Please enter a valid email address.</div>
      <br>

      <button type="submit" disabled$="[[!_formValid]]">Submit</button>
    </form>
  </template>

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

    class UserForm extends PolymerElement {
      static get properties() {
        return {
          _usernameValid: {
            type: Boolean,
            value: true
          },
          _emailValid: {
            type: Boolean,
            value: true
          },
          _formValid: {
            type: Boolean,
            computed: '_computeFormValid(_usernameValid, _emailValid)'
          }
        };
      }

      _computeFormValid(usernameValid, emailValid) {
        return usernameValid && emailValid;
      }

      validateUsername(event) {
        const usernameInput = event.target;
        const isValid = usernameInput.validity.valid;
        this._usernameValid = isValid;
      }

      validateEmail(event) {
        const emailInput = event.target;
        const isValid = emailInput.validity.valid;
        this._emailValid = isValid;
      }

      ready() {
        super.ready();
        this.$.username.addEventListener('input', this.validateUsername.bind(this));
        this.$.email.addEventListener('input', this.validateEmail.bind(this));
      }
    }

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

ব্যাখ্যা:

1. HTML ফর্ম এলিমেন্ট:
   • এখানে দুটি ইনপুট ফিল্ড তৈরি করা হয়েছে—একটি username এবং একটি email ইনপুট।
   • username ইনপুটটি একটি প্যাটার্ন এবং মিনিমাম দৈর্ঘ্য (5 ক্যারেক্টার) দিয়ে ভ্যালিডেশন করা হয়েছে।
   • email ইনপুটটি ইমেল ভ্যালিডেশন দিয়ে চেক করা হয়েছে।
2. Input Validation:
   • Polymer কম্পোনেন্টে, validateUsername এবং validateEmail মেথডের মাধ্যমে ইনপুটের বৈধতা চেক করা হয়েছে।
   • যখন ইনপুটের মান পরিবর্তিত হয়, তখন input ইভেন্টে ভ্যালিডেশন ফাংশনটি কল করা হয়।
   • ইনপুট সঠিক থাকলে, সেটির বর্ডার গ্রিন হয়ে যাবে, এবং যদি ভুল হয়, তাহলে রেড হয়ে যাবে।
3. Error Message:
   • যখন ইনপুট ফিল্ডটি ভুল হয়, তখন একটি ত্রুটির বার্তা ব্যবহারকারীর জন্য প্রদর্শিত হয়।
   • hidden$="[[!_usernameValid]]" এই রকম ডাটা-বাইন্ডিং ব্যবহার করা হয়েছে যাতে ইনপুট সঠিক থাকলে ত্রুটির বার্তা লুকানো থাকে।
4. Form Validation:
   • ফর্মটি সাবমিট করার আগে, সমস্ত ইনপুট ফিল্ডের বৈধতা যাচাই করা হয়। শুধুমাত্র যখন সব ইনপুট সঠিক হয়, তখন "Submit" বাটনটি সক্রিয় হবে।
   • disabled$="[[!_formValid]]" দিয়ে "Submit" বাটনের সক্রিয় বা নিষ্ক্রিয় অবস্থা নিয়ন্ত্রণ করা হয়েছে।

Polymer Framework এ ফর্ম এবং ইনপুট ভ্যালিডেশন সুবিধার কিছু পয়েন্ট:

• Declarative Validation: HTML5 ইনপুট বৈশিষ্ট্যগুলির মাধ্যমে আপনি সহজেই ইনপুট ভ্যালিডেশন করতে পারেন যেমন required, minlength, pattern ইত্যাদি।
• Real-time Feedback: Polymer ডাটা-বাইন্ডিং এবং ইভেন্ট লিস্টেনারের মাধ্যমে আপনি রিয়েল-টাইম ইনপুট ভ্যালিডেশন এবং ত্রুটির বার্তা প্রদর্শন করতে পারেন।
• Custom Components: Polymer দিয়ে আপনি কাস্টম ফর্ম উপাদান তৈরি করতে পারেন যা বিশেষ বৈশিষ্ট্য এবং ভ্যালিডেশন লজিক সম্পাদন করে।
• Error Handling: ইনপুটের ত্রুটি শনাক্ত করে দ্রুত ব্যবহারকারীর কাছে প্রতিবেদন প্রদানের মাধ্যমে একটি সুন্দর ইউজার এক্সপেরিয়েন্স তৈরি করতে পারবেন।

Polymer ফ্রেমওয়ার্কে ফর্ম এলিমেন্ট এবং ইনপুট ভ্যালিডেশন তৈরি করা অত্যন্ত সহজ এবং দক্ষ। Polymer এর শক্তিশালী ডাটা-বাইন্ডিং, ইভেন্ট হ্যান্ডলিং এবং কাস্টম উপাদান ব্যবস্থাপনা ব্যবহার করে আপনি শক্তিশালী এবং ইন্টারঅ্যাকটিভ ফর্ম তৈরি করতে পারবেন।