জাভাস্ক্রিপ্টে ফর্ম ভ্যালিডেশন: খালি ইনপুট ফিল্ড চেক করা

জাভাস্ক্রিপ্ট দিয়ে ফর্ম ভ্যালিডেশন করে খালি ইনপুট ফিল্ড চেক করার কোড।

উদাহরণ

<!DOCTYPE html> 
<html> 
<head></head> 
<h1>JavaScript empty input field validation example</h1> 
<form name="Form1" onsubmit="return emptyValidation()" required> 
  Name: <input type="text" name="firstName" /> 
  <input type="submit" value="Submit" /> 
</form> 
<h2>Submit the form empty to see the validation performed</h2> 
<script> 
  function emptyValidation() {
    var formField = document.forms["Form1"]["firstName"].value;
    if (formField == "" || formField == null) {
      alert("Name must be filled out");
      return false;
    }
    return true;
  }
</script> 
</body> </html>

আউটপুট

ফর্ম খালি সাবমিট করলে অ্যালার্ট: "Name must be filled out" এবং সাবমিশন ব্লক হয়।

মূল কোডের বাগ ফিক্স

মূল কোডে x == null ব্যবহার করা হয়েছিল যা ReferenceError দেবে (x ডিক্লেয়ার্ড নেই)। সঠিক: formField == null বা !formField.trim()।

মডার্ন ভ্যালিডেশন প্যাটার্ন (HTML5 + JS)

<form id="myForm" novalidate>
  <input type="text" name="firstName" required minlength="2" />
  <span class="error" aria-live="polite"></span>
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', (e) => {
    const input = e.target.firstName;
    if (!input.value.trim()) {
      input.setCustomValidity('Name is required');
      input.reportValidity();
      e.preventDefault();
    } else {
      input.setCustomValidity('');
    }
  });
</script>

বেস্ট প্র্যাকটিস

• HTML5 required, minlength, pattern অ্যাট্রিবিউট ব্যবহার করুন
• novalidate দিয়ে ব্রাউজার ডিফল্ট ভ্যালিডেশন অফ করে কাস্টম করুন
• ইনলাইন onsubmit-এর পরিবর্তে addEventListener ব্যবহার করুন
• অ্যাক্সেসিবিলিটির জন্য aria-live, aria-invalid ব্যবহার করুন
• সার্ভার-সাইড ভ্যালিডেশন অবশ্য রাখুন (ক্লায়েন্ট বাইপাস করা যায়)