3.11. হ্যান্ডেল এবং ভ্যালিডেট ফর্ম ডাটা
কিছু ইভেন্ট আছে যেগুলো ফর্মে বেশ কাজে লাগে। আর তাই আলাদা করে সেগুলো এখানে আলোচনা করবো। ফর্মের ইনপুট ফিল্ডে ডাটা চেঞ্জ থেকে শুরু করে ফর্ম সাবমিট করার ইভেন্ট আমরা বিভিন্নভাবে হ্যান্ডেল করতে পারি।
আমরা এখন একটা ফর্ম নিবো যেটাতে আমরা বিভিন্নভাবে ইভেন্টগুলো কিভাবে কাজ করে দেখবো।
<form> <input type="text" id="fname" name="fname" placeholder="Enter first name" /> <input type="text" id="lname" name="lname" placeholder="Enter last Name" /> <input type="submit" value="Submit" /> </form>
আমরা প্রথমে ইনপুট ফিল্ডগুলো সিলেক্ট করে নিবো।
const inputs = document.querySelectorAll("input");
এখানে inputs হচ্ছে নোডলিস্ট, আর এখানে দুইটা ইনপুট ফিল্ড থাকায় নোডলিস্টে ইন্ডেক্স ০ আর ১ এ ক্রমানুসারে আমাদের ইনপুট ইলিমেন্টগুলো সিলেক্ট হয়েছে। আমরা এখন ইনডেক্স নাম্বারের সাহায্যে ইলিমেন্টগুলো একটা একটা করে সিলেক্ট করতে পারবো।
আমরা আমাদের সাবমিট বাটনটাও সিলেক্ট করে রাখবো এভাবে।
const submitBtn = document.querySelector("button[type=submit]");
ইনপুট ফিল্ড চেঞ্জ ইভেন্টঃ ইনপুট ফিল্ডে কোনোরকম চেঞ্জ হলে সেখানে আমরা চেঞ্জ ইভেন্টের উপর ভিত্তি করে হ্যান্ডেলার লাগাতে পারবো। ধরি আমরা আমাদের প্রথম ইনপুট ফিল্ডে কোনোরকম চেঞ্জ হলে কিছু একটা করতে চাই।
inputs[0].addEventListener("change", function () {
console.log("Change Event on Input");
});
খন আমাদের প্রথম ইনপুট ফিল্ডে কিছু লিখে অন্যকোথাও ক্লিক করলেই এই চেঞ্জ ইভেন্ট ঘটবে, আর সেই সাথে আমাদের কাঙ্ক্ষিত ফলাফলও কন্সোলে দেখতে পাবো।
যদিও এখানে কিছু করা হইনি জাস্ট একটা কিছু রান করে দেখলাম, কিন্তু এই ইভেন্ট অনেক কাজের হতে পারে। আমরা চাইলে এখান থেকে ইনপুট ফিল্ডের ভ্যালুটাও নিতে পারবো। সেক্ষেত্রে কেউ আমাদের ওয়েব অ্যাপ্লিকেশনে ফর্ম এ কাজ করলে আমরা রিয়েল টাইম ডাটা আপডেট করতে পারবো। আগের ইনপুট ফিল্ডের চেঞ্জ ইভেন্টটা একটু মডিফাই করে দিবো।
inputs[0].addEventListener("change", function (event) {
console.log(event.target.value);
});
এখানে আমরা event প্যারামিটারের সাহায্যে টার্গেটেড ইলিমেন্ট এর ভ্যালু বা এখানে ইনপুট ফিল্ডের ভ্যালুটা বের করে এনে সেটা কন্সোলে লগ করেছি। ব্যাস, এখন যদি অন্যকোথাও ক্লিক করি তাহলে চেঞ্জ ইভেন্ট ঘটবে আর আমাদের কাঙ্ক্ষিত ফলাফল কন্সোলে দেখতে পাবো।
ফর্ম সাবমিট ইভেন্টঃ ফর্ম সাবমিটে সাধারণত ব্রাউজারের বাই ডিফল্ট আচরণ থাকে। যেমন কোথায় ফর্মটা সাবিমিট করা হবে, রিকোয়েস্ট টাইপ কি হবে ইত্যাদি ইত্যাদি। যেমন আমাদের ফর্মটায় সাবমিট বাটনে ক্লিক করলে দেখবেন ব্রাউজার আবার লোড হয়েছে, এটা ব্রাউজারের বাই ডিফল্ট আচরণ। আমাদের ফর্মে যেহেতু কিছু(action, method) উল্লেখ নাই, তাই বাই ডিফল্ট এটা বর্তমান পেজেই ফর্মটা সাবমিট করবে এবং একইসাথে GET টাইপের রিকোয়েস্ট ব্যবহার করবে। আর সেজন্যেই আমাদের পেজ রিলোড হতে দেখা যায়। এখন জাভাস্ক্রিপ্ট ব্যবহার করে আমরা ফর্ম ভ্যালিডেশন করতে চাইতে পারি অথবা ফর্মের ডাটাগুলো অ্যাজাক্স রিকোয়েস্টের সাহায্যে আমাদের কাঙ্ক্ষিত জায়গায় পাঠাতে পারি। সেক্ষেত্রে ব্রাউজারের বাই ডিফল্ট আচরণ আমাদের রেগুলার কাজের জন্যে বাঁধা হয়ে দাড়াতে পারে। আমরা খুব সহজেই একটু আগে দেখানো উপায়ে সে বাই ডিফল্ট আচরণ আটকাতে পারি।
submitBtn.addEventListener("click", function (event) {
event.preventDefault();
});
এটা লিখে সেইভ করে ব্রাউজার রিলোড করে এখন সাবমিট বাটনে ক্লিক করলে দেখবেন আর বাই ডিফল্ট আচরণ হচ্ছে না। এখন আমরা ফর্ম ভ্যালিডেশন বা অ্যাজাক্স রিকোয়েস্ট টাইপের যেকোনোকিছু করতে পারবো ফর্মের উপর।
যেমন আমি যদি চাই, ইউজার কোনো ফর্মের ইনপুট ফিল্ড খালি রেখেই ফর্ম সাবমিট করতে চায়, তাহলে একটা অ্যালার্ট দেখাবো। তাহলে সাবিমিট বাটনের ক্লিক ইভেন্টটাতেই কিছু কোড অ্যাড করতে হবে।
submitBtn.addEventListener("click", function (event) {
event.preventDefault();
if (inputs[0].value === "" || inputs[1].value === "") {
alert("Input Field cannot be Empty!");
}
});
এখন যদি আমরা ফর্মের কোনো একটা ইনপুট ফিল্ড খালি রেখে ফর্মটা সাবমিট করতে চাই তাহলে অ্যালার্ট পাবো।
এখন যদি ইনপুট ফিল্ডগুলো দুইটাই ফীল করে বাটনে সাবমিট করি তাহলে আর অ্যালার্ট বক্স আসবে না। এখন আমরা যদি আরো মজার কিছু করতে চাই, যেমন ফীল্ড দুইটাই ফীল থাকলে আমরা ভিতরের ডাটাগুলো দেখাতে চাই। তাহলে সেই সাবমিটের ক্লিক ইভেন্টেই আবার আরো কিছু কোড অ্যাড করতে হবে।
submitBtn.addEventListener("click", function (event) {
event.preventDefault();
if (inputs[0].value === "" || inputs[1].value === "") {
alert("Input Field cannot be Empty!");
} else {
var input0Data = inputs[0].value;
var input1Data = inputs[1].value;
console.log("Your Name:", input0Data, "And Your Email:", input1Data);
}
});
এখন ইনপুট ফীল্ড দুইটাই ফীল করে যদি সাবমিট করি তাহলে আমরা আমাদের ফীল্ডের ডাটাগুলোই দেখতে পাবো কন্সোলে
এখন আমরা আরও কিছু ইভেন্ট দেখব।
কী-বোর্ড ইভেন্টঃ কী-বোর্ডের কী চাপলেও কোনো ইভেন্ট ঘটতে পারে, আর সেগুলোও আমরা আগেরমতো করেই হ্যান্ডেল করতে পারবো। এখানে তেমন বিশেষ কিছু নাই। তারপরেও কী-বোর্ডের ইভেন্ট নিয়ে একটু গভীরভাবে আলোচনা করার মতো কিছু ব্যাপার আছে। যেমন আমরা একটা কী তে চাপলে তিনরকমের ইভেন্ট ঘটতে পারে। প্রথমত একটা কী চাপলাম, এখনো কী টা ছাড়ি নাই, সিস্টেম কোনো কী স্ট্রোক রেজিস্টার করে নাই, এইসময়ে একটা ইভেন্ট হতে পারে। তারপর কী চেপে রাখা অবস্থাতেই সিস্টেম কী স্ট্রোক রেজিস্টার করেছে, ঐসময়ে একটা ইভেন্ট হতে পারে। আর একদম শেষে কী চেপে ছেড়ে দিলে তখন আরেকটা ইভেন্ট হতে পারে। এগুলোর উপর ভিত্তি করেই কী-বোর্ডের তিনরকমের ইভেন্ট ঘটতে পারে।
keydown: প্রথম যে পরিস্থিতির কথা বললাম, কী চাপা হয়েছে কিন্তু সিস্টেম এখনো রেজিস্টার করে নাই। এটা হ্যান্ডেল করার জন্যে keydown ইউজ করা হয়। এখন কী-বোর্ড ইভেন্টগুলো আমরা আমাদের document এর উপর অ্যাপ্লাই করতে হবে যেহেতু এটা পুরো ডকুমেন্ট এর উপরেই থাকবে। বাকী সব আগের মতোই।
document.addEventListener("keydown", function () {
console.log("Key Down Event");
});
এখন স্ক্রিপ্ট সেইভ করে ব্রাউজার রিলোড করে আমাদের ডকুমেন্ট সিলেক্ট থাকা অবস্থায় কী-বোর্ডের কোনো কী তে চাপ দিলেই দেখবেন কাঙ্ক্ষিত ফাংশন রান করেছে।
keypress: এই ইভেন্ট ঠিক সিস্টেমে কী-স্ট্রোক রেজিস্টার করা হওয়া মাত্রই ঘটে। বাকী সব আগের মতোই।
document.addEventListener("keypress", function () {
console.log("Key Press Event");
});
স্ক্রিপ্ট সেইভ করে ব্রাউজার রিলোড দিয়ে আমাদের ডকুমেন্ট এ কোনো কী চাপা মাত্রই দেখবেন এটা Key Press Event রান করেছে ।
keyup: কী চাপ দিয়ে ছেড়ে দিলে এই ইভেন্ট ঘটেঃ
document.addEventListener("keyup", function () {
console.log("Key Up Event");
});
উদাহরন
- নিউমেরিক ইনপুট ডাটা ভেলিডেট করা।
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
let x = document.getElementById("numb").value;
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
- non empty ইনপুট ফিল্ড ভেলিডেট করা।
// If the length of the element's string is 0 then display helper message
function required(inputtx) {
if (inputtx.value.length == 0) {
alert("message");
return false;
}
return true;
}
- ডেইট ফিল্ড ভেলিডেট করা।
function validatedate(inputText) {
var dateformat =
/^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/;
// Match the date format through regular expression
if (inputText.value.match(dateformat)) {
document.form1.text1.focus();
//Test which seperator is used '/' or '-'
var opera1 = inputText.value.split("/");
var opera2 = inputText.value.split("-");
lopera1 = opera1.length;
lopera2 = opera2.length;
// Extract the string into month, date and year
if (lopera1 > 1) {
var pdate = inputText.value.split("/");
} else if (lopera2 > 1) {
var pdate = inputText.value.split("-");
}
var mm = parseInt(pdate[0]);
var dd = parseInt(pdate[1]);
var yy = parseInt(pdate[2]);
// Create list of days of a month [assume there is no leap year by default]
var ListofDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (mm == 1 || mm > 2) {
if (dd > ListofDays[mm - 1]) {
alert("Invalid date format!");
return false;
}
}
if (mm == 2) {
var lyear = false;
if ((!(yy % 4) && yy % 100) || !(yy % 400)) {
lyear = true;
}
if (lyear == false && dd >= 29) {
alert("Invalid date format!");
return false;
}
if (lyear == true && dd > 29) {
alert("Invalid date format!");
return false;
}
}
} else {
alert("Invalid date format!");
document.form1.text1.focus();
return false;
}
}
- We have a radio button named Demo and id = ‘demo’. Now, we will check using this button id that the radio button is marked or not.
if (document.getElementById("demo").checked == true) {
document.write("Demo radio button is selected");
} else {
document.write("Demo radio button is not selected");
}
এসো নিজে করি
- How to validate a dropdown list using javascript?
- How to validate a checkbox using javascript?
- How to validate a textarea using javascript?