জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন

এখন আমি জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন নিয়ে আলোচনা করবো । আমরা প্রথমে জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন সম্পর্কে কিছু আলোচনা করবো ।

আমরা বিভিন্ন ওয়েবসাইট এ ফর্ম দেখতে পাই । এসব ফর্মের মাধ্যমে ওয়েবসাইটের ভিজিটর তাঁদের তথ্য প্রদান করতে পারে । উদাহরণস্বরূপ, আপনি যদি কোন ওয়েবসাইট এ নিবন্ধন করতে চান তাহলে অবশ্যই আপনাকে কিছু তথ্য দিয়ে নিবন্ধিত হতে হবে । যেমন; নাম, ই-মেইল অ্যাড্রেস, ঠিকানা ইত্যাদি । তখন এসব তথ্য দিবেন তখন একটি ব্যাপার লক্ষ্য করে দেখবেন যে, যেসব তথ্য দেওয়া আবশ্যিক নিবন্ধন করার সময় সেসব তথ্যের কোন একটি তথ্য বাদ পড়লে ফর্ম সাবমিট করা যায় না । আবার আপনি যদি ই-মেইল অ্যাড্রেস এর জায়গায় অন্য কিছু লিখেন তাহলে ফর্ম সাবমিট হবে না । এক্ষেত্রে, বলা হয়ে থাকে সঠিক ই-মেইল অ্যাড্রেস প্রবেশ করানোর জন্য । আর এসব কাজ করা হয় জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন (JavaScript Form Validation) এর মাধ্যমে । তাহলে জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন কতটা গুরুত্বপূর্ণ আশা করি বুঝতে পেরেছেন ।

টেক্সট ফিল্ড ভ্যালিডেশন (Text Field Validation)

আমরা এখন দেখবো কিভাবে টেক্সট ফিল্ড ভ্যালিডেশন করা যায় । মনে করুন, আপনি একটি ই-কমার্স ওয়েবসাইট তৈরি করলেন । সেখানে নিশ্চয় আপনি ফর্ম ব্যবহার করবেন ক্রেতার তথ্য সংগ্রহ করার জন্য । আপনি চাচ্ছেন, ক্রেতা যেন তাঁর নাম দিয়ে তারপর ফর্ম সাবমিট করে । আর এ কাজটি আপনি করতে পারবেন জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন এর মাধ্যমে । শুধু ই-কমার্স ওয়েবসাইট নয়, ফর্ম এর প্রয়োজন আছে এমন যেকোনো ওয়েব সাইটে আপনি জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন ব্যবহার করতে পারেন । এখন আমরা একটি উদাহরণের মাধ্যমে দেখবো কিভাবে টেক্সট ফিল্ড ভ্যালিডেশন করা যায়? এজন্য নিচের কোডটুকু একটি টেক্সট এডিটর যেমন নোটপ্যাড প্লাস প্লাস এ index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> JavaScript Form Validation </title>
    <script type="text/javascript">
        function text_field() {
            var txt = document.getElementById('user_name').value;
            if(txt.length==0) {
            alert('Please Enter Your Name');
            return false;
            }else if(isNaN(txt)==false){
     alert('Please enter any text');
     return false;
   }else{
            alert('Thank You');
            return true;
            }
        }
    </script>
</head>
<body>
    <form action="" method="post" onsubmit="return text_field()">
    <p> Please Enter Your Name </p>
    <input type="text" name="user_name" id="user_name" />
    <input type="submit" value="Submit" />
    </form>
</body>
</html>

এবার index.html ফাইলটি একটি ব্রাউজার এ ওপেন করুন । এখানে আপনি টেক্সট ফিল্ড পূরণ করা ছাড়া ফর্মটি সাবমিট করতে পারবেন না । যদি আপনি আপনার নাম না দিয়েই ফর্মটি সাবমিট করেন তাহলে তাহলে Please Enter Your Name লেখা একটি অ্যালার্ট বক্স পাবেন আর যদি আপনার নাম দিয়ে ফর্মটি সাবমিট করেন তাহলে Thank You লেখা একটি অ্যালার্ট বক্স পাবেন ।

ই-মেইল ভ্যালিডেশন (E-mail Validation)

আমরা যখন কোন ওয়েবসাইট এ ফর্ম পূরণ করি তখন ই-মেইল অ্যাড্রেস প্রয়োজন হয় এমন সকল ফর্ম এ তখন আমাদের ই-মেইল ফিল্ড পূরণ করতে হয় । আপনারা সবাই জানেন যে, একটি ই-মেইল অ্যাড্রেস এ @ চিহ্ন থাকে এবং ডট (.) থাকে । এসব চিহ্ন ছাড়া কখনো একটি সঠিক ই-মেইল অ্যাড্রেস হতে পারে না । জাভাস্ক্রিপ্ট ই-মেইল ভ্যালিডেশন এর মাধ্যমে ওয়েবসাইটের ব্যবহারকারী ফর্ম পূরণের সময় ই-মেইল অ্যাড্রেস সঠিক গঠন অনুযায়ী দিয়েছে কি না তা নিশ্চিত করা যায় । আপনি যদি ওয়েবসাইট এর ফর্ম এ জাভাস্ক্রিপ্ট ই-মেইল ভ্যালিডেশন করেন তাহলে ভিসিটর সঠিক গঠন অনুযায়ী ই-মেইল অ্যাড্রেস না দিয়ে ফর্ম সাবমিট করতে পারবেন না ।

এখন আমরা একটি উদাহরণের মাধ্যমে দেখবো কিভাবে ই-মেইল ভ্যালিডেশন করা যায় । এজন্য নিচের কোডটুকু একটি টেক্সট এডিটর যেমন নোটপ্যাড প্লাস প্লাস এ index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> JavaScript form Validation </title>
<script type="text/javascript">
function email_validation()
{
var e_mail=document.forms["myForm"]["email"].value;
var atpos=e_mail.indexOf("@");
var dotpos=e_mail.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=e_mail.length)
{
alert("Please Enter Your E-mail Address");
return false;
}
}
</script>
</head>
<body>
<form action="" name="myForm" onsubmit="return email_validation();"
method="post">
<p> Please Enter Your E-mail Address </p>
<input type="text" name="email"> <br />
<input type="submit" value="Submit">
</form>
</body>
</html>

এবার index.html ফাইলটি একটি ব্রাউজার এ ওপেন করুন । এখানে আপনি ই-মেইল অ্যাড্রেস পূরণ করা ছাড়া ফর্মটি সাবমিট করতে পারবেন না । যদি আপনি আপনার ই-মেইল অ্যাড্রেস দিয়েই ফর্মটি সাবমিট করেন তাহলে তাহলে Please Enter Your E-mail Address লেখা একটি অ্যালার্ট বক্স পাবেন । জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন টিউটোরিয়ালটি ভালোভাবে বুঝার জন্য প্রথমে জাভাস্ক্রিপ্ট ফাংশন এবং জাভাস্ক্রিপ্ট পপ-আপ বক্স টিউটোরিয়াল ভালোভাবে অনুশীলন করে নিবেন

Series Navigation<< জাভাস্ক্রিপ্ট কুকি

One response to “জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন”

  1. mukti says:

    Good initiative. Please keep it up.

Leave a Reply

Your email address will not be published. Required fields are marked *