1. How to learn javascript basic tutorials (js)
  2. javascript syntax (জাভাস্ক্রিপ্ট syntax) how to learn javascript tutorials
  3. জাভাস্ক্রিপ্ট সক্রিয়করন( Javascript tutorials)
  4. javascript Location (Javascript tutorials)
  5. জাভাস্ক্রিপ্ট External (Javascript tutorials)
  6. জাভাস্ক্রিপ্ট ভেরিয়েবল (Javascript tutorials)
  7. Data Type (javascript tutorials)
  8. জাভাস্ক্রিপ্ট অপারেটর (Javascript operator in javascript tutorials)
  9. জাভাস্ক্রিপ্ট ফাংশন (Javascript function tutorials)
  10. How to learn জাভাস্ক্রিপ্ট ইভেন্ট (Javascript event) | SP Foundationbd
  11. জাভাস্ক্রিপ্ট স্টেটমেন্ট (Javascript statement tutorials ) | SP Foundationbd
  12. Javascript If স্টেটমেন্ট tutorials | SP Foundationbd
  13. Javascript Else If statement tutorials | SP Foundationbd
  14. Javascript While লুপ Tutorials | SP Foundationbd
  15. Javascript For loop tutorials | SP Foundationbd
  16. Js মন্তব্য বা Comments | SP Foundationbd
  17. জাভাস্ক্রিপ্ট অ্যারে tutorials | SP Foundationbd
  18. জাভাস্ক্রিপ্ট এলার্ট tutorial | SP Foundationbd
  19. জাভাস্ক্রিপ্ট Confirm tutorials | SP Foundationbd
  20. জাভাস্ক্রিপ্ট Prompt tutorials | SP Foundationbd
  21. জাভাস্ক্রিপ্ট Print tutorials | SP Foundationbd
  22. জাভাস্ক্রিপ্ট রিডাইরেক্ট Tutorials | SP Foundationbd
  23. জাভাস্ক্রিপ্ট Popup tutorials | SP Foundationbd
  24. জাভাস্ক্রিপ্ট ডেট tutorials | SP Foundationbd
  25. জাভাস্ক্রিপ্ট ফর্ম Tutorials | SP Foundationbd
  26. জাভাস্ক্রিপ্ট স্ট্রিং Tutorials | SP Foundationbd
  27. জাভাস্ক্রিপ্ট স্ট্রিং দৈর্ঘ্য | SP Foundationbd
  28. জাভাস্ক্রিপ্ট স্ট্রিং স্প্লিট | SP Foundationbd
  29. জাভাস্ক্রিপ্ট স্ট্রিং সার্চ tutorials | SP Foundationbd
  30. জাভাস্ক্রিপ্ট রিপ্লেস tutorials | SP Foundationbd
  31. জাভাস্ক্রিপ্ট indexOf tutorials | SP Foundationbd
  32. জাভাস্ক্রিপ্ট getElementById tutorials | SP Foundationbd
  33. জাভাস্ক্রিপ্ট innerHTML tutorials | SP Foundationbd
  34. কিছু জরুরী ফাংশন tutorials | SP Foundationbd
  35. setTimeout ফাংশন tutorials | SP Foundationbd

জাভাস্ক্রিপ্ট ফর্ম Tutorials | SP Foundationbd

Javascript  দিয়ে Form validation করা যায়। টেক্সট ইনপুট, সিলেক্টবক্স, চেকবক্স ইত্যাদি যেকোন html form element হোক না কেন, আপনি javascript দিয়ে check করতে পারবেন user form পূরন করেছে কিনা এবং সঠিক তথ্য দিয়েছে কিনা। যদি form ঠিকমত পূরন না করে তাহলে user form submit করতে পারবেনা এবং তাকে ফর্ম পূরনের নির্দেশনাও জাভাস্ক্রিপ্ট দিয়ে দিতে পারেন।

জাভাস্ক্রিপ্ট দিয়ে ফর্ম এলিমেন্ট একসেস করা কয়েকটি উপায় আছে যেমন

document.formName.elements[0] এভাবে ফর্মের প্রথম এলিমেন্ট টিকে একসেস করা যাবে। যদি সেই form ফিল্ডে কোন মান থাকে এবং সেটা চান তাহলে

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<script>

  1.  

06.function validateForm(){

07.var t = document.wForm.elements[0].value;

08.alert(t);

09.}

  1.  

11.</script>

12.</head>

13.<body>

  1. 15.<formaction="" 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>

  1. 20.</body>

21.</html>

test.html নামে save করে রান করিয়ে দেখুন। ৭ নাম্বার লাইনে elements[0] দেয়াতে ফর্মের প্রথম এলিমেন্ট টি একসেস করেছে, ওখানে যত নাম্বার দিবেন সেই নম্বর এলিমেন্ট একসেস করবে।

এভঅবে নাম্বার না দিয়ে নাম দিয়েও একসেস করা যায় যেমন

1.document.wForm.elements['first_name'].value;

তবে এর চেয়ে আরেকটা ভাল পদ্ধতি আছে এটাই প্রফেশনালি করা হয় তা হচ্ছে getElementById() function ব্যবহার করে। যেমন

1.var f_name = document.getElementById('first_name').value;

** getElementByI() এর ভিতরে কোটেশন দিয়ে যে এলিমেন্ট একসেস করবেন সেটার id এবং ডট (.) দিয়ে value প্রোপার্টিজ দিলেই ইনপুট এলিমেন্টটির মান পেয়ে যাবেন।

Text Field Validation

আপনার ফর্মে text field আছে আপনি চান সেটা পূরন না করে যেন ইউজার ফর্ম সাবমিট করতে না পারে।

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<script>

  1.  

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.}

  1. 20.</script>

21.</head>

22.<body>

  1. 24.<formaction="" 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>

  1. 29.</body>

30.</html>

** এই code দেখবে ইউজার ফর্ম পূরন করেছে কিনা এবং ফিল্ডে টেক্সট দিয়েছে কিনা।

** প্রথমে t ভেরিয়েবলে first_name ফিল্ডের মান নিয়েছি এরপর length একটা প্রোপার্টি আছে সেটা দিয়ে চেক করা যায় যে কতটি অক্ষর ই্নপুট বক্সে দিয়েছে। যদি t.length == 0 হয় অর্থ্যাৎ কোন কিছুই টাইপ করে নাই তখন একটা এলার্ট মেসেজ (কিছু টাইপ করতে হবে এমন একটা মেসেজ) দিয়ে রিটার্ন করে দিয়েছি।

কিছু টাইপ করে কিন্তু সেটা নাম্বার টাইপ করল তখন if স্টেটমেন্ট পাশ করবে এবং  else if দিয়ে চেক হবে টাইপকৃত লেখা নাম্বার কিনা। isNaN একটা ফাংশন এটা দিয়ে নাম্বার চেক করা যায় (নাম্বারটি শুদ্ধ কিনা)। যদি isNaN(t) == false হয় তাহলে তার মানে নাম্বার টাইপ করেছে তখন এলার্ট দিয়ে রিটার্ন করে দিয়েছি। কেননা মানুষের নামতো কখনও নাম্বার হবেনা। NaN (Not a Number).

** ২৪ নম্বর লাইনে return এরপর ফাংশনটি দিয়েছি কেননা ফাংশনটি true অথবা false রিটার্ন করবে। false রিটার্ন করলে ফর্ম সাবমিট হবেনা।

** Text check করতে 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.}

** t.match(regEx) null রিটার্ন করে যদি অক্ষর ব্যাতিত অন্য কিছু টাইপ করে। isNaN এ চেয়ে এই পদ্ধতি বেশি ভাল হবে।

Email এবং নাম্বার ফিল্ড ভেলিডেশন

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<script>

  1.  

06.function validateForm(){

07.var age = document.getElementById('age').value;

08.var email = document.getElementById('email').value;

  1. 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}$/;
  2. 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.}

  1. 24.</script>

25.</head>

26.<body>

  1. 28.<formaction="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>

  1. 34.</body>

35.</html>

test.html নামে save করে রান করে দেখুন। একসাথে নাম্বার এবং ইমেইল ভেলিডেশন করেছি।

** প্রথমে age বা বয়স যদি না দেয় কিংবা কোন টেক্সট টাইপ করে (বয়স তো নাম্বার দিয়েই দিতে হয়) তখন এলার্ট দিয়ে false রিটার্ন করেছি। এরপর filter এ ইমেইল এর জন্য একটা রেগুলার এক্সপ্রেশন তৈরী করেছি এবং test() method দিয়ে চেক করেছি সঠিক ইমেইল ঠিকানা টাইপ করেছে কিনা সাথে সাথে or (||) Operator দিয়ে দেখেছি ইমেইল ফিল্ড ফাকা কিনা।

** ইমেইলের জন্য রেগুলার এক্সপ্রেশন নেটে সার্চ দিলে অনেক পাওয়া যায় তবে যদি নিজেই বানানো শিখতে চান তাহলে আমাদের একটা রেগুলার এক্সপ্রেশন tutorials আছে php তে।

এভাবে যেকোন Form ফিল্ড ভেলিডেশন করা যায়। চেকবক্স, সিলেক্টবক্স ইত্যাদি সব কিছু। তবে জাভাস্ক্রিপ্ট দিয়ে এখন ফর্ম ভেলিডেশন করা হয়না বরং Jquery কিংবা এরুপ কোন জাভাস্ক্রিপ্টের framework ব্যবহার করা হয়। এতে কম সময়ে বেশি কাজ করা যায়। অবশ্য এগুলি শিখে রাখতে হবে তাহলে জেকোয়েরি বুঝতে সুবিধা হবে।