আগের পর্বে আমরা Event Handling শিখেছি, সংক্ষেপে ফর্ম সাবমিটও দেখেছি। আজকে আরেকটু বিস্তারিতভাবে শিখবো ফর্মের একাধিক ইনপুট থেকে একসাথে ডেটা নেওয়া, এবং সেই ডেটা সাবমিট করার আগে JavaScript দিয়ে যাচাই (validation) করা।
Input-এর মান পড়া — .value
আগের পর্বে দেখেছিলাম .value দিয়ে input-এর মান পড়া যায়। এবার একাধিক ইনপুট নিয়ে কাজ করি:
<form id="signupForm">
<input type="text" id="name" placeholder="নাম">
<input type="email" id="email" placeholder="ইমেইল">
<button type="submit">সাবমিট</button>
</form>
<script>
const form = document.getElementById("signupForm");
form.addEventListener("submit", (event) => {
event.preventDefault();
const nameValue = document.getElementById("name").value;
const emailValue = document.getElementById("email").value;
console.log(`নাম: ${nameValue}`);
console.log(`ইমেইল: ${emailValue}`);
});
</script>
Validation কেন দরকার
HTML পর্ব ৬-এ আমরা required, minlength-এর মতো HTML attribute দিয়ে বেসিক validation শিখেছিলাম। কিন্তু এগুলো সীমিত — জটিল নিয়ম (যেমন পাসওয়ার্ডে অন্তত একটা সংখ্যা থাকতে হবে, বা দুটো পাসওয়ার্ড ফিল্ড মিলতে হবে) HTML দিয়ে করা যায় না। এজন্য JavaScript দিয়ে custom validation লিখতে হয়।
খালি ফিল্ড চেক করা
form.addEventListener("submit", (event) => {
event.preventDefault();
const nameValue = document.getElementById("name").value;
if (nameValue === "") {
console.log("নাম খালি রাখা যাবে না");
return; // ফাংশন এখানেই থেমে যাবে, নিচের কোড চলবে না
}
console.log("ফর্ম বৈধ, সাবমিট করা হচ্ছে...");
});
টিপস: return শুধু কোনো মান ফেরত দিতেই না, বরং কোনো function-কে সাথে সাথে থামিয়ে দিতেও ব্যবহার হয় — এখানে যদি নাম খালি থাকে, তাহলে return-এর পরের কোনো কোড চলবে না।
Trim — অতিরিক্ত স্পেস বাদ দেওয়া
ইউজার যদি শুধু স্পেস দিয়ে একটা ইনপুট ভর্তি করে (যেমন " "), সেটা দেখতে খালি না হলেও আসলে অর্থহীন। .trim() দিয়ে শুরু ও শেষের স্পেস বাদ দেওয়া যায়:
const nameValue = document.getElementById("name").value.trim();
if (nameValue === "") {
console.log("নাম খালি রাখা যাবে না (শুধু স্পেস দিলেও চলবে না)");
}
একাধিক শর্ত চেক করা
আগের পর্বগুলোতে শেখা logical operator (&&, ||) এখানে খুব কাজে লাগে:
form.addEventListener("submit", (event) => {
event.preventDefault();
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value;
if (name === "" || email === "" || password === "") {
console.log("সব ফিল্ড পূরণ করতে হবে");
return;
}
if (password.length < 6) {
console.log("পাসওয়ার্ড অন্তত ৬ অক্ষরের হতে হবে");
return;
}
if (!email.includes("@")) {
console.log("সঠিক ইমেইল দাও");
return;
}
console.log("সব ঠিক আছে, ফর্ম সাবমিট হচ্ছে!");
});
লক্ষ করো — প্রতিটা if-এ return থাকায়, যেকোনো একটা শর্ত ব্যর্থ হলেই function থেমে যাচ্ছে — এই প্যাটার্নকে বলে "early return", এটা validation কোড পরিষ্কার রাখার একটা খুব জনপ্রিয় কৌশল।
Error মেসেজ পেজে দেখানো
শুধু console-এ দেখানোর বদলে, real ওয়েবসাইটে error message সরাসরি পেজে দেখানো হয় — আগের পর্বগুলোতে শেখা DOM manipulation এখানে কাজে লাগবে:
<input type="text" id="name" placeholder="নাম">
<p id="errorMsg" style="color: red;"></p>
<button id="submitBtn">সাবমিট</button>
<script>
const nameInput = document.getElementById("name");
const errorMsg = document.getElementById("errorMsg");
const submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click", () => {
const name = nameInput.value.trim();
if (name === "") {
errorMsg.textContent = "নাম খালি রাখা যাবে না";
} else {
errorMsg.textContent = "";
console.log("সাবমিট সফল:", name);
}
});
</script>
এই প্যাটার্নে যদি নাম খালি থাকে, লাল রঙের error text পেজে দেখা যাবে। সব ঠিক থাকলে error message খালি করে দেওয়া হচ্ছে, যাতে আগের error আর দেখা না যায়।
একটা সম্পূর্ণ উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Form Validation উদাহরণ</title>
<style>
.error { color: red; font-size: 14px; }
.success { color: green; font-size: 14px; }
</style>
</head>
<body>
<form id="signupForm">
<input type="text" id="name" placeholder="নাম"><br><br>
<input type="email" id="email" placeholder="ইমেইল"><br><br>
<input type="password" id="password" placeholder="পাসওয়ার্ড"><br><br>
<button type="submit">রেজিস্টার করো</button>
<p id="message"></p>
</form>
<script>
const form = document.getElementById("signupForm");
const message = document.getElementById("message");
form.addEventListener("submit", (event) => {
event.preventDefault();
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value;
if (name === "" || email === "" || password === "") {
message.textContent = "সব ফিল্ড পূরণ করতে হবে";
message.className = "error";
return;
}
if (!email.includes("@")) {
message.textContent = "সঠিক ইমেইল দাও";
message.className = "error";
return;
}
if (password.length < 6) {
message.textContent = "পাসওয়ার্ড অন্তত ৬ অক্ষরের হতে হবে";
message.className = "error";
return;
}
message.textContent = "রেজিস্ট্রেশন সফল হয়েছে!";
message.className = "success";
});
</script>
</body>
</html>
লক্ষ করো — message.className দিয়ে পুরো class-টাই বদলে দেওয়া হচ্ছে (error/success), যার ফলে error লাল আর success সবুজ রঙে দেখাবে।
নিজে চেষ্টা করো
Exercise:
- উপরের রেজিস্ট্রেশন ফর্মটা নিজে বানাও ও টেস্ট করো
- একটা নতুন শর্ত যোগ করো — নাম অন্তত ৩ অক্ষরের হতে হবে
.trim()বাদ দিয়ে দেখো শুধু স্পেস দিয়ে সাবমিট করলে কী হয়- দুটো পাসওয়ার্ড ইনপুট (password ও confirm password) বানাও, দুটো একই কিনা চেক করো
পরের পর্বে যা থাকছে
পর্ব ১৩-এ আমরা শিখবো Array-এর আধুনিক method — map, filter, forEach — যেগুলো দিয়ে array নিয়ে কাজ করা আরও শক্তিশালী ও পরিষ্কার হয়, উদাহরণসহ।