জাভাস্ক্রিপ্ট ফর্ম ভেলিডেশন (JavaScript Form Validation Tutorial in Bangla)
জাভাস্ক্রিপ্ট দিয়ে ফর্ম ভেলিডেশন করা যায়। টেক্সট ইনপুট, সিলেক্টবক্স, চেকবক্স ইত্যাদি যেকোন এইচটিএমএল ফর্ম এলিমেন্ট হোক না কেন, আপনি জাভাস্ক্রিপ্ট দিয়ে চেক করতে পারবেন ইউজার ফর্ম পূরন করেছে কিনা এবং সঠিক তথ্য দিয়েছে কিনা। যদি ফর্ম ঠিকমত পূরন না করে তাহলে ইউজার ফর্ম সাবমিট করতে পারবেনা এবং তাকে ফর্ম পূরনের নির্দেশনাও জাভাস্ক্রিপ্ট দিয়ে দিতে পারেন।
জাভাস্ক্রিপ্ট দিয়ে ফর্ম এলিমেন্ট একসেস করা কয়েকটি উপায় আছে যেমন
document.formName.elements[0] এভাবে ফর্মের প্রথম এলিমেন্ট টিকে একসেস করা যাবে। যদি সেই ফর্ম ফিল্ডে কোন মান থাকে এবং সেটা চান তাহলে
01.<!DOCTYPE html>02.<html>03.<head>04.<script>05. 06.function validateForm(){07.var t = document.wForm.elements[0].value;08.alert(t);09.}10. 11.</script>12.</head>13.<body>14. 15.<form action="" name="wForm" method="post" onsubmit="validateForm()">16.<p><input type="text" name="first_name" id="first_name"/></p>17.<p><input type="submit" name="submit" value="Submit"/></p>18.</form>19. 20.</body>21.</html>এভঅবে নাম্বার না দিয়ে নাম দিয়েও একসেস করা যায় যেমন
1.document.wForm.elements['first_name'].value;তবে এর চেয়ে আরেকটা ভাল পদ্ধতি আছে এটাই প্রফেশনালি করা হয় তা হচ্ছে getElementById() ফাংশন ব্যবহার করে। যেমন
1.var f_name = document.getElementById('first_name').value;** getElementByI() এর ভিতরে কোটেশন দিয়ে যে এলিমেন্ট একসেস করবেন সেটার id এবং ডট (.) দিয়ে value প্রোপার্টিজ দিলেই ইনপুট এলিমেন্টটির মান পেয়ে যাবেন।
টেক্সট ফিল্ড ভেলিডেশন
আপনার ফর্মে টেক্সট ফিল্ড আছে আপনি চান সেটা পূরন না করে যেন ইউজার ফর্ম সাবমিট করতে না পারে।
01.<!DOCTYPE html>02.<html>03.<head>04.<script>05. 06.function validateForm(){07.var t = document.getElementById('first_name').value;08.if(t.length == 0){09.alert('Please enter any value');10.return false;11.}else if(isNaN(t) == false){12.alert('Please enter any text');13.return false;14.}else{15.alert('form submitted');16.return true;17.}18.}19. 20.</script>21.</head>22.<body>23. 24.<form action="" name="wForm" method="post" onsubmit="return validateForm()">25.<p><input type="text" name="first_name" id="first_name"/></p>26.<p><input type="submit" name="submit" value="Submit"/></p>27.</form>28. 29.</body>30.</html>** এই কোড দেখবে ইউজার ফর্ম পূরন করেছে কিনা এবং ফিল্ডে টেক্সট দিয়েছে কিনা।
** প্রথমে t ভেরিয়েবলে first_name ফিল্ডের মান নিয়েছি এরপর length একটা প্রোপার্টি আছে সেটা দিয়ে চেক করা যায় যে কতটি অক্ষর ই্নপুট বক্সে দিয়েছে। যদি t.length == 0 হয় অর্থ্যাৎ কোন কিছুই টাইপ করে নাই তখন একটা এলার্ট মেসেজ (কিছু টাইপ করতে হবে এমন একটা মেসেজ) দিয়ে রিটার্ন করে দিয়েছি।
কিছু টাইপ করে কিন্তু সেটা নাম্বার টাইপ করল তখন if স্টেটমেন্ট পাশ করবে এবং else if দিয়ে চেক হবে টাইপকৃত লেখা নাম্বার কিনা। isNaN একটা ফাংশন এটা দিয়ে নাম্বার চেক করা যায় (নাম্বারটি শুদ্ধ কিনা)। যদি isNaN(t) == false হয় তাহলে তার মানে নাম্বার টাইপ করেছে তখন এলার্ট দিয়ে রিটার্ন করে দিয়েছি। কেননা মানুষের নামতো কখনও নাম্বার হবেনা। NaN (Not a Number).
** ২৪ নম্বর লাইনে return এরপর ফাংশনটি দিয়েছি কেননা ফাংশনটি true অথবা false রিটার্ন করবে। false রিটার্ন করলে ফর্ম সাবমিট হবেনা।
** টেক্সট চেক করতে isNaN এর পরিবর্তে রেগুলার এক্সপ্রেশনও ব্যবহার করতে পারেন। যেমন
01.function validateForm(){02.var t = document.getElementById('first_name').value; var regEx = /^[a-zA-Z]+$/;03.if(t.length == 0){04.alert('Please enter any value');05.return false;06.}else if(t.match(regEx) == null){07.alert('Please enter any text');08.return false;09.}else{10.alert('form submitted');11.return true;12.}13.}ইমেইল এবং নাম্বার ফিল্ড ভেলিডেশন
01.<!DOCTYPE html>02.<html>03.<head>04.<script>05. 06.function validateForm(){07.var age = document.getElementById('age').value;08.var email = document.getElementById('email').value;09. 10.var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;11. 12.if(age.length == 0 || isNaN(age)){13.alert('Please enter any number');14.return false;15.}else if(email.length == 0 || filter.test(email) != true){16.alert('Please enter valid email');17.return false;18.}else{19.alert('form submitted');20.return true;21.}22.}23. 24.</script>25.</head>26.<body>27. 28.<form action="test.php" name="wForm" method="post" onsubmit="return validateForm()">29.<p><input type="text" name="age" id="age"/></p>30.<p><input type="text" name="email" id="email"/></p>31.<p><input type="submit" name="submit" value="Submit"/></p>32.</form>33. 34.</body>35.</html>** প্রথমে age বা বয়স যদি না দেয় কিংবা কোন টেক্সট টাইপ করে (বয়স তো নাম্বার দিয়েই দিতে হয়) তখন এলার্ট দিয়ে false রিটার্ন করেছি। এরপর filter এ ইমেইল এর জন্য একটা রেগুলার এক্সপ্রেশন তৈরী করেছি এবং test() মেথড দিয়ে চেক করেছি সঠিক ইমেইল ঠিকানা টাইপ করেছে কিনা সাথে সাথে or (||) অপারেটর দিয়ে দেখেছি ইমেইল ফিল্ড ফাকা কিনা।
** ইমেইলের জন্য রেগুলার এক্সপ্রেশন নেটে সার্চ দিলে অনেক পাওয়া যায় তবে যদি নিজেই বানানো শিখতে চান তাহলে আমাদের একটা রেগুলার এক্সপ্রেশন টিউটোরিয়াল আছে পিএইচপিতে।
এভাবে যেকোন ফর্ম ফিল্ড ভেলিডেশন করা যায়। চেকবক্স, সিলেক্টবক্স ইত্যাদি সব কিছু। তবে জাভাস্ক্রিপ্ট দিয়ে এখন ফর্ম ভেলিডেশন করা হয়না বরং জেকোয়েরি কিংবা এরুপ কোন জাভাস্ক্রিপ্টের ফ্রেমওয়ার্ক ব্যবহার করা হয়। এতে কম সময়ে বেশি কাজ করা যায়। অবশ্য এগুলি শিখে রাখতে হবে তাহলে জেকোয়েরি বুঝতে সুবিধা হবে।
ফর্ম ভেলিডেশনের টিউটোরিয়াল আমাদের জেকোয়েরি টিউটোরিয়ালে আছে।
0 মন্তব্য(গুলি):
Post a Comment