অধ্যায় ২৬: JavaScript Form Validation (বাংলায়)

 

এই অধ্যায়ে শিখবো ওয়েব ফর্মে ইউজারদের ইনপুট সঠিক কিনা তা যাচাই করার পদ্ধতি, যাতে ভুল বা অসম্পূর্ণ তথ্য সাবমিট না হয়।

---

১. Form Validation কী?

ফর্ম ভ্যালিডেশন হলো এমন প্রক্রিয়া যার মাধ্যমে ইউজার যে তথ্য দিয়েছে তা সঠিক ও পূর্ণ কিনা তা পরীক্ষা করা হয়।

---

২. Validation করার কারণ

• ভুল তথ্য থেকে সুরক্ষা

• ভালো ইউজার এক্সপেরিয়েন্স

• ডাটাবেসে সঠিক তথ্য সংরক্ষণ

• সার্ভার লোড কমানো

---

৩. HTML5 এর বেসিক ভ্যালিডেশন

Required ফিল্ড

<input type="text" name="username" required>

Email টাইপ

<input type="email" name="email" required>

Pattern (নিয়ম)

<input type="text" pattern="[A-Za-z]{3,}" title="কমপক্ষে ৩টি অক্ষর">

---

৪. JavaScript দিয়ে ভ্যালিডেশন

উদাহরণ: ইউজারনেম চেক করা (খালি না)

<form id="myForm">
  <input type="text" id="username" placeholder="ইউজারনেম">
  <button type="submit">সাবমিট</button>
  <p id="error"></p>
</form>

<script>
  const form = document.getElementById('myForm');
  const username = document.getElementById('username');
  const error = document.getElementById('error');

  form.addEventListener('submit', function(e) {
    error.textContent = '';
    if(username.value.trim() === '') {
      e.preventDefault();  // সাবমিট বন্ধ করবে
      error.textContent = 'ইউজারনেম অবশ্যই দিতে হবে।';
    }
  });
</script>

---

৫. একাধিক ফিল্ড চেক করা

form.addEventListener('submit', function(e) {
  error.textContent = '';
  if(username.value.trim() === '') {
    e.preventDefault();
    error.textContent = 'ইউজারনেম দিতে হবে।';
    return;
  }
  
  let email = document.getElementById('email');
  if(email.value.trim() === '' || !email.value.includes('@')) {
    e.preventDefault();
    error.textContent = 'সঠিক ইমেইল দিন।';
  }
});

---

৬. ফাংশন দিয়ে ভ্যালিডেশন সহজ করা

function isValidEmail(email) {
  let re = /\S+@\S+\.\S+/;
  return re.test(email);
}

---

৭. উদাহরণ: ফুল ফর্ম ভ্যালিডেশন

<form id="form">
  <input type="text" id="username" placeholder="ইউজারনেম"><br>
  <input type="email" id="email" placeholder="ইমেইল"><br>
  <button type="submit">সাবমিট</button>
  <p id="msg"></p>
</form>

<script>
  const form = document.getElementById('form');
  const msg = document.getElementById('msg');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const username = document.getElementById('username').value.trim();
    const email = document.getElementById('email').value.trim();

    if(username === '') {
      msg.textContent = 'ইউজারনেম দিন';
      return;
    }
    if(!/\S+@\S+\.\S+/.test(email)) {
      msg.textContent = 'সঠিক ইমেইল দিন';
      return;
    }
    msg.textContent = 'সফলভাবে সাবমিট হয়েছে!';
  });
</script>

---

এই অধ্যায়ের শেষে আপনি শিখলেন:

• ফর্ম ভ্যালিডেশনের গুরুত্ব

• HTML5 এর বেসিক ভ্যালিডেশন

• JavaScript দিয়ে কাস্টম ভ্যালিডেশন

• ফাংশন ব্যবহার করে কোড পরিষ্কার রাখা

---

পরবর্তী অধ্যায়:
অধ্যায় ২৭: JavaScript DOM Manipulation - উন্নত কৌশল

লিখুন: “অধ্যায় ২৭ শুরু করো” — তাহলে শিখবো DOM-এ আরও উন্নত কাজ কীভাবে করা যায়।