Form Handling JavaScript
ওয়েব ডেভেলপমেন্টে Form Handling একটি গুরুত্বপূর্ণ বিষয়। কারণ ব্যবহারকারী যখন ওয়েবসাইটে কোনো তথ্য জমা দেয়—যেমন নাম, ইমেইল, পাসওয়ার্ড বা ফিডব্যাক—সেগুলো সঠিকভাবে গ্রহণ ও যাচাই করা জরুরি। এজন্য JavaScript দিয়ে আমরা ফর্ম থেকে ইনপুট নিতে পারি, ডেটা যাচাই (validation) করতে পারি এবং প্রয়োজনে ব্যবহারকারীকে সঠিক বার্তা দেখাতে পারি।
🔹 Form Input Handling কী?
Form Input Handling বলতে বোঝায়—
ব্যবহারকারীর কাছ থেকে তথ্য নেওয়া (যেমন নাম, ইমেইল, বয়স)।
JavaScript দিয়ে সেই তথ্য অ্যাক্সেস করা।
প্রয়োজনে ফর্ম সাবমিটের আগে যাচাই করা।
ফর্মের ইনপুট আমরা সাধারণত id, name অথবা class ব্যবহার করে DOM থেকে পাই।
উদাহরণঃ
<form id="myForm">
<label>নাম:</label>
<input type="text" id="name" placeholder="আপনার নাম লিখুন"> <br><br>
<label>ইমেইল:</label>
<input type="email" id="email" placeholder="আপনার ইমেইল লিখুন"> <br><br>
<button type="submit">সাবমিট</button>
</form>
<script>
const form = document.getElementById("myForm");
form.addEventListener("submit", function(e) {
e.preventDefault(); // ডিফল্ট সাবমিট বন্ধ করা
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
console.log("Name:", name);
console.log("Email:", email);
});
</script>
➡️ এখানে e.preventDefault() ব্যবহার করা হয়েছে যাতে ফর্ম রিফ্রেশ না হয়ে JavaScript দিয়ে ডেটা ধরা যায়।
🔹 Form Validation কী?
Validation হলো ইনপুট সঠিক কিনা তা যাচাই করা। যেমনঃ
নাম ফাঁকা রাখা যাবে না।
ইমেইল সঠিক ফরম্যাটে হতে হবে।
পাসওয়ার্ড অন্তত ৬ অক্ষরের হতে হবে।
উদাহরণঃ
<form id="loginForm">
<label>ইউজারনেম:</label>
<input type="text" id="username" required> <br><br>
<label>পাসওয়ার্ড:</label>
<input type="password" id="password" required> <br><br>
<button type="submit">লগইন</button>
</form>
<p id="error" style="color:red;"></p>
<script>
const form = document.getElementById("loginForm");
const errorMsg = document.getElementById("error");
form.addEventListener("submit", function(e) {
e.preventDefault();
const username = document.getElementById("username").value.trim();
const password = document.getElementById("password").value.trim();
if(username === "" || password === "") {
errorMsg.textContent = "⚠️ সব ঘর পূরণ করতে হবে!";
} else if(password.length < 6) {
errorMsg.textContent = "⚠️ পাসওয়ার্ড অন্তত ৬ অক্ষরের হতে হবে!";
} else {
errorMsg.textContent = "";
alert("✅ লগইন সফল হয়েছে!");
}
});
</script>
➡️ এখানে trim() ব্যবহার করা হয়েছে যাতে ইউজার স্পেস দিয়ে ফাঁকা ঘর না রাখতে পারে।
🔹 ইমেইল ভ্যালিডেশন Regex দিয়ে
অনেক সময় ইমেইল সঠিক কিনা তা যাচাই করতে Regular Expression (Regex) ব্যবহার করা হয়।
function validateEmail(email) {
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return pattern.test(email);
}
console.log(validateEmail("test@example.com")); // true
console.log(validateEmail("wrong-email")); // false
🔹 রিয়েল-টাইম ভ্যালিডেশন (keyup event)
ফর্ম সাবমিটের আগেই ব্যবহারকারীকে ভুল দেখানো যায়।
<label>ইমেইল:</label>
<input type="email" id="emailInput">
<p id="emailError" style="color:red;"></p>
<script>
const emailInput = document.getElementById("emailInput");
const emailError = document.getElementById("emailError");
emailInput.addEventListener("keyup", function() {
const email = emailInput.value;
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if(!regex.test(email)) {
emailError.textContent = "⚠️ সঠিক ইমেইল লিখুন";
} else {
emailError.textContent = "";
}
});
</script>
JavaScript দিয়ে Form Handling ও Validation করলে ব্যবহারকারী সঠিকভাবে তথ্য দিতে পারে, আর ডেভেলপাররা অপ্রয়োজনীয় ভুল বা স্প্যাম কমাতে পারে।
Input Handling দিয়ে ডেটা সংগ্রহ করা হয়।
Validation দিয়ে সেই ডেটা যাচাই করা হয়।
Regex ব্যবহার করে জটিল ভ্যালিডেশনও করা যায়।
👉 তাই, ফর্ম ব্যবহারের ক্ষেত্রে সর্বদা client-side validation (JavaScript) এর পাশাপাশি server-side validation (PHP, Node.js ইত্যাদি) করাও জরুরি।
