jQuery form validation | SP Foundationbd

যেকোন সাইটের Application নিয়ে কাজ করার সময় সাধারনত form লাগে। Registration form, জরিপ form, Login form  ইত্যাদি।যাইহোক এরুপ form থাকলে validation রাখতে হয়।যদি server side (php) validation রাখেন তাহলে এটা ইউজারের জন্য বেশ বিরক্তিকর।যতক্ষন পর্যন্ত ডেটাবেস থেকে কোন মান চেক করতে না হয় ততক্ষন server সাইড validation না রাখাই ভাল। Jquery দিয়েই সব ধরনের validation করা সম্ভব।নিচের একটি উদাহরন ব্যাখ্যাসহ দেয়া হল।

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>SP Foundationbd form validation tutorials</title>

05.<link rel="stylesheet" href="/style.css" type="text/css"/>

06.<script src="/jquery_latest.js" type="text/javascript"></script>

07.<script src="/script.js" type="text/javascript"></script>

08.</head>

09.<body>

10.<h2>Fill up form and hit submit</h2>

11.<div id="form_container">

12.<form id="reg_form" action="" method="post">

13.<label>First Name</label>

14.<input type="text" name="f_name" placeholder="First Name"/>

15.<span id="fnameInfo"></span>

16.<label>Last Name</label>

17.<input type="text" name="l_name" placeholder="Last Name"/>

18.<span id="lnameInfo"></span>

19.<label>Email</label>

20.<input type="text" name="email" placeholder="Email"/>

21.<span id="mailInfo"></span>

22.<label>Phone Number</label>

23.<input type="text" name="phone" placeholder="Phone"/>

24.<span id="phoneInfo"></span>

25.<input type="submit" value="Submit"/>

26.</form>

27.</div>

28.</body>

29.</html>

style.css ফাইল

01.body{

02.font-family:Verdana;

03.font-size:13px;

04.}

05.#form_container{

06.width:400px;

07.margin:0 auto;

08.overflow:hidden;

09.border:1px solid #ccc;

10.border-radius:5px;

11.padding:10px;

12.}

13.h2{

14.text-align:center;

15.}

16..error{

17.color:#f00;

18.}

19.#form_container span{

20.float:right;

  1. display:block;

22.clear:both;

23.}

24.#form_container label{

25.display:block;

26.float:left;

27.margin:5px 0;

28.width:150px;

29.}

30.#form_container input{

31.float:right;

32.margin:5px 0;

33.}

34.#form_container input[type="submit"]{

35.float:left;

36.margin:8px 0 0 254px;

37.}

script.js ফাইল

view sourceprint?

01.$(document)

02..ready(function () {

03.$('#reg_form')

04..submit(function () {

05.if (validateTextField('f_name', 'fnameInfo') & validateTextField('l_name', 'lnameInfo') & validateEmail('email', 'mailInfo') & validateNumber('phone', 'phoneInfo')) {

06.return true;

07.} else {

08.return false;

09.}

10.});

  1. 12. 13.function validateTextField(fieldName, Id) {

14.//if it's NOT valid

15.if ($('input[name=' + fieldName + ']')

16..val()

17..length < 1) {

18.$('#' + Id)

19..text('Please enter any  text').fadeIn();

20.$('#' + Id)

21..addClass('error');

22.return false;

23.} else if (isNaN($('input[name=' + fieldName + ']')

24..val()) == false){

25.$('#' + Id)

26..text('Please enter any  text').fadeIn();

27.$('#' + Id)

28..addClass('error');

29.return false;

30.}

31.//if it's valid

32.else {

33.$('input[name=' + fieldName + ']')

34..removeClass('error');

35.$('#' + Id)

36..fadeOut();

37.return true;

38.}

39.}

42.function validateEmail(fieldName, Id) {

43.//testing regular expression

44.var a = $('input[name=' + fieldName + ']')

45..val();

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

47.//if it's valid email

48.if (filter.test(a)) {

49.//$('#'+fieldName).removeClass('error');

50.$('#' + Id)

51..fadeOut();

52.$('#' + Id)

53..removeClass('error');

54.return true;

55.}

56.//if it's NOT valid

57.else {

58.$('#' + Id)

59..text('Please Type a valid e-mail address');

60.$('#' + Id)

61..addClass('error');

62.return false;

63.}

64.}

  1. 66. 67.function validateNumber(fieldName, Id) {

68.//if it's NOT valid

69.if (isNaN($('input[name=' + fieldName + ']')

70..val())) {

71.$('#' + Id)

72..text('Only number please,no text allowed');

73.$('#' + Id)

74..addClass('error');

75.return false;

76.} else if ($('input[name=' + fieldName + ']')

77..val() < 1){

78.$('#' + Id)

79..text('Please fill the field').fadeIn();

80.$('#' + Id)

81..addClass('error');

82.return false;

83.}

84.//if it's valid

85.else {

86.$('input[name=' + fieldName + ']')

87..removeClass('error');

88.$('#' + Id)

89..fadeOut();

90.$('#' + Id)

91..removeClass('error');

92.return true;

93.}

94.}

95.});

ব্যাখ্যা:শুধু script.js ব্যাখ্যা-

আমি যে form তৈরী করেছি সেটার id reg_form.৪ নম্বর লাইনে এই ফর্ম submit হচ্ছে কিনা তা submit মেথড দিয়ে check করা হচ্ছে।যখনি submit বাটনে ক্লিক করবে সাথে সাথে কয়েকটি ফাংশন এক্সিকিউট হবে।যদি সবগুলিই ফাংশন true রিটার্ন করে তাহলে ফর্ম সাবমিট হবে তানাহলে এই if স্টেটমেন্ট false return করবে এবং form submit না হয়ে কি করতে হবে তা দেখাবে।

এখানে ৩টি ফাংশন লিখেছি।

প্রথম ফাংশন: এই ফাংশনটির প্যারামিটার fieldName এবং Id (১৩-৩৯ লাইন)

১৫-১৭ নম্বর লাইনের অর্থ হচ্ছে যে টেক্সট field টির নাম (name এট্রিবিউটের মান) আর্গুমেন্ট হিসেবে পাঠাবে সেই text ফিল্ডটি select করে এর মান val() method দিয়ে বের করে এনে length প্রোপার্টি দিয়ে check করে দেখবে যে ১ এর চেয়ে ছোট কিনা (অর্থ্যাৎ ১ এর চেয়ে ছোট হলে ০,তার মানে কিছুই টাইপ করেনি),যদি হয় তাহলে text() method ব্যবহার করে ঐ টেক্সট ফিল্ডের নিচে যে span tag আছে সেখানে "Please enter any text" এই লেখাটি দৃশ্যমান করবে (ফাংশন কল করার সময় যে span এর ID দিবেন সেই span এ লেখাটি আসবে)।এবং সবশেষে error নামে একটা ক্লাস যোগ করে false রিটার্ন করে Form সাবমিট হতে দিবেনা।

আর যদি কিছু type করে তাহলে উপরোক্ত লেখাটি error ক্লাস সহ (যদি থাকে) উঠে গিয়ে true return করবে এবং form submit হবে।

দ্বিতীয় function: ইমেইল ভেলিডেশন এর জন্য (৪২-৬৪ লাইন)

একই ব্যাখ্যা,এখানে শুধু test method দিয়ে চেক করা হয়েছে যে ইনপুটকৃত মান বৈধ ইমেইল কিনা।filter এখানে রেগুলার এক্সপ্রেশন,যেকোন বৈধ ইমেইল এই ফিল্টারে আটকে যাবেনা।

তৃতীয় ফাংশন: নম্বর ভেলিডেশন (৬৭-৯৪ লাইন)

আগের দুটোর মতই,এখানে একটা নতুন মেথড আছে তাহল isNaN().এই মেথড দিয়ে ইনপুটকৃত মান নাম্বার কিনা দেখা হচ্ছে।যদি নাম্বার হয় তাহলে false রিটার্ন করে।

এখানে মাত্র কয়েকটি ফিল্ড তাই এভাবে ফাংশন না লিখে সরাসরি কোড লেখাই ভাল ছিল।তবে যদি অনেক বড় ফর্ম হয় তাহলে প্রতিটি ফিল্ডের জন্য আলাদা আলাদা কোড না লিখে এভাবে একই ফাংশন শুধু প্যারামিটার পরিবর্তন করে কাজ করা যায় এবং এটাই উত্তম।