Blog

✅ JavaScript Validation API পরিচিতি

JavaScript Validation API ব্যবহার করে আমরা form এর ইনপুট ফিল্ডগুলোর মান নির্ধারণ করতে পারি এবং ব্রাউজার নির্দিষ্ট ভুল ধরতে পারে। এর মাধ্যমে required, type, pattern, maxlength ইত্যাদি অ্যাট্রিবিউট যুক্ত করে ইনপুটের ভ্যালিডেশন নিশ্চিত করা যায়। আমরা চাইলে JavaScript দিয়ে formElement.checkValidity() বা formElement.reportValidity() ব্যবহার করে কাস্টম চেকও করতে পারি।

উদাহরণ ১: checkValidity()

এই কোডে একটি ফর্ম আছে যেটিতে ইনপুট ফিল্ডে কিছু না লিখে সাবমিট করলে ভ্যালিডেশন চেক হবে:

<form id="myForm">
  Name: <input type="text" id="name" required>
  <br><br>
  <button type="button" onclick="validateForm()">Submit</button>
</form>

<script>
function validateForm() {
  const form = document.getElementById("myForm");
  if (form.checkValidity()) {
    alert("Form is valid!");
  } else {
    alert("Please fill out all required fields.");
  }
}
</script>

ব্যাখ্যা: এখানে checkValidity() মেথড চেক করছে ফর্মটি সঠিকভাবে পূরণ হয়েছে কিনা। যদি name ফিল্ড খালি থাকে, তাহলে ফর্ম ভ্যালিড নয়।

উদাহরণ ২: reportValidity()

এই কোডে reportValidity() ব্যবহার করে ইউজারকে ব্রাউজার থেকে সরাসরি ভ্যালিডেশন ম্যাসেজ দেখানো হচ্ছে:

<form id="myForm">
  Email: <input type="email" id="email" required>
  <br><br>
  <button type="button" onclick="checkEmail()">Check Email</button>
</form>

<script>
function checkEmail() {
  const form = document.getElementById("myForm");
  form.reportValidity(); // এটি ভুল থাকলে ব্রাউজার মেসেজ দেখাবে
}
</script>

ব্যাখ্যা: এখানে reportValidity() মেথড ফর্মটি যাচাই করে এবং যদি কোনো ইনপুট ভুল হয় (যেমন ভুল ইমেইল বা খালি ফিল্ড), তাহলে ব্রাউজার সরাসরি ইউজারকে ভুলের ম্যাসেজ দেখায়।

উদাহরণ ৩: Custom Validity Message

আপনি চাইলে নিজের মতো করে কাস্টম ম্যাসেজও সেট করতে পারেন:

<form id="customForm">
  Username: <input type="text" id="username">
  <br><br>
  <button type="button" onclick="customValidate()">Submit</button>
</form>

<script>
function customValidate() {
  const input = document.getElementById("username");
  if (input.value.length < 5) {
    input.setCustomValidity("Username অবশ্যই ৫ অক্ষরের বেশি হতে হবে।");
  } else {
    input.setCustomValidity(""); // ভুল না থাকলে ক্লিয়ার করে দাও
  }

  input.reportValidity();
}
</script>

ব্যাখ্যা: এখানে আমরা setCustomValidity() ব্যবহার করে নিজের একটি কাস্টম মেসেজ দেখাচ্ছি যদি ইউজারনেমটি ৫ অক্ষরের কম হয়। এর মাধ্যমে আরো ইউজার-ফ্রেন্ডলি ফর্ম তৈরি করা যায়।

উপসংহার

JavaScript Validation API ব্যবহার করে ইউজার ইনপুট ত্রুটি প্রতিরোধে দারুণ সুবিধা পাওয়া যায়। checkValidity(), reportValidity(), এবং setCustomValidity() মেথডগুলো ফর্ম যাচাইয়ের ক্ষেত্রে খুবই কার্যকর। আপনি চাইলে HTML ফর্মের অ্যাট্রিবিউটের সাথেও ব্যবহার করে জটিল validation না করেই স্মার্ট ইউজার ইন্টারঅ্যাকশন পেতে পারেন।