ফর্ম ভ্যালিডেশন ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ। ব্যবহারকারীরা যখন ফর্ম পূরণ করে, তখন নিশ্চিত করতে হয় যে তারা সঠিক তথ্য প্রদান করছে। জাভাস্ক্রিপ্ট দিয়ে ফর্ম ভ্যালিডেশন করার মাধ্যমে এই কাজটি সহজে করা যায়। এই টিউটোরিয়ালে আমরা HTML এবং জাভাস্ক্রিপ্ট ব্যবহার করে কিভাবে ফর্ম ভ্যালিডেশন করা যায় তা বিস্তারিতভাবে আলোচনা করব।
প্রথমে, একটি সাধারণ HTML ফর্ম তৈরি করা যাক। এখানে একটি উদাহরণ দেওয়া হলো:
<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ফর্ম ভ্যালিডেশন উদাহরণ</title> <style> .error { color: red; } </style> </head> <body> <h1>ফর্ম ভ্যালিডেশন উদাহরণ</h1> <form id="myForm"> <label for="name">নাম:</label> <input type="text" id="name" name="name"> <span id="nameError" class="error"></span><br><br> <label for="email">ইমেইল:</label> <input type="email" id="email" name="email"> <span id="emailError" class="error"></span><br><br> <label for="password">পাসওয়ার্ড:</label> <input type="password" id="password" name="password"> <span id="passwordError" class="error"></span><br><br> <input type="submit" value="জমা দিন"> </form> <script src="validation.js"></script> </body> </html>
এখানে আমরা একটি ফর্ম তৈরি করেছি যার মধ্যে নাম, ইমেইল এবং পাসওয়ার্ডের জন্য ইনপুট ফিল্ড রয়েছে। প্রতিটি ইনপুট ফিল্ডের পাশে একটি span ট্যাগ রয়েছে যা ত্রুটি বার্তাগুলি প্রদর্শন করবে।
ফর্ম ভ্যালিডেশনের জন্য আমরা একটি validation.js নামে একটি ফাইল তৈরি করব। এই ফাইলটি আমাদের HTML ফর্মে যুক্ত করা হয়েছে। এখন আমরা ফর্ম ভ্যালিডেশন এর জাভাস্ক্রিপ্ট লজিক গুলো লিখব।
validation.js ফাইলে নিম্নলিখিত কোডটি যোগ করুন:
document.getElementById('myForm').addEventListener('submit', function(event) { // ত্রুটি বার্তাগুলি প্রাথমিকভাবে খালি করা let isValid = true; // নাম ভ্যালিডেশন const name = document.getElementById('name').value; const nameError = document.getElementById('nameError'); if (name === '') { nameError.textContent = 'নাম ফাঁকা থাকতে পারে না।'; isValid = false; } else { nameError.textContent = ''; } // ইমেইল ভ্যালিডেশন const email = document.getElementById('email').value; const emailError = document.getElementById('emailError'); const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(email)) { emailError.textContent = 'সঠিক ইমেইল ঠিকানা প্রদান করুন।'; isValid = false; } else { emailError.textContent = ''; } // পাসওয়ার্ড ভ্যালিডেশন const password = document.getElementById('password').value; const passwordError = document.getElementById('passwordError'); if (password.length < 6) { passwordError.textContent = 'পাসওয়ার্ডে কমপক্ষে ৬টি অক্ষর থাকতে হবে।'; isValid = false; } else { passwordError.textContent = ''; } // যদি কোনো ত্রুটি থাকে তাহলে ফর্ম জমা না দেয়ার ব্যবস্থা if (!isValid) { event.preventDefault(); } });
এই স্ক্রিপ্টটি ফর্ম জমা দেওয়ার সময় বিভিন্ন ইনপুট ক্ষেত্রের জন্য ভ্যালিডেশন পরীক্ষা করে। যদি কোনো ত্রুটি পাওয়া যায়, তাহলে ত্রুটি বার্তাটি প্রদর্শিত হবে এবং ফর্ম জমা দেওয়া বন্ধ হবে।
এখন আমরা ক্রমান্বয়ে এই ফর্মের বিভিন্ন অংশ গুলো নিয়ে আলোচনা করব। নিচে এই কোড গুলোর বিশ্লেষণ দেখুন।
নিচের এই কোড গুলো ফর্মের সাবমিট ইভেন্ট এর নির্দেশ মানে এবং আমাদের ভ্যালিডেশন লজিকটি চালায়।
document.getElementById('myForm').addEventListener('submit', function(event) {
নামের ইনপুট ফিল্ড যেন ফাঁকা না থাকে তা, জাভাস্ক্রিপ্ট কোড গুলোর এই অংশে আমরা যাচাই করি । যদি ইনপুট ফিল্ড ফাঁকা থাকে, তাহলে ত্রুটি বার্তা বা error message প্রদর্শিত হয়।
নিচে এই কাজের জন্য জাভাস্ক্রিপ্ট কোড গুলো দেখুন।
const name = document.getElementById('name').value; const nameError = document.getElementById('nameError'); if (name === '') { nameError.textContent = 'নাম ফাঁকা থাকতে পারে না।'; isValid = false; } else { nameError.textContent = ''; }
জাভাস্ক্রিপ্ট কোড গুলোর এই অংশে আমরা ইমেইল ইনপুট ফিল্ডটি একটি নির্দিষ্ট প্যাটার্নের সাথে তুলনা করি। প্যাটার্নটি একটি সাধারণ ইমেইল এড্রেস ভ্যালিডেশন নিয়ম।
নিচে ইমেইল এড্রেস ভ্যালিডেশন এর জন্য জাভাস্ক্রিপ্ট কোড গুলো দেখুন।
const email = document.getElementById('email').value; const emailError = document.getElementById('emailError'); const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(email)) { emailError.textContent = 'সঠিক ইমেইল ঠিকানা প্রদান করুন।'; isValid = false; } else { emailError.textContent = ''; }
এখানে পাসওয়ার্ডের দৈর্ঘ্য পরীক্ষা করা হয়েছে। যদি পাসওয়ার্ডের দৈর্ঘ্য ৬ টির কম হয়, তাহলে ত্রুটি বার্তা বা error message প্রদর্শিত হয়।
নিচে পাসওয়ার্ড ফিল্ড এর ভ্যালিডেশন এর জন্য জাভাস্ক্রিপ্ট কোড গুলো দেখুন।
const password = document.getElementById('password').value; const passwordError = document.getElementById('passwordError'); if (password.length < 6) { passwordError.textContent = 'পাসওয়ার্ডে কমপক্ষে ৬টি অক্ষর থাকতে হবে।'; isValid = false; } else { passwordError.textContent = ''; }
এই জাভাস্ক্রিপ্ট কোড গুলো দিয়ে, ফর্মে যদি কোনো ত্রুটি বা error থাকে, তাহলে event.preventDefault() ফাংশনটি কল করে ফর্ম জমা দেয়া বন্ধ করা হয়।
নিচে ফর্ম জমা দেওয়া নিয়ন্ত্রণ করার জন্য জাভাস্ক্রিপ্ট কোড গুলো দেখুন।
if (!isValid) { event.preventDefault(); }
ওপরের উদাহরণ এর কোড গুলো একটি সাধারণ ফর্ম এর ভ্যালিডেশন এর জন্য তৈরি করা অয়েচে। এইচটিএমএল ফর্মের আরও উন্নত ভ্যালিডেশন করতে চাইলে আমরা আরও কিছু যাচাইকরণ এর জন্য জাভাস্ক্রিপ্ট কোড যোগ করতে পারি। যেমন নিম্মরুপ -
নিচে একটি উদাহরণ দেওয়া হলো যেখানে পাসওয়ার্ড শক্তি যাচাইকরণ যুক্ত করা হয়েছে।
// পাসওয়ার্ড শক্তি যাচাইকরণ const passwordStrength = document.getElementById('passwordStrength'); if (password.length < 8) { passwordError.textContent = 'পাসওয়ার্ডে কমপক্ষে ৮টি অক্ষর থাকতে হবে।'; passwordStrength.textContent = ''; isValid = false; } else { passwordError.textContent = ''; // পাসওয়ার্ড শক্তি যাচাইকরণ let strength = 'দুর্বল'; const hasUpper = /[A-Z]/.test(password); const hasLower = /[a-z]/.test(password); const hasNumber = /[0-9]/.test(password); const hasSpecial = /[!@#$%^&*()_+{}\[\]:;"'<>,.?~\\/-]/.test(password); const totalCriteria = [hasUpper, hasLower, hasNumber, hasSpecial].filter(Boolean).length; if (totalCriteria === 4) { strength = 'মাঝারি'; } else if (totalCriteria === 3) { strength = 'মধ্যম'; } else if (totalCriteria === 2) { strength = 'শক্তিশালী'; } passwordStrength.textContent = `পাসওয়ার্ড শক্তি: ${strength}`; }
জাভাস্ক্রিপ্ট দিয়ে ফর্ম ভ্যালিডেশন ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ। সঠিক ভ্যালিডেশন ব্যবহারকারীকে সঠিক তথ্য প্রদান করতে সহায়তা করে এবং ওয়েবসাইটের কার্যকারিতা উন্নত করে। এই টিউটোরিয়ালে আমরা একটি সাধারণ ফর্ম ভ্যালিডেশন উদাহরণ দেখেছি, যা আমরা আমাদের প্রয়োজন অনুযায়ী পরিবর্তন এবং উন্নত করতে পারি।