ফর্ম ভ্যালিডেশন ( Form Validation)
জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন
জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল ফর্ম ভ্যালিডেশন করা যায়ঃ
জাভাস্ক্রিপ্ট কোড
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("নাম অবশ্যই পূরণ করতে হবে")
return false;
}
}যদি ফর্ম ফিল্ড খালি থাকে তবে ফর্ম সাবমিট হওয়া থেকে বিরত রাখতে এই ফাংশনটি একটি এলার্ট দিবে এবং false রিটার্ন করবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("নাম অবশ্যই পুরন করতে হবে");
return false;
}
}
</script>
<body>
<form name="myForm" action="action_page.php"
onsubmit="return validateForm()" method="post">
নাম: <input type="text" name="fname">
<input type="submit" value="সাবমিট">
</form>
</body>
</html>ফলাফল
ফর্ম সাবমিট করলে validateForm() ফাংশনটি এক্সিকিউট হবে।
এইচটিএমএল ফর্ম ভ্যালিডেশন
ব্রাউজারের মাধ্যমে স্বয়ংক্রিয়ভাবে এইচটিএমএল ফর্ম ভ্যালিডেশন করা যায়।
নিচের উদাহরণে ইনপুট ফিল্ড খালি রেখে ফর্ম সাবমিট করলে required এট্রিবিউট ফর্ম সাবমিট করতে বাধা দিবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<form action="action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>ফলাফল
 |
ইন্টারনেট এক্সপ্লোরার ৯ এবং তার আগের ভার্সনে এইচটিএমএল ফর্ম ভ্যালিডেশন সাপোর্ট করে না। |
|---|
ডেটা ভ্যালিডেশন
ইনপুট ভ্যালু স্বচ্ছ, সঠিক এবং মানসম্মত করার জন্য ডাটা ভ্যালিডেশন করা হয়।
অধিকাংশ ক্ষেত্রে, ডেটা ভ্যালিডেশনের উদ্দেশ্য হচ্ছে কম্পিউটার এপ্লিকেশনে সঠিক তথ্য ইনপুট করা।
বিভিন্ন পদ্ধতিতে ডেটা ভ্যালিডেশন করা যায়ঃ
সার্ভার সাইড ভ্যালিডেশনঃ ওয়েব সার্ভারে ইনপুট ভ্যালু পাঠানোর পর ওয়েব সার্ভার ইনপুট ভ্যালিডেট করে।
ক্লায়েট সাইড ভ্যালিডেশনঃ ওয়েব সার্ভারে ইনপুট ভ্যালু পাঠানোর পূর্বে ওয়েব ব্রাউজার ইনপুট ভ্যালিডেট করে।
এইচটিএমএল কন্সট্রেইন্ট ভ্যালিডেশন
এইচটিএমএল ৫ ভ্যালিডেশনের একটি নতুন ধারনা দেয় যা কন্সট্রেইন্ট ভ্যালিডেশন নামে পরিচিত।
কন্সট্রেইন্ট ভ্যালিডেশনের ভিত্তিঃ
- এইচটিএমএল ইনপুট এট্রিবিউট
- সিএসএস স্যুডো ক্লাস
- ডোম প্রোপার্টি এবং মেথড
এইচটিএমএল ইনপুট এট্রিবিউট
| এট্রিবিউটের নাম | বর্ণনা |
|---|---|
| disabled | ইনপুট এলিমেন্টকে নিষ্ক্রিয় করে দেয় |
| max | ইনপুট এলিমেন্টের সর্বোচ্চ মান নির্দেশ করে |
| min | ইনপুট এলিমেন্টের সর্বনিম্ন মান নির্দেশ করে |
| pattern | ইনপুট এলিমেন্টের ভ্যালুর প্যাটার্ন/ধরণ নির্দেশ করে |
| required | ইনপুট ফিল্ড অবশ্যই পূরণ করতে হবে নির্দেশ করে |
| type | ইনপুট এলিমেন্টের টাইপ নির্দেশ করে |
সিএসএস স্যুডো সিলেক্টর
| সিলেক্টরের নাম | বর্ণনা |
|---|---|
| :disable | "disabled" এট্রিবিউটযুক্ত এলিমেন্টকে সিলেক্ট করে |
| :invalid | অবৈধ ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করে |
| :optional | "required" এট্রিবিউট ছাড়া এলিমেন্টকে সিলেক্ট করে |
| :required | "required" এট্রিবিউটযুক্ত এলিমেন্টকে সিলেক্ট করে |
| :valid | ভ্যালিড ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করে |