Awesome! টিউনস
সকল Awesome! টিউনস

জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-১৫] :: জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন

1,712 দেখা 4 টিউমেন্টস জোসস
টিউন বিভাগ জাভাস্ক্রিট
প্রকাশিত
Level 0

51 টিউনস 194 টিউমেন্টস 0 ফলোয়ার

আসসালামু আলাইকুম । কেমন আছেন সবাই? আশা করি মহান আল্লাহ্‌ তা'আলার অশেষ রহমতে সবাই ভাল আছেন? আমিও আলহামদুলিল্লাহ্‌ ভাল আছি ।
গত পর্বে জাভাস্ক্রিপ্ট ধারাবাহিক টিউটোরিয়াল এর ১৪তম আলোচনা করেছিলাম । আজ জাভাস্ক্রিপ্ট ধারাবাহিক টিউটোরিয়াল এর ১৫তম পর্ব শুরু করতে যাচ্ছি । আজ আমি জাভাস্ক্রিপ্ট আমরা জাভাস্ক্রিপ্ট টিউটোরিয়াল এর অ্যাডভান্স লেভেল এ চলে এসেছি । আজ আমি জাভাস্ক্রিপ্ট এর অত্যন্ত গুরুত্বপূর্ণ একটি বিষয় আলোচনা করবো । আমি আজ জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন নিয়ে আলোচনা করবো । আমরা প্রথমে জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন সম্পর্কে কিছু আলোচনা করবো ।

আমরা বিভিন্ন  ওয়েবসাইট এ ফর্ম দেখতে পাই । এসব ফর্মের মাধ্যমে ওয়েবসাইটের ভিজিটর তাঁদের তথ্য প্রদান করতে পারে । উদাহরণস্বরূপ, আপনি যদি কোন ওয়েবসাইট এ নিবন্ধন করতে চান তাহলে অবশ্যই আপনাকে কিছু তথ্য দিয়ে নিবন্ধিত হতে হবে । যেমন; নাম, ই-মেইল অ্যাড্রেস, ঠিকানা ইত্যাদি । তখন এসব তথ্য দিবেন তখন একটি ব্যাপার লক্ষ্য করে দেখবেন যে, যেসব তথ্য দেওয়া আবশ্যিক নিবন্ধন করার সময় সেসব তথ্যের কোন একটি তথ্য বাদ পড়লে ফর্ম সাবমিট করা যায় না । আবার আপনি যদি ই-মেইল অ্যাড্রেস এর জায়গায় অন্য কিছু লিখেন তাহলে ফর্ম সাবমিট হবে না । এক্ষেত্রে, বলা হয়ে থাকে সঠিক ই-মেইল অ্যাড্রেস প্রবেশ করানোর জন্য । আর এসব কাজ করা হয় জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন (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 লেখা একটি অ্যালার্ট বক্স পাবেন । জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন টিউটোরিয়ালটি ভালোভাবে বুঝার জন্য প্রথমে জাভাস্ক্রিপ্ট ফাংশন এবং জাভাস্ক্রিপ্ট পপ-আপ বক্স টিউটোরিয়াল ভালোভাবে অনুশীলন করে নিবেন । জাভাস্ক্রিপ্ট ফাংশন টিউটোরিয়াল ৭ম পর্বে এবং জাভাস্ক্রিপ্ট পপ-আপ বক্স টিউটোরিয়ালটি ১০ম পর্বে আলোচনা করা হয়েছে । তাহলে জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন টিউটোরিয়ালটি সহজে বুঝতে পারবেন ।

আশা করি আজকের টিউটোরিয়ালটি বুঝতে পেরেছেন । যদি টিউটোরিয়ালটি বুঝতে কোন অসুবিধা হয় তাহলে কমেন্ট এর মাধ্যমে আমাকে জানান । আমি সমাধান দেওয়ার চেষ্টা করবো - ইনশাল্লাহ্‌ । জাভাস্ক্রিপ্ট ধারাবাহিক টিউটোরিয়াল এর ১৫তম পর্ব এখানেই শেষ করছি । টিউটোরিয়ালটি ভাল লাগলে কমেন্ট করতে ভুলবেন না ।
ধন্যবাদ সবাইকে আমার টিউটোরিয়ালটি মনোযোগ সহকারে পড়ার জন্য । ভাল থাকবেন সবাই আর আমার জন্য দোয়া করবেন । আল্লাহ্‌ হাফেজ ।

Level 0

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

পোস্টটা ভাল লাগলো 🙂

আর ভাইয়্যা আপনার জাভাস্ক্রিপ্টে টিউনগুলা অটো চেইন টিউন হিসেবে হচ্ছেনা। টিটিতে সিস্টেম দেয়া আছে সেভাবে পোস্টের টাইটেলগুলা চেঞ্জ করে নিয়েন।