Form এবং Validation ব্যবস্থাপনা

Riot.js তে Form এবং Validation ব্যবস্থাপনা করা খুবই সহজ এবং কার্যকরী। Riot.js এর reactive data binding এবং event handling এর মাধ্যমে আপনি সহজেই ফর্ম তৈরি করতে পারেন এবং ফর্মের ইনপুট ভ্যালিডেশন করতে পারেন। নিচে ধাপে ধাপে ফর্ম এবং ভ্যালিডেশন ব্যবস্থাপনা করার প্রক্রিয়া দেখানো হল।

১. Form Creation in Riot.js

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

Example: Basic Form with Data Binding

<!-- FormComponent.riot -->
<form-component>
  <h2>Registration Form</h2>
  
  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" ref={name} value={name} oninput={updateName} />
    </div>
    
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" ref={email} value={email} oninput={updateEmail} />
    </div>

    <div>
      <button type="submit" disabled={isFormInvalid}>Submit</button>
    </div>
  </form>

  <script>
    export default {
      name: '',
      email: '',
      isFormInvalid: true,

      // ইনপুটের মান পরিবর্তন করার জন্য ফাংশন
      updateName(e) {
        this.name = e.target.value;
        this.validateForm();
      },

      updateEmail(e) {
        this.email = e.target.value;
        this.validateForm();
      },

      // ফর্ম ভ্যালিডেশন
      validateForm() {
        // নাম এবং ইমেইল উভয় ক্ষেত্রেই মান থাকতে হবে
        this.isFormInvalid = !(this.name && this.email && this.isValidEmail(this.email));
      },

      // ইমেইল ভ্যালিডেশন
      isValidEmail(email) {
        const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        return regex.test(email);
      },

      // ফর্ম সাবমিট করার ফাংশন
      handleSubmit(e) {
        e.preventDefault();  // ফর্ম রিফ্রেশ থেকে রোধ
        console.log('Form submitted!', { name: this.name, email: this.email });
      }
    }
  </script>
</form-component>

এখানে:

• ডাটা বাইন্ডিং: value={name} এবং value={email} ব্যবহার করে ইনপুটের মানকে কম্পোনেন্টের স্টেটের সাথে বাইন্ড করা হয়েছে।
• oninput ইভেন্ট হ্যান্ডলার ব্যবহার করে ইনপুট পরিবর্তিত হলে স্টেট আপডেট হচ্ছে।
• ফর্ম ভ্যালিডেশন: validateForm ফাংশনে নাম এবং ইমেইল ইনপুট ফিল্ডের ভ্যালিডেশন করা হচ্ছে এবং যদি কিছু ভুল থাকে তবে Submit বাটন ডিজেবল করা হচ্ছে।
• ইমেইল ভ্যালিডেশন: ইমেইলের জন্য একটি সাধারণ রেগুলার এক্সপ্রেশন (regex) ব্যবহার করা হয়েছে।

২. Form Validation Techniques

Riot.js-এ ফর্ম ভ্যালিডেশন করার জন্য কিছু গুরুত্বপূর্ণ ধাপ অনুসরণ করা হয়:

1. ইনপুটের ভ্যালিডেশন:
   • সাধারণত, নাম, ইমেইল, পাসওয়ার্ড, বা অন্যান্য ইনপুট ফিল্ডের জন্য প্রথমে ক্লায়েন্ট সাইড ভ্যালিডেশন করতে হয়। এই ভ্যালিডেশন সাধারণত ইনপুটের মান (value) পরিবর্তিত হলে করা হয়, যেমন oninput, onblur ইভেন্টে।
2. এলার্ট বা মেসেজ দেখানো:
   • ভ্যালিডেশন ঠিক না থাকলে, ব্যবহারকারীকে এলার্ট বা এরোর মেসেজ দেখানো যায়, যা তাকে সঠিকভাবে ফিল্ড পূর্ণ করতে উৎসাহিত করবে।
3. ফর্ম সাবমিট হওয়ার আগে চেক করা:
   • ফর্ম সাবমিট করার আগে, সব ইনপুট ফিল্ডে ভ্যালিড ডাটা আছে কিনা, তা চেক করা হয়। যদি সব ফিল্ড ভ্যালিড না হয় তবে ফর্ম সাবমিট হওয়া থেকে আটকানো যায়।

Example: Displaying Error Messages

<!-- FormWithErrorMessages.riot -->
<form-with-error-messages>
  <h2>Registration Form</h2>

  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" value={name} oninput={updateName} />
      <p if={nameError} class="error">{nameError}</p>
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" value={email} oninput={updateEmail} />
      <p if={emailError} class="error">{emailError}</p>
    </div>

    <div>
      <button type="submit" disabled={isFormInvalid}>Submit</button>
    </div>
  </form>

  <script>
    export default {
      name: '',
      email: '',
      nameError: '',
      emailError: '',
      isFormInvalid: true,

      updateName(e) {
        this.name = e.target.value;
        this.validateName();
        this.validateForm();
      },

      updateEmail(e) {
        this.email = e.target.value;
        this.validateEmail();
        this.validateForm();
      },

      validateName() {
        this.nameError = this.name ? '' : 'Name is required';
      },

      validateEmail() {
        if (!this.email) {
          this.emailError = 'Email is required';
        } else if (!this.isValidEmail(this.email)) {
          this.emailError = 'Invalid email format';
        } else {
          this.emailError = '';
        }
      },

      isValidEmail(email) {
        const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        return regex.test(email);
      },

      validateForm() {
        this.isFormInvalid = !(this.name && this.email && this.emailError === '');
      },

      handleSubmit(e) {
        e.preventDefault();
        console.log('Form submitted!', { name: this.name, email: this.email });
      }
    }
  </script>
</form-with-error-messages>

এখানে:

• nameError এবং emailError: ইনপুট ফিল্ডের পাশে ত্রুটি বার্তা দেখানো হচ্ছে যদি ব্যবহারকারী সঠিক তথ্য না দেয়।
• এলার্ট মেসেজ: validateName এবং validateEmail ফাংশনে ব্যবহারকারীর ইনপুট যাচাই করা হচ্ছে এবং ত্রুটি থাকলে মেসেজ দেখানো হচ্ছে।
• ফর্মের ভ্যালিডেশন: ফর্ম সাবমিট করার আগে, সব ইনপুট সঠিক কিনা যাচাই করা হচ্ছে এবং যদি কোনো ইনপুট ভুল থাকে, তবে Submit বাটন ডিজেবল রাখা হচ্ছে।

৩. Custom Validation

Riot.js-এ আপনি কাস্টম ভ্যালিডেশন ফাংশনও তৈরি করতে পারেন, যেমন পাসওয়ার্ডের শক্তি পরীক্ষা করা, বিশেষ চরিত্র বা নম্বর চেক করা ইত্যাদি।

Example: Password Strength Validation

<!-- PasswordValidation.riot -->
<password-validation>
  <h2>Registration Form</h2>

  <form onsubmit={handleSubmit}>
    <div>
      <label for="password">Password:</label>
      <input type="password" id="password" value={password} oninput={updatePassword} />
      <p if={passwordError} class="error">{passwordError}</p>
    </div>

    <div>
      <button type="submit" disabled={isFormInvalid}>Submit</button>
    </div>
  </form>

  <script>
    export default {
      password: '',
      passwordError: '',
      isFormInvalid: true,

      updatePassword(e) {
        this.password = e.target.value;
        this.validatePassword();
        this.validateForm();
      },

      validatePassword() {
        if (!this.password) {
          this.passwordError = 'Password is required';
        } else if (this.password.length < 6) {
          this.passwordError = 'Password must be at least 6 characters';
        } else {
          this.passwordError = '';
        }
      },

      validateForm() {
        this.isFormInvalid = !(this.password && this.passwordError === '');
      },

      handleSubmit(e) {
        e.preventDefault();
        console.log('Form submitted with password:', this.password);
      }
    }
  </script>
</password-validation>

এখানে:

• পাসওয়ার্ড ভ্যালিডেশন: পাসওয়ার্ডের লম্বা (৬টি চরিত্র) হতে হবে, এবং এটি ফাঁকা থাকতে পারবে না।
• passwordError: ইনপুটের পাশে ত্রুটি বার্তা দেখানো হচ্ছে।

সারাংশ

Riot.js তে ফর্ম এবং ভ্যালিডেশন ব্যবস্থাপনা খুবই সহজ এবং কার্যকরী। আপনি ফর্ম ইনপুটের ডাটা reactive data binding এর মাধ্যমে ম্যানেজ করতে পারেন এবং ভ্যালিডেশন ফাংশন ব্যবহার করে ইনপুটের সঠিকতা যাচাই করতে পারেন। ত্রুটি বার্তা এবং সঠিকভাবে ফর্ম ভ্যালিডেশন করার জন্য oninput, onsubmit, এবং disabled বৈশিষ্ট্যগুলি খুব সহায়ক।

এটি ছোট এবং বড় অ্যাপ্লিকেশনগুলোতে ফর্ম এবং ভ্যালিডেশন ব্যবস্থাপনা সহজ করে তোলে।

Riot.js এ ফর্ম তৈরি এবং ডেটা বাইন্ডিং খুবই সহজ এবং শক্তিশালী। Riot.js এর রিয়েকটিভ ডাটা বাইন্ডিং সিস্টেমের মাধ্যমে আপনি ফর্মের ইনপুট ক্ষেত্রগুলোর মান এবং UI এর মধ্যে ডেটা সিঙ্ক্রোনাইজ করতে পারেন, যা ফর্ম ব্যবস্থাপনা এবং ইনপুটের মাধ্যমে ডেটা আপডেট করার কাজকে খুবই সহজ করে তোলে।

১. ফর্ম তৈরি

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

উদাহরণ: একটি সাধারণ ফর্ম তৈরি

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

<!-- FormComponent.riot -->
<form-component>
  <form onsubmit={submitForm}>
    <label for="name">Name:</label>
    <input type="text" id="name" bind={name} />

    <label for="age">Age:</label>
    <input type="number" id="age" bind={age} />

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

  <script>
    export default {
      name: '',
      age: '',

      submitForm(e) {
        e.preventDefault();  // Form submission এর ডিফল্ট আচরণ বন্ধ করে
        console.log('Name:', this.name);
        console.log('Age:', this.age);
      }
    }
  </script>
</form-component>

ব্যাখ্যা:

1. ফর্ম এলিমেন্ট: এখানে একটি form তৈরি করা হয়েছে, যার মধ্যে দুটি ইনপুট ফিল্ড (name এবং age) রয়েছে।
2. ডেটা বাইন্ডিং: bind={name} এবং bind={age} এর মাধ্যমে ইনপুট ফিল্ডগুলোকে name এবং age প্রপার্টির সাথে বাইন্ড করা হয়েছে। এর মাধ্যমে, ইনপুটের মান পরিবর্তিত হলে তা সরাসরি কম্পোনেন্টের স্টেটে রিফ্লেক্ট হবে।
3. ফর্ম সাবমিশন: submitForm ফাংশনটি সাবমিট ইভেন্টের জন্য ডিফাইন করা হয়েছে, যা ডেটাকে কনসোলে প্রিন্ট করবে এবং ডিফল্ট সাবমিশন আচরণ (পেজ রিফ্রেশ) প্রতিরোধ করবে।

২. ডেটা বাইন্ডিং (Data Binding)

Riot.js-এর ডেটা বাইন্ডিং সিস্টেমের মাধ্যমে আপনি কম্পোনেন্টের মধ্যে ডেটাকে একাধিক উপাদানের মধ্যে সিঙ্ক্রোনাইজ করতে পারেন। উপরের উদাহরণে, bind অ্যাট্রিবিউট ব্যবহার করে আপনি ইনপুট ফিল্ডগুলোর মান এবং কম্পোনেন্টের স্টেটকে সিঙ্ক্রোনাইজ করেছেন।

ডেটা বাইন্ডিং এর অন্যান্য উদাহরণ:

1. টেক্সট ইনপুট ফিল্ড এবং UI আপডেট:

<!-- DataBindingExample.riot -->
<data-binding-example>
  <input type="text" bind={message} />
  <p>Your message: {message}</p>

  <script>
    export default {
      message: ''  // Initial message state

      // message এর মান ইনপুট ফিল্ডে টাইপ করলে স্বয়ংক্রিয়ভাবে <p> তে পরিবর্তিত হবে
    }
  </script>
</data-binding-example>

এখানে, ইনপুট ফিল্ডে যেকোনো পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে <p> ট্যাগে প্রতিফলিত হবে। এই সিস্টেমটি one-way data binding।

2. রেডিও বাটন এবং চেকবক্সের জন্য ডেটা বাইন্ডিং:

<!-- RadioCheckboxExample.riot -->
<radio-checkbox-example>
  <label for="option1">
    <input type="radio" id="option1" name="options" bind="option" value="Option 1" />
    Option 1
  </label>
  <label for="option2">
    <input type="radio" id="option2" name="options" bind="option" value="Option 2" />
    Option 2
  </label>

  <p>Selected Option: {option}</p>

  <script>
    export default {
      option: ''  // Initially no option selected
    }
  </script>
</radio-checkbox-example>

এখানে, রেডিও বাটন ব্যবহার করে option স্টেটের মানকে সিঙ্ক্রোনাইজ করা হয়েছে। যেহেতু bind="option" করা হয়েছে, যেকোনো রেডিও বাটন সিলেক্ট করলে option প্রপার্টি আপডেট হবে এবং UI তে সেই পরিবর্তন দেখা যাবে।

৩. চেকবক্সের জন্য ডেটা বাইন্ডিং:

<!-- CheckboxExample.riot -->
<checkbox-example>
  <label>
    <input type="checkbox" bind="isChecked" /> I agree to the terms
  </label>
  <p>Checked: {isChecked}</p>

  <script>
    export default {
      isChecked: false  // Initially unchecked
    }
  </script>
</checkbox-example>

এখানে, isChecked স্টেটটি চেকবক্সের মানের সাথে বাইন্ড করা হয়েছে। চেকবক্সটি চেক করা হলে isChecked প্রপার্টি true হয়ে যাবে এবং না থাকলে false থাকবে।

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

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

<!-- FormValidationExample.riot -->
<form-validation-example>
  <form onsubmit={submitForm}>
    <label for="name">Name:</label>
    <input type="text" id="name" bind={name} />

    <button type="submit" disabled={name.trim() === ''}>Submit</button>
  </form>

  <script>
    export default {
      name: '',

      submitForm(e) {
        e.preventDefault();
        if (this.name.trim() !== '') {
          console.log('Name:', this.name);
        }
      }
    }
  </script>
</form-validation-example>

এখানে, disabled অ্যাট্রিবিউট ব্যবহার করা হয়েছে সাবমিট বাটনকে নির্ধারণ করতে যে, যদি নাম ফিল্ড খালি থাকে, তবে বাটনটি ডিজেবল হয়ে যাবে।

Riot.js-এ ফর্ম তৈরি এবং ডেটা বাইন্ডিং খুবই সহজ। আপনি bind অ্যাট্রিবিউট ব্যবহার করে ইনপুট ফিল্ড এবং কম্পোনেন্ট স্টেটের মধ্যে ডেটা সিঙ্ক্রোনাইজ করতে পারেন, যা UI কে রিয়েকটিভ করে তোলে। আপনি ডেটা বাইন্ডিং ব্যবহার করে ফর্মের বিভিন্ন ইনপুট, রেডিও বাটন, চেকবক্স, এবং অন্যান্য উপাদানগুলি পরিচালনা করতে পারেন। এছাড়া, Riot.js-এর সাহায্যে ফর্ম ভ্যালিডেশন, সাবমিশন এবং ডেটা পরিবর্তনের জন্য খুব সহজভাবে কোড লেখা সম্ভব।

Riot.js-এ Custom Form Validators তৈরি করা একটি সাধারণ প্রক্রিয়া, যা আপনার ফর্মের ইনপুট ডেটা যাচাই (validation) করার জন্য প্রয়োজনীয়। Riot.js এর state এবং opts ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ ফর্ম তৈরি করতে পারেন এবং কাস্টম ভ্যালিডেশন যুক্ত করতে পারেন।

কাস্টম ফর্ম ভ্যালিডেটর তৈরি করার জন্য কয়েকটি ধাপ:

1. ফর্ম ইনপুট এলিমেন্ট তৈরি করা
2. ইনপুট ডেটার জন্য কাস্টম ভ্যালিডেশন ফাংশন তৈরি করা
3. ভ্যালিডেশন স্টেট ট্র্যাক করা
4. ফর্ম সাবমিটে ভ্যালিডেশন চেক করা

উদাহরণ: একটি সিম্পল কাস্টম ফর্ম ভ্যালিডেটর তৈরি

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

১. Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Sign Up Form</h1>

  <!-- Child Component-এ ডেটা পাঠানো হচ্ছে -->
  <sign-up-form></sign-up-form>

  <script>
    import './SignUpForm.riot';

    export default {}
  </script>
</app>

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

২. Child Component (SignUpForm.riot)

<!-- src/components/SignUpForm.riot -->
<sign-up-form>
  <form onsubmit={validateForm}>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" value={email} onchange={updateEmail} />
    <span if={emailError} class="error">{emailError}</span>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" value={password} onchange={updatePassword} />
    <span if={passwordError} class="error">{passwordError}</span>

    <button type="submit" disabled={isFormInvalid}>Submit</button>
  </form>

  <script>
    export default {
      onMounted() {
        // Initial form values and errors
        this.email = '';
        this.password = '';
        this.emailError = '';
        this.passwordError = '';
        this.isFormInvalid = true; // Disable submit button initially
      },

      updateEmail(e) {
        this.email = e.target.value;
        this.validateEmail();
        this.checkFormValidity();
      },

      updatePassword(e) {
        this.password = e.target.value;
        this.validatePassword();
        this.checkFormValidity();
      },

      validateEmail() {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!this.email) {
          this.emailError = 'Email is required';
        } else if (!emailRegex.test(this.email)) {
          this.emailError = 'Please enter a valid email address';
        } else {
          this.emailError = ''; // Clear error
        }
      },

      validatePassword() {
        if (!this.password) {
          this.passwordError = 'Password is required';
        } else if (this.password.length < 6) {
          this.passwordError = 'Password must be at least 6 characters';
        } else {
          this.passwordError = ''; // Clear error
        }
      },

      checkFormValidity() {
        this.isFormInvalid = this.emailError || this.passwordError || !this.email || !this.password;
      },

      validateForm(e) {
        e.preventDefault(); // Prevent form submission if invalid
        if (!this.isFormInvalid) {
          alert('Form submitted successfully!');
        }
      }
    }
  </script>

  <style>
    .error {
      color: red;
    }
  </style>
</sign-up-form>

ব্যাখ্যা:

1. State initialization:
   • email, password হল ফর্ম ইনপুটের মান।
   • emailError, passwordError হল ইনপুটের জন্য কাস্টম ত্রুটি বার্তা।
   • isFormInvalid একটি ফ্ল্যাগ যা সাবমিট বাটনটি সক্রিয় বা নিষ্ক্রিয় করার জন্য ব্যবহৃত হয়।
2. Form Validation:
   • validateEmail() ফাংশনটি ইমেইল ভ্যালিডেশন করে। এটি একটি সাধারণ RegEx ব্যবহার করে ইমেইল ঠিকভাবে ইনপুট হয়েছে কিনা চেক করে।
   • validatePassword() ফাংশনটি পাসওয়ার্ডের জন্য কাস্টম ভ্যালিডেশন করে, যেমন পাসওয়ার্ড কমপক্ষে ৬টি অক্ষর হতে হবে।
3. Dynamic Error Display:
   • emailError এবং passwordError টেক্সট ফিল্ডের নিচে শর্তসাপেক্ষে ত্রুটি বার্তা দেখায়।
   • <span if={emailError} class="error">{emailError}</span> এই অংশটি দেখাবে শুধুমাত্র যদি emailError ত্রুটি বার্তা থাকে।
4. Form Submission:
   • validateForm() ফাংশনটি সাবমিট ইভেন্টকে আটকে দেয় যদি ফর্মটি ভ্যালিড না হয়।
   • যদি সব ইনপুট ঠিক থাকে, তবে ফর্ম সফলভাবে সাবমিট হবে।
5. Enable/Disable Submit Button:
   • isFormInvalid ভ্যালু অনুযায়ী সাবমিট বাটনটি সক্রিয় বা নিষ্ক্রিয় হয়। যদি কোন ইনপুট ভুল থাকে বা পূর্ণ না হয়, তাহলে বাটনটি নিষ্ক্রিয় থাকবে।

৩. স্টাইলিং (CSS)

<style>
  .error {
    color: red;
  }
  input {
    margin-bottom: 10px;
  }
</style>

এখানে, ত্রুটি বার্তাগুলো লাল রঙে দেখানো হচ্ছে, এবং ইনপুট ফিল্ডগুলোর মধ্যে কিছু মার্জিন দেওয়া হয়েছে যাতে ফর্মটি আরও পরিষ্কার দেখা যায়।

সারাংশ:

• Custom Validators তৈরি করার জন্য আপনি কাস্টম ফাংশন ব্যবহার করে ইনপুট ডেটা যাচাই করতে পারেন।
• Riot.js এর state এবং props ব্যবহার করে ডেটা ট্র্যাক করা যায় এবং conditional rendering এর মাধ্যমে ত্রুটি বার্তা প্রদর্শন করা হয়।
• ফর্ম সাবমিটের সময় preventDefault() ব্যবহার করে ডিফল্ট সাবমিশন বন্ধ করতে হয়, এবং কাস্টম ভ্যালিডেশন চেক করা হয়।

এভাবে আপনি Riot.js-এ সহজেই কাস্টম ফর্ম ভ্যালিডেটর তৈরি করতে পারবেন।

Riot.js-এ Error Handling এবং Validation Messages প্রদর্শন করার জন্য সাধারণভাবে state management এবং conditional rendering ব্যবহার করা হয়। যখন ব্যবহারকারী কোনও ফর্ম পূর্ণ করেন বা কোনো ইনপুট প্রদান করেন, তখন আপনি যাচাই করতে পারেন এবং এর ফলস্বরূপ error messages বা validation messages প্রদর্শন করতে পারেন।

১. Error Handling এবং Validation Messages প্রদর্শন করা

ধরা যাক, আপনি একটি ফর্ম তৈরি করছেন যেখানে ব্যবহারকারী নাম এবং ইমেল ইনপুট দিবেন, এবং আপনি চাইছেন যে যদি কোনও ইনপুট ভুল হয়, তাহলে একটি ভ্যালিডেশন মেসেজ দেখানো হবে। এই কাজটি আমরা Riot.js-এ নিম্নলিখিতভাবে করতে পারি।

উদাহরণ: ফর্ম ভ্যালিডেশন এবং এরর মেসেজ প্রদর্শন

Form Component (Form.riot)

<!-- src/components/Form.riot -->
<form onsubmit={handleSubmit}>
  <h2>Contact Us</h2>

  <!-- Name Field -->
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" value={name} onchange={e => name = e.target.value} />
    <p if={nameError} class="error">{nameError}</p>
  </div>

  <!-- Email Field -->
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" value={email} onchange={e => email = e.target.value} />
    <p if={emailError} class="error">{emailError}</p>
  </div>

  <!-- Submit Button -->
  <div>
    <button type="submit">Submit</button>
  </div>

  <script>
    export default {
      onMounted() {
        this.name = '';
        this.email = '';
        this.nameError = '';
        this.emailError = '';
      },

      handleSubmit(event) {
        // Prevent form submission
        event.preventDefault();

        // Reset previous error messages
        this.nameError = '';
        this.emailError = '';

        // Validate inputs
        let valid = true;

        if (this.name.trim() === '') {
          this.nameError = 'Name is required.';
          valid = false;
        }

        if (this.email.trim() === '') {
          this.emailError = 'Email is required.';
          valid = false;
        } else if (!this.isValidEmail(this.email)) {
          this.emailError = 'Please enter a valid email address.';
          valid = false;
        }

        // If valid, submit form (here we just log the data)
        if (valid) {
          console.log('Form Submitted!', {
            name: this.name,
            email: this.email
          });
        }
      },

      isValidEmail(email) {
        // Simple email validation regex
        const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        return regex.test(email);
      }
    }
  </script>

  <style>
    .error {
      color: red;
      font-size: 12px;
    }
  </style>
</form>

ব্যাখ্যা:

1. স্টেট তৈরি করা:
   • name, email নামক ভেরিয়েবলগুলি ব্যবহারকারীর ইনপুট ধারণ করতে ব্যবহৃত হচ্ছে।
   • nameError, emailError নামক ভেরিয়েবলগুলি ইনপুট ফিল্ডের ভুল ভ্যালিডেশন বার্তা ধারণ করবে।
2. handleSubmit ফাংশন:
   • Form Submit হ্যান্ডল করা হয়। এখানে ইনপুটগুলোর ভ্যালিডেশন করা হচ্ছে, এবং যদি কোনো ইনপুট ভুল থাকে তবে তাতে সংশ্লিষ্ট error message প্রদর্শন করা হয়।
3. isValidEmail ফাংশন:
   • এটি একটি ইমেল ভ্যালিডেশন ফাংশন যা ইমেলের সঠিকতা যাচাই করার জন্য একটি সাধারণ রেগুলার এক্সপ্রেশন (regex) ব্যবহার করে।
4. Conditional Rendering:
   • if={nameError} এবং if={emailError} ব্যবহার করে conditional rendering করা হয়েছে, যেখানে error messages শুধুমাত্র তখনই দেখানো হবে যখন সংশ্লিষ্ট ইনপুটে কোন ভুল থাকবে।
5. CSS:
   • .error ক্লাসের মাধ্যমে error messages এর রঙ এবং ফন্ট সাইজ সেট করা হয়েছে।

২. Error Handling in API Calls

এছাড়াও আপনি API call করার সময়ও Error Handling করতে পারেন। যদি API থেকে কোনো ত্রুটি ঘটে, তখন আপনি একটি ত্রুটি বার্তা প্রদর্শন করতে পারেন।

উদাহরণ: API Call Error Handling

<!-- src/components/ApiForm.riot -->
<api-form>
  <h2>Submit Your Info</h2>

  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" value={name} onchange={e => name = e.target.value} />
    </div>
    
    <button type="submit">Submit</button>

    <p if={errorMessage} class="error">{errorMessage}</p>
  </form>

  <script>
    export default {
      onMounted() {
        this.name = '';
        this.errorMessage = '';
      },

      async handleSubmit(event) {
        event.preventDefault();
        
        try {
          // Simulating an API call with a promise
          const response = await this.fakeApiCall(this.name);
          
          if (response.success) {
            console.log('Form submitted successfully');
          } else {
            throw new Error('Submission failed');
          }
        } catch (error) {
          this.errorMessage = error.message;
        }
      },

      fakeApiCall(name) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (name === '') {
              reject(new Error('Name is required'));
            } else {
              resolve({ success: true });
            }
          }, 1000);
        });
      }
    }
  </script>

  <style>
    .error {
      color: red;
      font-size: 12px;
    }
  </style>
</api-form>

এখানে:

• fakeApiCall একটি সিমুলেটেড API কল, যেখানে যদি নাম খালি থাকে তবে এটি ত্রুটি (error) সৃষ্টি করবে।
• errorMessage ভ্যারিয়েবলটি ত্রুটি বার্তা ধারণ করে এবং এটি conditional rendering এর মাধ্যমে UI-তে প্রদর্শন করা হয়।

সারাংশ:

1. Form Validation: ব্যবহারকারী ইনপুট যাচাই করার জন্য if শর্ত এবং error message প্রদর্শন করতে conditional rendering ব্যবহার করা হয়।
2. Error Handling: API কল বা অন্য কোনও প্রক্রিয়ায় ত্রুটি ঘটলে তা try-catch ব্লক ব্যবহার করে হ্যান্ডেল করা হয় এবং ত্রুটি বার্তা UI-তে প্রদর্শিত হয়।

এই পদ্ধতি ব্যবহার করে আপনি Riot.js-এ ইনপুট ভ্যালিডেশন এবং ত্রুটি হ্যান্ডলিং খুব সহজে করতে পারেন।

Riot.js-এ ফর্ম সাবমিশন এবং ডেটা সংরক্ষণ করা একটি সাধারণ প্রক্রিয়া। আপনি সহজেই ফর্মের ইনপুট ফিল্ডের মাধ্যমে ডেটা সংগ্রহ করতে পারেন এবং ফর্ম সাবমিশনের পরে সেটি প্রক্রিয়া বা সংরক্ষণ করতে পারেন। Riot.js এর ডাটা বাইন্ডিং এবং ইভেন্ট হ্যান্ডলিং ব্যবস্থার মাধ্যমে ফর্মের ডেটা সহজেই সংগ্রহ করা এবং প্রক্রিয়া করা সম্ভব।

১. ফর্ম সাবমিশন এবং ডেটা সংগ্রহ করা

ধরা যাক, আপনি একটি সিম্পল কন্টাক্ট ফর্ম তৈরি করতে চান যেখানে নাম, ইমেইল, এবং বার্তা নেওয়া হবে এবং ফর্ম সাবমিশনের পরে সেই ডেটা কনসোলে লোগ করা হবে।

Example: Simple Form Submission in Riot.js

ContactForm.riot:

<!-- ContactForm.riot -->
<contact-form>
  <h2>Contact Us</h2>
  
  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" ref={nameInput} placeholder="Enter your name" required />
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" ref={emailInput} placeholder="Enter your email" required />
    </div>

    <div>
      <label for="message">Message:</label>
      <textarea id="message" ref={messageInput} placeholder="Enter your message" required></textarea>
    </div>

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

  <script>
    export default {
      handleSubmit(e) {
        e.preventDefault(); // Prevent form from reloading the page

        const name = this.refs.nameInput.value;
        const email = this.refs.emailInput.value;
        const message = this.refs.messageInput.value;

        // Log the data to the console or store it
        console.log({ name, email, message });

        // Optionally, clear the form after submission
        this.refs.nameInput.value = '';
        this.refs.emailInput.value = '';
        this.refs.messageInput.value = '';
      }
    }
  </script>
</contact-form>

এখানে:

• onsubmit={handleSubmit}: ফর্ম সাবমিট হলে handleSubmit ফাংশন কল হয়।
• this.refs.nameInput.value: ফর্ম ইনপুট ফিল্ডগুলোর ভ্যালু সংগ্রহ করা হচ্ছে।
• e.preventDefault(): ফর্ম সাবমিট হলে পেজ রিফ্রেশ হতে না দিয়ে, ফর্ম ডেটা প্রক্রিয়া করা হচ্ছে।

২. ফর্ম ডেটা সংরক্ষণ করা

ফর্ম ডেটা সাবমিট করার পরে, আপনি সেটি স্টেট বা লোকাল স্টোরেজ তে সংরক্ষণ করতে পারেন। Riot.js এর স্টেট (স্থানীয় ডাটা) ব্যবহার করে ডেটা অ্যাক্সেস এবং আপডেট করা সহজ।

Example: Save Form Data Locally (using State)

<!-- ContactForm.riot -->
<contact-form>
  <h2>Contact Us</h2>
  
  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" ref={nameInput} placeholder="Enter your name" required />
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" ref={emailInput} placeholder="Enter your email" required />
    </div>

    <div>
      <label for="message">Message:</label>
      <textarea id="message" ref={messageInput} placeholder="Enter your message" required></textarea>
    </div>

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

  <h3>Form Data</h3>
  <ul>
    <li>Name: {state.name}</li>
    <li>Email: {state.email}</li>
    <li>Message: {state.message}</li>
  </ul>

  <script>
    export default {
      state: {
        name: '',
        email: '',
        message: ''
      },

      handleSubmit(e) {
        e.preventDefault(); // Prevent form from reloading the page

        const name = this.refs.nameInput.value;
        const email = this.refs.emailInput.value;
        const message = this.refs.messageInput.value;

        // Save the data to state
        this.state.name = name;
        this.state.email = email;
        this.state.message = message;

        // Optionally, you could also save it to localStorage or an API
        localStorage.setItem('formData', JSON.stringify({ name, email, message }));

        // Clear the form
        this.refs.nameInput.value = '';
        this.refs.emailInput.value = '';
        this.refs.messageInput.value = '';
      }
    }
  </script>
</contact-form>

এখানে:

• this.state: ফর্মের ডেটা স্টেট হিসেবে সংরক্ষণ করা হচ্ছে।
• localStorage.setItem: ফর্ম ডেটা localStorage তে সংরক্ষণ করা হচ্ছে, যাতে ডেটা ব্রাউজার স্টোরেজে রাখা যায়। এতে করে পেজ রিফ্রেশ হলেও ডেটা টিকে থাকে।
• UI: state এর মাধ্যমে ডেটা UI তে প্রদর্শিত হচ্ছে, যেমন নাম, ইমেইল, এবং বার্তা।

৩. ফর্ম ডেটা একটি API-তে সাবমিট করা

ফর্ম ডেটা API বা ব্যাকএন্ড সার্ভারে পাঠানোর জন্য আপনি fetch বা axios ব্যবহার করতে পারেন। নিচে fetch ব্যবহার করে ফর্ম ডেটা সাবমিট করার একটি উদাহরণ দেওয়া হল:

Example: Submit Form Data to an API

<!-- ContactForm.riot -->
<contact-form>
  <h2>Contact Us</h2>
  
  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" ref={nameInput} placeholder="Enter your name" required />
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" ref={emailInput} placeholder="Enter your email" required />
    </div>

    <div>
      <label for="message">Message:</label>
      <textarea id="message" ref={messageInput} placeholder="Enter your message" required></textarea>
    </div>

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

  <script>
    export default {
      handleSubmit(e) {
        e.preventDefault(); // Prevent form from reloading the page

        const name = this.refs.nameInput.value;
        const email = this.refs.emailInput.value;
        const message = this.refs.messageInput.value;

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

        // Send the form data to an API
        fetch('https://example.com/api/submit-form', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
          console.log('Form submitted successfully:', data);
          // Optionally, show a success message to the user
        })
        .catch(error => {
          console.error('Error submitting form:', error);
          // Optionally, show an error message to the user
        });

        // Clear the form
        this.refs.nameInput.value = '';
        this.refs.emailInput.value = '';
        this.refs.messageInput.value = '';
      }
    }
  </script>
</contact-form>

এখানে:

• fetch ব্যবহার করে ফর্ম ডেটা একটি API তে POST করা হচ্ছে।
• JSON.stringify(formData): ফর্ম ডেটা JSON আকারে সার্ভারে পাঠানো হচ্ছে।
• response.json(): সার্ভার থেকে রেসপন্স JSON আকারে পাওয়া যাবে।

সারাংশ

Riot.js-এ ফর্ম সাবমিশন এবং ডেটা সংরক্ষণ খুব সহজ। আপনি onsubmit ইভেন্ট এবং refs ব্যবহার করে ফর্মের ইনপুট ডেটা সংগ্রহ করতে পারেন। সেই ডেটা আপনি স্টেট অথবা localStorage তে সংরক্ষণ করতে পারেন, অথবা API তে পাঠাতে পারেন। Riot.js এর ডাটা বাইন্ডিং সিস্টেম আপনাকে সহজে UI রিফ্রেশ করতে এবং ডেটা প্রক্রিয়া করতে সাহায্য করে।