জেকোয়েরি ফর্ম ভেলিডেশন (jQuery form validation)

22:15 – by 0

জেকোয়েরি ফর্ম ভেলিডেশন (jQuery form validation)




যেকোন সাইটের এপ্লিকেশন নিয়ে কাজ করার সময় সাধারনত ফর্ম লাগে।রেজিস্ট্রেশন ফর্ম,জরিপ ফর্ম,লগিন ফর্ম ইত্যাদি।যাইহোক এরুপ ফর্ম থাকলে ভেলিডেশন রাখতে হয়।যদি সার্ভার সাইড (পিএইচপি) ভেলিডেশন রাখেন তাহলে এটা ইউজারের জন্য বেশ বিরক্তিকর।যতক্ষন পর্যন্ত ডেটাবেস থেকে কোন মান চেক করতে না হয় ততক্ষন সার্ভার সাইড ভেলিডেশন না রাখাই ভাল।জেকোয়েরি দিয়েই সব ধরনের ভেলিডেশন করা সম্ভব।নিচের একটি উদাহরন ব্যাখ্যাসহ দেয়া হল।
index.html ফাইল
01.<!DOCTYPE html>
02.<html>
03.<head>
04.<title>Webcoachbd 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;
21.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 ফাইল
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.});
11. 
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.}
40. 
41. 
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.}
65. 
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.});

Fill up form and hit submit

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

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

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

দ্বিতীয় ফাংশন: ইমেইল ভেলিডেশন এর জন্য (৪২-৬৪ লাইন)
একই ব্যাখ্যা,এখানে শুধু test মেথড দিয়ে চেক করা হয়েছে যে ইনপুটকৃত মান বৈধ ইমেইল কিনা।filter এখানে রেগুলার এক্সপ্রেশন,যেকোন বৈধ ইমেইল এই ফিল্টারে আটকে যাবেনা।

তৃতীয় ফাংশন: নম্বর ভেলিডেশন (৬৭-৯৪ লাইন)
আগের দুটোর মতই,এখানে একটা নতুন মেথড আছে তাহল isNaN().এই মেথড দিয়ে ইনপুটকৃত মান নাম্বার কিনা দেখা হচ্ছে।যদি নাম্বার হয় তাহলে false রিটার্ন করে।
এখানে মাত্র কয়েকটি ফিল্ড তাই এভাবে ফাংশন না লিখে সরাসরি কোড লেখাই ভাল ছিল।তবে যদি অনেক বড় ফর্ম হয় তাহলে প্রতিটি ফিল্ডের জন্য আলাদা আলাদা কোড না লিখে এভাবে একই ফাংশন শুধু প্যারামিটার পরিবর্তন করে কাজ করা যায় এবং এটাই উত্তম।

0 মন্তব্য(গুলি):

Post a Comment

Subscribe to: Post Comments (Atom)