နည္းပညာ

ကြန္ပ်ဴတာ နည္းပညာမ်ား, နည္းပညာ software ႏွင့္ နည္းပညာ blog

လက္ေရြးစင္ သင္ခန္းစာမ်ား ၾကည့္ရန္။

jQuery form သင္ခန္းစာ – jQuery form validation tutorial

မဂၤလာပါ …
အရင္ဆုံး အရင္သင္ခန္းစာ ႏွစ္ခုအပါအဝင္ ဒီေန႔ သင္ခန္းစာ ၿပီးရင္ ရရွိမယ့္ပုံကုိ ျပေပးခ်င္ပါတယ္။ Demo မွာဝင္ၾကည့္လိုက္ပါ။ ကြက္လပ္ေတြမွာ ဘာမွမျဖည့္ပဲ ကလစ္ႏွိပ္ၾကည့္ပါ။ Form ထဲမွာ မျဖည့္ထားေၾကာင္း သတိေပးစာ ေပၚလာပါမယ္။ ဒီေန႔ သင္ခန္းစာၿပီးရင္ အဲဒါေတြ လုပ္တတ္မွာျဖစ္ပါတယ္။ အရင္သင္ခန္းစာ ႏွစ္ခုကုိ ဖတ္ခ်င္တယ္ဆုိရင္ေတာ့

1. Login form tutorial (HTML,CSS, jQuery) part I

2. Login form tutorial (HTML,CSS, jQuery) part II

ဒီေန႔ သင္ခန္းစာကေတာ့ ကၽြန္ေတာ္တုိ႔ login form (html, css, jQuery) သင္ခန္းစာ series တစ္ခုရဲ႕ ေနာက္ဆုံးအပုိင္းျဖစ္ပါတယ္။ ေနာက္ဆုံးအပုိင္းျဖစ္သလို အခက္ဆုံးလည္း ျဖစ္ပါတယ္။ သင္ခန္းစာ သုံးခုလုံးကုိ လုိက္လုပ္ၾကည့္ရင္ေတာ့ လြယ္မွာပါ။ ဒီေန႔ကေတာ့ JavaScript or jQuery အပုိင္းျဖစ္ပါတယ္။ ဒီေန႔မွာ html အပုိင္းမွာ ျပင္စရာရွိပါတယ္။ အရင္က ကၽြန္ေတာ္တုိ႔ ေရးထားဖူးတဲ့ html ဖုိင္ကုိ ဖြင့္လိုက္ပါ။

[Crayon]

[/Crayon] 

ကုိ

[Crayon]

[/Crayon] 

ျဖစ္ေအာင္ ေျပာင္းလိုက္ပါ။ ၿပီးရင္

[Crayon]

[/Crayon]

ကုိ

[Crayon]

[/Crayon]

ျဖစ္ေအာင္ ေျပာင္းလုိက္ပါ။ ေနာက္ဆုံးက </div> ကုိပဲ ေျပာင္းတာျဖစ္ပါတယ္။ အေပၚတစ္ေၾကာင္းက ဘယ္နားက </div> လဲဆုိတာ သိေအာင္ထည့္ေပးတာျဖစ္ပါတယ္။ အဲလို ေျပာင္းၿပီးၿပီဆုိရင္ေတာ့ <head> အပုိင္းမွာ လိုအပ္တဲ့ဖုိင္ေတြ လင့္ခ္ခ်ိတ္ရပါဦးမယ္။ ေအာက္မွာ ၾကည့္လိုက္ပါ။

[Crayon]


 

[/Crayon]

 

လုိအပ္တဲ့ဖုိင္ေတြ လင့္ခ္ခ်ိတ္ၿပီးသြားၿပီဆုိရင္ေတာ့ jQuery စေရးပါေတာ့မယ္။ notepad++ ကုိဖြင့္လိုက္ပါ။ ၿပီးရင္ ေအာက္ပါအတုိင္း ရုိက္ထည့္လုိက္ပါ။

[Crayon]$(document).ready(function(){
$(“#form”).submit(function(){
if($(“input:text”).val()==””){
alert(“Enter your username!”);
$(“input:text”).focus();
return false;
}
if($(“input:password”).val()==””){
alert(“Enter your Password!”);
$(“input:password”).focus();
return false;
}
alert(“Logged in!”);
});
});[/Crayon]

ရုိက္ထည့္ၿပီးရင္ file>save ကုိ ေရြးလိုက္ပါ။ အရင္က ေရးထားတဲ့ html ဖုိင္နဲ႔ folder တစ္ခုထဲမွာပဲ အတူတူသိမ္းလိုက္ပါ။ နာမည္ကုိ login.js လို႔ေပးၿပီး သိမ္းပါ။ folder structure ကုိ ေအာက္မွာ ၾကည့္လို႔ရပါတယ္။ (ပုံကုိ click ႏွိပ္ရင္ ရွင္းရွင္းလင္းလင္း ျမင္ရပါမယ္။)

folder-structure

code ကုိ ရွင္းျပပါမယ္။ ဒီ အေပၚက code မွာ $(“#form”) ဆုိတာက html ဘက္က id=”form” ကုိ လွမ္းေခၚလိုက္တာျဖစ္ပါတယ္။ .submit ဆုိတာက အဲဒီ form ကုိ submit လုပ္လုိက္ရင္ (login button ကုိႏွိပ္လိုက္ရင္) အေနာက္က function ေတြ ဆက္အလုပ္လုပ္မွာျဖစ္ပါတယ္။ အဲဒီ ဆက္အလုပ္လုပ္မယ့္ function ထဲမွာ ကၽြန္ေတာ္တုိ႔ စစ္ထားတာက if နဲ႔ စစ္ထားပါတယ္။ if($(“input:text”).val()==””) ရဲ႕ အဓိပၸါယ္က တစ္ကယ္လို႔ input အမ်ဳိးအစား text ရဲ႕ val ဆုိတာက value ကုိေျပာတာပါ။ အဲဒီ value က =”” ဆုိေတာ့ ဘာမွမရွိဘူးဆုိလ်င္ (ရွိတယ္ဆုိ =”???” လို႔ စစ္ရမွာျဖစ္ပါတယ္။ ??? ေတြေနရာမွာ ရွိေနတဲ့ စာကုိထည့္စစ္ရမွာျဖစ္ပါတယ္။) username ထည့္ပါလုိ႔ alert လုပ္ပါမယ္။ ၿပီးေတာ့ user က တစ္ခါတည္း စာရုိက္လို႔ရေအာင္ cursor ကုိ username field ထဲမွာပဲ ျပန္ေရာက္ေနေအာင္ လုပ္ေပးတဲ့ ကုဒ္ က $(“input:text”).focus(); ျဖစ္ပါတယ္။ ၿပီးေတာ့ ဘာမွမထည့္ထားလို႔ form ကုိ ဆက္အလုပ္မလုပ္ေစခ်င္တဲ့အတြက္ return false လုိ႔ ေရးေပးရပါတယ္။ အဲလုိမွမဟုတ္ရင္ form က ဘာမွမပါပဲလည္း ေရာက္သြားပါလိမ့္မယ္။ password field အတြက္ကလည္း စစ္ပုံစစ္နည္းက အတူတူပါပဲ။ ေနာက္ဆုံး alert(“Logged in!”); ဆုိတာကေတာ့ username မွာေရာ password မွာပါ အားလုံးျဖည့္ထားတယ္ဆုိရင္ တနည္းအားျဖင့္ if နဲ႔ စစ္ထားတဲ့ block ႏွစ္ခုလုံး စစ္တာေအာင္သြားရင္ Logged in လို႔ ျပန္ေျပာေပးမယ့္ စာေၾကာင္းျဖစ္ပါတယ္။ တစ္ခု မွတ္ထားရမွာက ဒီသင္ခန္းစာက တစ္ကယ္ login function မဟုတ္ေသးပါဘူး။ jQuery နဲ႔ပဲ user ကုိ တုံ႔ျပန္ႏုိင္ေအာင္ေရးတာ ျဖစ္ပါတယ္။ တစ္ကယ့္ login ျဖစ္ေအာင္ေတာ့ php နဲ႔ ေရးၿပီး database ရွိမွ အဆင္ေျပပါလိမ့္မယ္။ ဒါဆုိရင္ ေအာက္မွာ စာေၾကာင္းေတြ မွန္၊ မမွန္ တုိက္စစ္ၾကည့္ပါဦး။

HTML file

[Crayon]


 

 

Login form

[/Crayon]

jQuery file

[Crayon]$(document).ready(function(){
$(“#form”).submit(function(){
if($(“input:text”).val()==””){
alert(“Enter your username!”);
$(“input:text”).focus();
return false;
}
if($(“input:password”).val()==””){
alert(“Enter your Password!”);
$(“input:password”).focus();
return false;
}
alert(“Logged in!”);
});
});[/Crayon]

Leave a Reply

Your email address will not be published. Required fields are marked *