ওয়েব ফর্মের সঠিক এবং নিরাপদ ডাটা সংগ্রহ করা ও ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য ফর্ম ভ্যালিডেশন অপরিহার্য। HTML5 ফর্ম ভ্যালিডেশন ডিফল্টভাবে বিভিন্ন ধরনের ভ্যালিডেশন প্রদান করে এবং ডেভেলপারদের কাস্টম এরর মেসেজ প্রদানের সুযোগ দেয়। এই লেখায় আমরা HTML5 এর ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ কিভাবে তৈরি করতে হয় তা বিস্তারিতভাবে আলোচনা করব।
১. HTML5 ফর্ম ভ্যালিডেশন কী?
ফর্ম ভ্যালিডেশন হলো একটি প্রক্রিয়া যার মাধ্যমে ওয়েব ফর্মে প্রবেশ করা তথ্যের সঠিকতা এবং পূর্ণতা যাচাই করা হয়। HTML5 ফর্ম ভ্যালিডেশন ব্রাউজার-সাইডে ঘটে, যা ব্যবহারকারীদেরকে তাড়াতাড়ি ত্রুটি শনাক্ত করতে সাহায্য করে এবং সার্ভারে অতিরিক্ত লোড কমায়।
২. HTML5 এর বিল্ট-ইন ভ্যালিডেশন অ্যাট্রিবিউটসমূহ
HTML5 বিভিন্ন ভ্যালিডেশন অ্যাট্রিবিউট সরবরাহ করে যা ফর্ম ফিল্ডের ইনপুট যাচাই করতে ব্যবহৃত হয়:
required: ইনপুট ফিল্ড অবশ্যই পূরণ করতে হবে।
<input type="text" name="username" required>type: ইনপুটের ধরন নির্ধারণ করে (যেমন email, number, url, ইত্যাদি)।
<input type="email" name="email" required>minlength এবং maxlength: ইনপুটের ন্যূনতম এবং সর্বোচ্চ দৈর্ঘ্য নির্ধারণ করে।
<input type="password" name="password" minlength="8" maxlength="16" required>pattern: নির্দিষ্ট প্যাটার্ন অনুসারে ইনপুট যাচাই করে।
<input type="text" name="zipcode" pattern="\d{5}" required>min এবং max: নম্বর ইনপুটের জন্য ন্যূনতম এবং সর্বোচ্চ মান নির্ধারণ করে।
<input type="number" name="age" min="18" max="99" required>step: নম্বর ইনপুটের স্টেপ ভ্যালু নির্ধারণ করে।
<input type="number" name="quantity" min="1" max="10" step="1" required>
৩. কাস্টম এরর মেসেজ তৈরি করা
HTML5 এর ডিফল্ট এরর মেসেজগুলি প্রাথমিকভাবে কার্যকর হলেও, কাস্টম এরর মেসেজ ব্যবহার করে ফর্মের ইউজার ইন্টারফেস আরও উন্নত করা যায়। কাস্টম এরর মেসেজ প্রদানের জন্য আমরা JavaScript ব্যবহার করতে পারি।
উদাহরণ:
ধরা যাক, আমাদের একটি ফর্ম আছে যেখানে ব্যবহারকারীকে একটি ইমেইল ঠিকানা প্রদান করতে হবে এবং আমরা কাস্টম এরর মেসেজ প্রদর্শন করতে চাই।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>ফর্ম ভ্যালিডেশন উদাহরণ</title>
<style>
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<form id="myForm" novalidate>
<label for="email">ইমেইল:</label>
<input type="email" id="email" name="email" required>
<span class="error" id="emailError"></span>
<br><br>
<input type="submit" value="জমা দিন">
</form>
<script>
const form = document.getElementById('myForm');
const email = document.getElementById('email');
const emailError = document.getElementById('emailError');
form.addEventListener('submit', function(event) {
// ফর্ম জমা দেওয়ার ডিফল্ট আচরণ বন্ধ করা
event.preventDefault();
// এরর মেসেজ রিসেট করা
emailError.textContent = '';
// ইমেইল ফিল্ডের ভ্যালিডেশন
if (!email.validity.valid) {
if (email.validity.valueMissing) {
emailError.textContent = 'ইমেইল অবশ্যই পূরণ করতে হবে।';
} else if (email.validity.typeMismatch) {
emailError.textContent = 'অনুগ্রহ করে একটি সঠিক ইমেইল ঠিকানা প্রদান করুন।';
}
// ফোকাস ইনপুট ফিল্ডে সেট করা
email.focus();
} else {
// ফর্ম জমা দেওয়া
alert('ফর্ম সফলভাবে জমা হয়েছে!');
form.submit();
}
});
</script>
</body>
</html>
ব্যাখ্যা:
- novalidate অ্যাট্রিবিউট ব্যবহার করে ব্রাউজারের ডিফল্ট ভ্যালিডেশন বন্ধ করা হয়েছে যাতে কাস্টম ভ্যালিডেশন কার্যকর করা যায়।
- ফর্ম জমা দেওয়ার সময় JavaScript ইভেন্ট লিসেনার ব্যবহার করে ইনপুট যাচাই করা হয়।
- ভ্যালিডেশন ত্রুটি থাকলে কাস্টম এরর মেসেজ প্রদর্শন করা হয় এবং ফোকাস ইনপুট ফিল্ডে সেট করা হয়।
- ভ্যালিড ইনপুট থাকলে ফর্ম সফলভাবে জমা হয়।
৪. আরও কাস্টম ভ্যালিডেশন উদাহরণ
পাসওয়ার্ড এবং কনফার্ম পাসওয়ার্ড ভ্যালিডেশন:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>পাসওয়ার্ড ভ্যালিডেশন</title>
<style>
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<form id="passwordForm" novalidate>
<label for="password">পাসওয়ার্ড:</label>
<input type="password" id="password" name="password" minlength="8" required>
<span class="error" id="passwordError"></span>
<br><br>
<label for="confirmPassword">পাসওয়ার্ড নিশ্চিত করুন:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<span class="error" id="confirmPasswordError"></span>
<br><br>
<input type="submit" value="জমা দিন">
</form>
<script>
const passwordForm = document.getElementById('passwordForm');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
const passwordError = document.getElementById('passwordError');
const confirmPasswordError = document.getElementById('confirmPasswordError');
passwordForm.addEventListener('submit', function(event) {
event.preventDefault();
passwordError.textContent = '';
confirmPasswordError.textContent = '';
let valid = true;
// পাসওয়ার্ড ভ্যালিডেশন
if (!password.validity.valid) {
if (password.validity.valueMissing) {
passwordError.textContent = 'পাসওয়ার্ড অবশ্যই পূরণ করতে হবে।';
} else if (password.validity.tooShort) {
passwordError.textContent = `পাসওয়ার্ড কমপক্ষে ${password.minLength} অক্ষর হওয়া উচিত।`;
}
valid = false;
}
// কনফার্ম পাসওয়ার্ড ভ্যালিডেশন
if (confirmPassword.value !== password.value) {
confirmPasswordError.textContent = 'পাসওয়ার্ড মিলছে না।';
valid = false;
}
if (valid) {
alert('ফর্ম সফলভাবে জমা হয়েছে!');
passwordForm.submit();
}
});
</script>
</body>
</html>
ব্যাখ্যা:
- ব্যবহারকারীর পাসওয়ার্ড এবং কনফার্ম পাসওয়ার্ড ফিল্ডের মান মিলছে কিনা তা যাচাই করা হয়েছে।
- পাসওয়ার্ডের ন্যূনতম দৈর্ঘ্য নিশ্চিত করা হয়েছে।
- ভ্যালিডেশন ত্রুটি থাকলে কাস্টম এরর মেসেজ প্রদর্শন করা হয়েছে।
৫. Validity API এর ব্যবহার
HTML5 এর Validity API ব্যবহার করে ইনপুট ফিল্ডের বিভিন্ন ভ্যালিডেশন স্টেট সম্পর্কে বিস্তারিত তথ্য পাওয়া যায়।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Validity API উদাহরণ</title>
<style>
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<form id="validityForm" novalidate>
<label for="username">ব্যবহারকারীর নাম:</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<span class="error" id="usernameError"></span>
<br><br>
<input type="submit" value="জমা দিন">
</form>
<script>
const validityForm = document.getElementById('validityForm');
const username = document.getElementById('username');
const usernameError = document.getElementById('usernameError');
validityForm.addEventListener('submit', function(event) {
event.preventDefault();
usernameError.textContent = '';
if (!username.validity.valid) {
if (username.validity.valueMissing) {
usernameError.textContent = 'ব্যবহারকারীর নাম অবশ্যই পূরণ করতে হবে।';
} else if (username.validity.patternMismatch) {
usernameError.textContent = 'ব্যবহারকারীর নাম কমপক্ষে ৩টি অক্ষর এবং শুধুমাত্র অক্ষর হতে হবে।';
}
} else {
alert('ফর্ম সফলভাবে জমা হয়েছে!');
validityForm.submit();
}
});
</script>
</body>
</html>
ব্যাখ্যা:
- pattern="[A-Za-z]{3,}" দ্বারা ব্যবহারকারীর নাম কমপক্ষে ৩টি অক্ষর এবং শুধুমাত্র অক্ষর হতে হবে বলে নির্ধারণ করা হয়েছে।
- Validity API ব্যবহার করে ইনপুট ফিল্ডের ভ্যালিডেশন স্টেট যাচাই করা হয়েছে এবং উপযুক্ত এরর মেসেজ প্রদর্শন করা হয়েছে।
৬. বেস্ট প্র্যাকটিস
- সঠিক ইনপুট টাইপ ব্যবহার করুন: যেমন email, url, number ইত্যাদি ব্যবহার করে ডাটা ভ্যালিডেশন সহজ করুন।
- ব্যবহারকারী বান্ধব এরর মেসেজ প্রদান করুন: স্পষ্ট এবং বোধগম্য ভাষায় এরর মেসেজ লিখুন।
- জাভাস্ক্রিপ্ট ব্যাকআপ ভ্যালিডেশন: যদিও HTML5 ভ্যালিডেশন কার্যকর, তবে জাভাস্ক্রিপ্ট ব্যবহার করে অতিরিক্ত ভ্যালিডেশন নিশ্চিত করুন।
- অ্যাক্সেসিবিলিটি নিশ্চিত করুন: এরর মেসেজগুলি স্ক্রিন রিডার ব্যবহারকারীদের জন্যও উপলব্ধ করুন।
- ফর্ম ডিজাইন: ফর্ম ফিল্ডগুলিকে সুসংহতভাবে সাজান এবং যথাযথ লেবেল ব্যবহার করুন।
HTML5 ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ ব্যবহার করে ওয়েব ফর্মগুলিকে আরও শক্তিশালী, নিরাপদ এবং ব্যবহারকারী বান্ধব করা যায়। ডিফল্ট ভ্যালিডেশন অ্যাট্রিবিউটগুলি দ্রুত ও সহজ ভ্যালিডেশন প্রদান করে, যেখানে কাস্টম এরর মেসেজ ব্যবহার করে ফর্মের ইউজার ইন্টারফেস উন্নত করা যায়। ওয়েব ডেভেলপারদের জন্য এই টেকনিকগুলি শেখা এবং প্রয়োগ করা অত্যন্ত গুরুত্বপূর্ণ যাতে তারা ব্যবহারকারীদেরকে একটি ভালো ফর্ম পূরণ অভিজ্ঞতা প্রদান করতে পারেন।
টিপস:
- ডকুমেন্টেশন রেফারেন্স: MDN Web Docs - Constraint Validation আরও বিস্তারিত জানতে।
- প্র্যাকটিস করুন: বিভিন্ন ফর্ম তৈরি করে বিভিন্ন ভ্যালিডেশন অ্যাট্রিবিউট এবং কাস্টম এরর মেসেজ প্রয়োগ করুন।
- রেসপনসিভ ভ্যালিডেশন: বিভিন্ন ডিভাইসে ফর্ম কিভাবে কাজ করে তা নিশ্চিত করতে টেস্ট করুন।
Read more
