Web Development Framework7 এর সঙ্গে Form Handling এবং Validation গাইড ও নোট

336

Framework7 একটি শক্তিশালী ফ্রেমওয়ার্ক যা সহজেই ফর্ম তৈরি এবং ফর্ম ডেটা হ্যান্ডলিং করতে পারে। এটি বিল্ট-ইন ফিচার এবং প্লাগইন ব্যবহার করে ফর্ম ভ্যালিডেশন (Form Validation) করতে পারে, যা ফর্ম ডেটার সঠিকতা যাচাই করার জন্য অত্যন্ত কার্যকর।

Framework7 দিয়ে ফর্ম তৈরি

Framework7 এর বিল্ট-ইন CSS ক্লাস এবং HTML ফর্ম এলিমেন্ট ব্যবহার করে সহজেই একটি ফর্ম তৈরি করা যায়।

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

<div class="page">
  <div class="page-content">
    <form id="my-form">
      <div class="list">
        <ul>
          <!-- নাম ইনপুট -->
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Name</div>
                <div class="item-input-wrap">
                  <input type="text" name="name" placeholder="Enter your name" required>
                </div>
              </div>
            </div>
          </li>
          <!-- ইমেইল ইনপুট -->
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Email</div>
                <div class="item-input-wrap">
                  <input type="email" name="email" placeholder="Enter your email" required>
                </div>
              </div>
            </div>
          </li>
          <!-- পাসওয়ার্ড ইনপুট -->
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Password</div>
                <div class="item-input-wrap">
                  <input type="password" name="password" placeholder="Enter your password" required>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- সাবমিট বাটন -->
      <div class="block">
        <button type="submit" class="button button-fill">Submit</button>
      </div>
    </form>
  </div>
</div>

Framework7 দিয়ে ফর্ম ডেটা হ্যান্ডলিং

Framework7 এর JavaScript API ব্যবহার করে ফর্ম ডেটা সংগ্রহ করা এবং হ্যান্ডল করা যায়।

উদাহরণ: ফর্ম ডেটা সংগ্রহ করা

<script>
  var app = new Framework7();

  // ফর্ম সাবমিট ইভেন্ট হ্যান্ডলার
  document.getElementById('my-form').addEventListener('submit', function (e) {
    e.preventDefault(); // ডিফল্ট ফর্ম সাবমিট বন্ধ করুন

    // ফর্ম ডেটা সংগ্রহ
    var formData = app.form.convertToData('#my-form');
    console.log(formData); // ফর্ম ডেটা কনসোল এ প্রদর্শন
  });
</script>

`convertToData()` API

Framework7 এর convertToData() API ব্যবহার করে ফর্ম ডেটা একটি JSON অবজেক্টে রূপান্তর করা যায়। উদাহরণস্বরূপ, যদি ফর্মে নাম এবং ইমেইল থাকে, তাহলে JSON আউটপুট হবে:

{
  "name": "John Doe",
  "email": "john@example.com"
}

Framework7 দিয়ে ফর্ম ভ্যালিডেশন

Framework7 ফর্ম ভ্যালিডেশনের জন্য বিল্ট-ইন ফিচার এবং কাস্টম JavaScript কোড ব্যবহার করতে দেয়।

১. HTML এর `required` অ্যাট্রিবিউট ব্যবহার

Framework7 HTML এর ডিফল্ট required অ্যাট্রিবিউট সমর্থন করে, যা ইনপুট ফিল্ড বাধ্যতামূলক করতে সাহায্য করে।

২. কাস্টম ভ্যালিডেশন

Framework7 এর JavaScript API ব্যবহার করে কাস্টম ভ্যালিডেশন করা যায়।

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

<script>
  document.getElementById('my-form').addEventListener('submit', function (e) {
    e.preventDefault();

    // ফর্ম ডেটা সংগ্রহ
    var formData = app.form.convertToData('#my-form');

    // কাস্টম ভ্যালিডেশন
    if (!formData.name || formData.name.length < 3) {
      app.dialog.alert('Name must be at least 3 characters long.');
      return;
    }

    if (!formData.email || !formData.email.includes('@')) {
      app.dialog.alert('Please enter a valid email address.');
      return;
    }

    if (!formData.password || formData.password.length < 6) {
      app.dialog.alert('Password must be at least 6 characters long.');
      return;
    }

    // ফর্ম সফলভাবে ভ্যালিড হলে
    app.dialog.alert('Form submitted successfully!');
  });
</script>

Framework7 এর Form Validation সহ উদাহরণ কোড

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Framework7 Form Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css">
</head>
<body>
  <div id="app">
    <div class="view view-main">
      <div class="page">
        <div class="page-content">
          <form id="my-form">
            <div class="list">
              <ul>
                <li>
                  <div class="item-content item-input">
                    <div class="item-inner">
                      <div class="item-title item-label">Name</div>
                      <div class="item-input-wrap">
                        <input type="text" name="name" placeholder="Enter your name" required>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content item-input">
                    <div class="item-inner">
                      <div class="item-title item-label">Email</div>
                      <div class="item-input-wrap">
                        <input type="email" name="email" placeholder="Enter your email" required>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content item-input">
                    <div class="item-inner">
                      <div class="item-title item-label">Password</div>
                      <div class="item-input-wrap">
                        <input type="password" name="password" placeholder="Enter your password" required>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="block">
              <button type="submit" class="button button-fill">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script>
  <script>
    var app = new Framework7();

    document.getElementById('my-form').addEventListener('submit', function (e) {
      e.preventDefault();

      var formData = app.form.convertToData('#my-form');

      if (!formData.name || formData.name.length < 3) {
        app.dialog.alert('Name must be at least 3 characters long.');
        return;
      }

      if (!formData.email || !formData.email.includes('@')) {
        app.dialog.alert('Please enter a valid email address.');
        return;
      }

      if (!formData.password || formData.password.length < 6) {
        app.dialog.alert('Password must be at least 6 characters long.');
        return;
      }

      app.dialog.alert('Form submitted successfully!');
    });
  </script>
</body>
</html>

Framework7 দিয়ে ফর্ম তৈরি এবং ভ্যালিডেশন খুবই সহজ এবং কার্যকর। বিল্ট-ইন convertToData() এবং কাস্টম JavaScript ব্যবহার করে আপনি ফর্ম ডেটা হ্যান্ডল এবং সঠিকভাবে যাচাই করতে পারবেন। এটি আপনাকে একটি ইউজার-ফ্রেন্ডলি এবং নিরাপদ ফর্ম তৈরি করতে সহায়তা করে।

Content added By

SATT Academy

Form তৈরি এবং পরিচালনা

292

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

Framework7 দিয়ে ফর্ম তৈরির ধাপ

১. ফর্মের মৌলিক গঠন

Framework7-এ ফর্ম তৈরি করতে form এবং list ক্লাস ব্যবহার করা হয়।

উদাহরণ:

<div class="page" data-name="form">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Form Example</div>
    </div>
  </div>
  <div class="page-content">
    <form class="list">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" name="name" placeholder="Your name">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Email</div>
              <div class="item-input-wrap">
                <input type="email" name="email" placeholder="Your email">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Password</div>
              <div class="item-input-wrap">
                <input type="password" name="password" placeholder="Your password">
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="block">
        <button type="submit" class="button button-fill">Submit</button>
      </div>
    </form>
  </div>
</div>

২. ইনপুট টাইপ সমর্থন

Framework7 বিভিন্ন প্রকার ইনপুট টাইপ সমর্থন করে যেমন:

টেক্সট (text)
ইমেইল (email)
পাসওয়ার্ড (password)
নম্বর (number)
ডেট (date)
চেকবক্স (checkbox)
রেডিও (radio)
সিলেক্ট (select)

উদাহরণ (চেকবক্স এবং রেডিও):

<ul>
  <li>
    <label class="item-checkbox item-content">
      <input type="checkbox" name="agree" value="yes">
      <i class="icon icon-checkbox"></i>
      <div class="item-inner">
        <div class="item-title">I Agree</div>
      </div>
    </label>
  </li>
  <li>
    <label class="item-radio item-content">
      <input type="radio" name="gender" value="male">
      <i class="icon icon-radio"></i>
      <div class="item-inner">
        <div class="item-title">Male</div>
      </div>
    </label>
  </li>
</ul>

৩. ফর্ম ভ্যালিডেশন (Validation)

Framework7 ইনপুট ফিল্ডে বিল্ট-ইন ভ্যালিডেশন সমর্থন করে। আপনি required অ্যাট্রিবিউট ব্যবহার করে সহজ ভ্যালিডেশন করতে পারেন।

উদাহরণ:

<form class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Name</div>
          <div class="item-input-wrap">
            <input type="text" name="name" placeholder="Your name" required validate>
            <div class="item-input-error-message">Name is required</div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Email</div>
          <div class="item-input-wrap">
            <input type="email" name="email" placeholder="Your email" required validate>
            <div class="item-input-error-message">Please enter a valid email</div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</form>

৪. ডায়নামিক ফর্ম পরিচালনা

Framework7 এর মাধ্যমে JavaScript ব্যবহার করে ডায়নামিক ফর্ম ডেটা পরিচালনা করা যায়।

উদাহরণ:

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

// ফর্ম ডেটা দেখানো
console.log(formData);

// ফর্ম রিসেট করা
app.form.fillFromData('form', {
  name: 'John Doe',
  email: 'john@example.com'
});

৫. সাবমিশন এবং AJAX কল

Framework7 এর মাধ্যমে ফর্ম সাবমিট করার পর AJAX কল ব্যবহার করে ডেটা সার্ভারে পাঠানো যায়।

উদাহরণ:

$$('form').on('submit', function (e) {
  e.preventDefault();
  var formData = app.form.convertToData(this);
  app.request.post('https://example.com/api/submit', formData, function (data) {
    app.dialog.alert('Form submitted successfully!');
  });
});

৬. UI উন্নত করার উপায়

Framework7 বিভিন্ন স্টাইলিং অপশন এবং ক্লাস প্রদান করে যা ফর্মের UI উন্নত করতে সাহায্য করে।

item-input: ইনপুটের জন্য।
item-input-wrap: ইনপুট ফিল্ডের চারপাশে।
button-fill: সাবমিট বাটনের জন্য।

Framework7 এর মাধ্যমে ফর্ম ব্যবহারের সুবিধা

সহজ গঠন: HTML এবং CSS ব্যবহার করে ফর্ম তৈরি করা সহজ।
বিল্ট-ইন ভ্যালিডেশন: JavaScript ছাড়াই সহজ ভ্যালিডেশন সম্ভব।
AJAX সমর্থন: ফর্ম সাবমিশনের জন্য সার্ভার কল করা সহজ।
প্রি-বিল্ট স্টাইলিং: নেটিভ-লুক ফর্ম তৈরি করতে Framework7 স্টাইলিং ব্যবহার করা যায়।
ডায়নামিক ফর্ম ডেটা পরিচালনা: Framework7 এর API দিয়ে ডায়নামিক ফর্ম ডেটা পড়া এবং রিসেট করা যায়।

Framework7 ফর্ম তৈরি এবং পরিচালনার জন্য একটি শক্তিশালী ফ্রেমওয়ার্ক। এর সহজ গঠন, প্রি-বিল্ট UI কম্পোনেন্ট এবং ভ্যালিডেশন সাপোর্ট ডেভেলপারদের দ্রুত এবং কার্যকরভাবে ফর্ম তৈরি করতে সাহায্য করে।

Content added By

SATT Academy

Input Fields, Select, Checkbox, এবং Radio Button ব্যবহারের নিয়ম

265

Framework7-এ বিভিন্ন ফর্ম ইনপুট উপাদান ব্যবহারের মাধ্যমে ডেভেলপাররা ব্যবহারকারীদের কাছ থেকে ডেটা সংগ্রহ করতে পারেন। এটি ব্যবহারবান্ধব এবং নেটিভ লুক ও ফিল সরবরাহ করে। Framework7-এর সাহায্যে Input Fields, Select, Checkbox, এবং Radio Button ব্যবহার করা খুবই সহজ।

Input Fields

Input Field তৈরি

Framework7-এ Input Field তৈরি করার জন্য HTML ব্যবহার করুন। Framework7-এর স্টাইলিং স্বয়ংক্রিয়ভাবে Input Field-এ প্রয়োগ হবে।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Your Name</div>
          <div class="item-input-wrap">
            <input type="text" placeholder="Enter your name">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Input Field বৈশিষ্ট্য

প্লেসহোল্ডার (Placeholder): ইনপুটে টেক্সট নির্দেশিকা দেখানোর জন্য।
টাইপ (Type): টেক্সট, পাসওয়ার্ড, ইমেল ইত্যাদি।
রিকোয়্যারড (Required): ফর্ম ভ্যালিডেশনের জন্য প্রয়োজনীয়।

Input Field এর অন্যান্য উদাহরণ:

<input type="password" placeholder="Enter your password">
<input type="email" placeholder="Enter your email">
<input type="number" placeholder="Enter your age">

Select (Dropdown)

Select Field তৈরি

Framework7-এ Select (Dropdown) ব্যবহারের জন্য নিচের HTML ব্যবহার করুন।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Select City</div>
          <div class="item-input-wrap">
            <select>
              <option value="new-york">New York</option>
              <option value="los-angeles">Los Angeles</option>
              <option value="chicago">Chicago</option>
            </select>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Select Field বৈশিষ্ট্য

ডিফল্ট ভ্যালু (Default Value): ডিফল্ট সিলেকশন সেট করতে selected অ্যাট্রিবিউট ব্যবহার করুন।
মাল্টিপল সিলেকশন (Multiple Selection): একাধিক সিলেকশন করতে multiple অ্যাট্রিবিউট যোগ করুন।

মাল্টিপল সিলেকশন উদাহরণ:

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Checkbox

Checkbox তৈরি

Framework7-এ Checkbox তৈরি করতে নিচের HTML ব্যবহার করুন। এটি একাধিক অপশন নির্বাচন করতে সহায়ক।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="option1" value="Option 1">
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Option 1</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="option2" value="Option 2">
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Option 2</div>
        </div>
      </label>
    </li>
  </ul>
</div>

Checkbox বৈশিষ্ট্য

চেক করা (Checked): ডিফল্টভাবে চেক করা অবস্থায় রাখতে checked অ্যাট্রিবিউট ব্যবহার করুন।
ডিসেবল করা (Disabled): চেকবক্স নিষ্ক্রিয় করতে disabled অ্যাট্রিবিউট ব্যবহার করুন।

উদাহরণ:

<input type="checkbox" checked>
<input type="checkbox" disabled>

Radio Button

Radio Button তৈরি

Framework7-এ Radio Button ব্যবহার করে একাধিক অপশনের মধ্যে একটি নির্বাচন করা যায়।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="radio-group" value="Option 1">
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Option 1</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="radio-group" value="Option 2">
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Option 2</div>
        </div>
      </label>
    </li>
  </ul>
</div>

Radio Button বৈশিষ্ট্য

ডিফল্ট সিলেকশন (Default Selection): একটি অপশন ডিফল্টভাবে সিলেক্ট রাখতে checked অ্যাট্রিবিউট ব্যবহার করুন।
ডিসেবল করা (Disabled): একটি অপশন নিষ্ক্রিয় করতে disabled অ্যাট্রিবিউট ব্যবহার করুন।

উদাহরণ:

<input type="radio" name="group" value="Option 1" checked>
<input type="radio" name="group" value="Option 2" disabled>

ফর্ম তৈরি উদাহরণ

Framework7-এ Input Fields, Select, Checkbox, এবং Radio Button মিলিয়ে একটি পূর্ণাঙ্গ ফর্ম তৈরি করা যায়।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Name</div>
          <div class="item-input-wrap">
            <input type="text" placeholder="Enter your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">City</div>
          <div class="item-input-wrap">
            <select>
              <option value="new-york">New York</option>
              <option value="los-angeles">Los Angeles</option>
              <option value="chicago">Chicago</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="subscribe" value="Yes">
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Subscribe to Newsletter</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="gender" value="Male">
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Male</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="gender" value="Female">
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Female</div>
        </div>
      </label>
    </li>
  </ul>
</div>

Framework7-এ Input Fields, Select, Checkbox, এবং Radio Button তৈরি এবং পরিচালনা করা খুব সহজ। এর ব্যবহারবান্ধব ডিজাইন এবং নেটিভ লুক অ্যাপ্লিকেশনকে আরও কার্যকর এবং আকর্ষণীয় করে তোলে।

Content added By

SATT Academy

Form Data Validate করা এবং Submit করা

278

Framework7 দিয়ে ফর্ম ডেটা ভ্যালিডেশন এবং সাবমিশন করা সহজ এবং কার্যকর। Framework7 এর বিল্ট-ইন ক্লাস এবং জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে ফর্ম ডেটা যাচাই (validate) এবং সার্ভারে পাঠানো (submit) সম্ভব।

ফর্ম তৈরি করা

Framework7 এ একটি সাধারণ ফর্ম HTML দিয়ে তৈরি করা যায়।

উদাহরণ:

<div class="page" data-name="form">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Form Validation</div>
    </div>
  </div>
  <div class="page-content">
    <form id="my-form" class="list">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" name="name" placeholder="Enter your name" required>
                <span class="input-error-message">Name is required</span>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Email</div>
              <div class="item-input-wrap">
                <input type="email" name="email" placeholder="Enter your email" required>
                <span class="input-error-message">Valid email is required</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="block">
        <button type="submit" class="button button-fill">Submit</button>
      </div>
    </form>
  </div>
</div>

ফর্ম ডেটা ভ্যালিডেট করা

Framework7-এ form-validate ক্লাস ব্যবহার করে বিল্ট-ইন ভ্যালিডেশন কার্যকর করা যায়। তবে জাভাস্ক্রিপ্ট দিয়ে কাস্টম ভ্যালিডেশনও করা সম্ভব।

বিল্ট-ইন ভ্যালিডেশন ব্যবহার করা

HTML5 এর required অ্যাট্রিবিউট এবং Framework7 এর ক্লাস ব্যবহার করে সহজে ভ্যালিডেশন নিশ্চিত করা যায়।

উদাহরণ:

<input type="text" name="name" required>
<span class="input-error-message">This field is required</span>

কাস্টম জাভাস্ক্রিপ্ট দিয়ে ভ্যালিডেশন

document.getElementById('my-form').addEventListener('submit', function (e) {
  e.preventDefault(); // ফর্ম সাবমিট বন্ধ করে
  var name = this.querySelector('[name="name"]').value.trim();
  var email = this.querySelector('[name="email"]').value.trim();

  if (!name) {
    app.dialog.alert('Name is required');
    return;
  }

  if (!email || !validateEmail(email)) {
    app.dialog.alert('Valid email is required');
    return;
  }

  app.dialog.alert('Form is valid!');
});

// ইমেইল ভ্যালিডেশন ফাংশন
function validateEmail(email) {
  var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

ফর্ম ডেটা সাবমিট করা

Framework7 এর মাধ্যমে ফর্ম ডেটা সংগ্রহ করা

Framework7 এর formData ফাংশন দিয়ে সহজে ফর্ম ডেটা সংগ্রহ করা যায়।

উদাহরণ:

var formData = app.form.convertToData('#my-form');
console.log(formData); // ফর্ম ডেটা দেখাবে

ফর্ম ডেটা সাবমিট করা (AJAX ব্যবহার করে)

document.getElementById('my-form').addEventListener('submit', function (e) {
  e.preventDefault();

  var formData = app.form.convertToData('#my-form');

  app.request.post('https://example.com/api/submit', formData, function (response) {
    app.dialog.alert('Form submitted successfully!');
  }, function (error) {
    app.dialog.alert('Error submitting the form.');
  });
});

ফর্ম ডেটা ভ্যালিডেশন এবং সাবমিশনের প্রক্রিয়া

সম্পূর্ণ কোড:

<div id="app">
  <div class="view view-main">
    <div class="page" data-name="form">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Form Validation</div>
        </div>
      </div>
      <div class="page-content">
        <form id="my-form" class="list">
          <ul>
            <li>
              <div class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Name</div>
                  <div class="item-input-wrap">
                    <input type="text" name="name" required>
                    <span class="input-error-message">Name is required</span>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Email</div>
                  <div class="item-input-wrap">
                    <input type="email" name="email" required>
                    <span class="input-error-message">Valid email is required</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="block">
            <button type="submit" class="button button-fill">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  var app = new Framework7({
    root: '#app',
  });

  document.getElementById('my-form').addEventListener('submit', function (e) {
    e.preventDefault();

    var formData = app.form.convertToData('#my-form');

    // ফর্ম ভ্যালিডেশন
    if (!formData.name) {
      app.dialog.alert('Name is required');
      return;
    }
    if (!formData.email || !validateEmail(formData.email)) {
      app.dialog.alert('Valid email is required');
      return;
    }

    // ফর্ম সাবমিট
    app.request.post('https://example.com/api/submit', formData, function (response) {
      app.dialog.alert('Form submitted successfully!');
    }, function (error) {
      app.dialog.alert('Error submitting the form.');
    });
  });

  function validateEmail(email) {
    var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
</script>

Framework7 দিয়ে ফর্ম ডেটা যাচাই এবং সাবমিট করা খুবই সহজ। এটি HTML5 এর বিল্ট-ইন ভ্যালিডেশন সমর্থন করে এবং জাভাস্ক্রিপ্টের মাধ্যমে কাস্টম ভ্যালিডেশন ও AJAX সাবমিশন সম্ভব। Framework7 এর ফর্ম API ব্যবহার করে ফর্ম ডেটা ম্যানেজ করা দ্রুত এবং কার্যকর।

Content added By

SATT Academy

Form Storage এবং Input Masking

326

Framework7 এর মাধ্যমে ফর্ম ডেটা পরিচালনা (Form Storage) এবং ব্যবহারকারীর ইনপুট নিয়ন্ত্রণ (Input Masking) অত্যন্ত সহজ এবং কার্যকর।

Form Storage

Form Storage ফিচারের মাধ্যমে Framework7 ব্যবহারকারীর ফর্ম ডেটা স্থানীয়ভাবে সংরক্ষণ (Local Storage) করতে পারে। এটি ব্যবহারকারীর ফর্ম পূরণের সময় ডেটা হারানোর সম্ভাবনা কমায় এবং ফর্ম পুনরায় লোড হলে স্বয়ংক্রিয়ভাবে ডেটা পূরণ করতে সাহায্য করে।

Form Storage কীভাবে কাজ করে?

Framework7 ফর্ম ডেটা সংরক্ষণের জন্য localStorage API ব্যবহার করে। এটি স্বয়ংক্রিয়ভাবে ফর্মের ইনপুট ফিল্ডগুলোর ডেটা সংরক্ষণ করে এবং পুনরায় লোড করলে সেই ডেটা পুনরায় লোড করতে পারে।

ফর্ম স্টোরেজ সক্রিয় করার উদাহরণ:

<form data-store="true" data-store-name="myFormData">
  <div class="list">
    <ul>
      <li>
        <div class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">Name</div>
            <div class="item-input-wrap">
              <input type="text" name="name" placeholder="Your Name">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">Email</div>
            <div class="item-input-wrap">
              <input type="email" name="email" placeholder="Your Email">
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</form>

কীভাবে কাজ করে:

data-store="true": ফর্মের ডেটা স্বয়ংক্রিয়ভাবে সংরক্ষণ করে।
data-store-name: ফর্ম ডেটা localStorage-এ সংরক্ষণের জন্য একটি অনন্য নাম প্রদান করে।

সংরক্ষিত ডেটা মুছে ফেলা:

app.form.removeFormData('myFormData');

Input Masking

Input Masking ব্যবহারকারীর ইনপুটের জন্য একটি নির্দিষ্ট প্যাটার্ন সেট করতে সাহায্য করে। এটি ফর্ম ইনপুটগুলোর ভ্যালিডেশন নিশ্চিত করতে এবং ব্যবহারকারীদের অভিজ্ঞতা উন্নত করতে ব্যবহৃত হয়।

Input Masking কীভাবে কাজ করে?

Input Masking এর মাধ্যমে ইনপুট ফিল্ডে এমন নিয়ম আরোপ করা হয় যা ব্যবহারকারীকে নির্দিষ্ট ফরম্যাটে ডেটা দিতে বাধ্য করে। উদাহরণস্বরূপ, ফোন নম্বর, তারিখ, অথবা ক্রেডিট কার্ড নম্বর।

Input Masking উদাহরণ (JavaScript ব্যবহার করে):

<form>
  <div class="list">
    <ul>
      <li>
        <div class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">Phone Number</div>
            <div class="item-input-wrap">
              <input type="text" id="phone-number" placeholder="(123) 456-7890">
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</form>

Input Mask সক্রিয় করা:

var phoneInput = document.getElementById('phone-number');
app.input.mask(phoneInput, '(000) 000-0000');

(000) 000-0000: এই প্যাটার্ন অনুযায়ী ইনপুট সীমাবদ্ধ করা হবে।
app.input.mask: Framework7 এর ইনপুট মাস্ক ফাংশন ব্যবহার করা হয়।

Input Masking প্লাগইন ব্যবহার

Framework7-এ ইনপুট মাস্কিংয়ের জন্য তৃতীয় পক্ষের প্লাগইন ব্যবহার করা যায়, যেমন Inputmask.js।

উদাহরণ:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8/jquery.inputmask.min.js"></script>

<form>
  <div class="list">
    <ul>
      <li>
        <div class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">Date</div>
            <div class="item-input-wrap">
              <input type="text" id="date-input" placeholder="DD/MM/YYYY">
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</form>

<script>
  $(document).ready(function () {
    $('#date-input').inputmask('99/99/9999'); // Date format
  });
</script>

Form Storage এবং Input Masking ব্যবহারের সুবিধা

Form Storage:

ডেটা লস কমানো: ব্রাউজার রিফ্রেশ হলেও ডেটা হারায় না।
ব্যবহারকারীর অভিজ্ঞতা উন্নত: ব্যবহারকারী ফর্ম পূরণে বিরক্তি এড়ায়।
স্থানীয় ডেটা সংরক্ষণ: সার্ভার সংযোগ ছাড়াই ডেটা সংরক্ষণ।

Input Masking:

ডেটার সঠিকতা নিশ্চিত: ব্যবহারকারীর ইনপুট নির্ধারিত ফরম্যাটে বাধ্যতামূলক।
সহজ ফরম্যাটিং: ফর্ম পূরণে সহায়তা করে।
ভ্যালিডেশন সহজতর: ইনপুট ডেটার প্রাথমিক যাচাই সহজ হয়।

Framework7 এর Form Storage এবং Input Masking ফিচার ব্যবহার করে ডেভেলপাররা দ্রুত এবং কার্যকর ফর্ম তৈরি করতে পারেন। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করার পাশাপাশি অ্যাপ্লিকেশন ডেটা ব্যবস্থাপনাকে আরও সহজ করে তোলে।

Content added By

SATT Academy

Framework7 এর পরিচিতি Framework7 সেটআপ এবং ইনস্টলেশন Framework7 এর বেসিক কনফিগারেশন Framework7 Routes এবং Navigation Framework7 Layouts এবং Components

Web Development Framework7 এর সঙ্গে Form Handling এবং Validation গাইড ও নোট

Framework7 দিয়ে ফর্ম তৈরি

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

Framework7 দিয়ে ফর্ম ডেটা হ্যান্ডলিং

উদাহরণ: ফর্ম ডেটা সংগ্রহ করা

convertToData() API

Framework7 দিয়ে ফর্ম ভ্যালিডেশন

১. HTML এর required অ্যাট্রিবিউট ব্যবহার

২. কাস্টম ভ্যালিডেশন

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

Framework7 এর Form Validation সহ উদাহরণ কোড

Form তৈরি এবং পরিচালনা

Framework7 দিয়ে ফর্ম তৈরির ধাপ

১. ফর্মের মৌলিক গঠন

উদাহরণ:

২. ইনপুট টাইপ সমর্থন

উদাহরণ (চেকবক্স এবং রেডিও):

৩. ফর্ম ভ্যালিডেশন (Validation)

উদাহরণ:

৪. ডায়নামিক ফর্ম পরিচালনা

উদাহরণ:

৫. সাবমিশন এবং AJAX কল

উদাহরণ:

৬. UI উন্নত করার উপায়

Framework7 এর মাধ্যমে ফর্ম ব্যবহারের সুবিধা

Input Fields, Select, Checkbox, এবং Radio Button ব্যবহারের নিয়ম

Input Fields

Input Field তৈরি

উদাহরণ:

Input Field বৈশিষ্ট্য

Input Field এর অন্যান্য উদাহরণ:

Select (Dropdown)

Select Field তৈরি

উদাহরণ:

Select Field বৈশিষ্ট্য

মাল্টিপল সিলেকশন উদাহরণ:

Checkbox

Checkbox তৈরি

উদাহরণ:

Checkbox বৈশিষ্ট্য

উদাহরণ:

Radio Button

Radio Button তৈরি

উদাহরণ:

Radio Button বৈশিষ্ট্য

উদাহরণ:

ফর্ম তৈরি উদাহরণ

উদাহরণ:

Form Data Validate করা এবং Submit করা

ফর্ম তৈরি করা

উদাহরণ:

ফর্ম ডেটা ভ্যালিডেট করা

বিল্ট-ইন ভ্যালিডেশন ব্যবহার করা

উদাহরণ:

কাস্টম জাভাস্ক্রিপ্ট দিয়ে ভ্যালিডেশন

ফর্ম ডেটা সাবমিট করা

Framework7 এর মাধ্যমে ফর্ম ডেটা সংগ্রহ করা

উদাহরণ:

ফর্ম ডেটা সাবমিট করা (AJAX ব্যবহার করে)

ফর্ম ডেটা ভ্যালিডেশন এবং সাবমিশনের প্রক্রিয়া

সম্পূর্ণ কোড:

Form Storage এবং Input Masking

Form Storage

Form Storage কীভাবে কাজ করে?

ফর্ম স্টোরেজ সক্রিয় করার উদাহরণ:

কীভাবে কাজ করে:

সংরক্ষিত ডেটা মুছে ফেলা:

Input Masking

Input Masking কীভাবে কাজ করে?

Input Masking উদাহরণ (JavaScript ব্যবহার করে):

Input Mask সক্রিয় করা:

Input Masking প্লাগইন ব্যবহার

উদাহরণ:

Form Storage এবং Input Masking ব্যবহারের সুবিধা

Form Storage:

Input Masking:

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

`convertToData()` API

১. HTML এর `required` অ্যাট্রিবিউট ব্যবহার