JQuery වලින් Form එකකට Auto Suggest සහ Validation දාගමු

Tweet

මම මීට කලින් ලියපු සටහන් වල JQuery, JQuery වලින් ලේසියෙන්ම AJAX ගොඩදාන හැටි සහ JQueryUI ගැන කිව්ව ඔයගොල්ලන්ට මතක ඇති. අද සටහනෙන් කියන්න යන්නෙ ඒ දේවල් වල ප්‍රායෝගික යෙදීමක් ගැන. අපිට ගොඩක් web site වල forms තියනව දැකගන්න පුළුවන්නෙ, අද කියල දෙන්න යන්නෙ JQuery සහ AJAX පාවිච්චි කරල අපේ web site එකේ තියන form එකකට auto suggest දාගන්න හැටි සහ validation කරන හැටි. මේකෙදි ලබාගන්න දත්ත ටික PHP වලින් MySQL Database එකකට save කරගන්න හැටිත් කියල දෙන්න මම බලාපොරොත්තු වෙනව. ගොඩක් දේවල් විස්තර කරන්න තියන නිසා සටහන නම් ටිකක් දිග එකක් වෙයි.

සටහනේ එන code කෑලි අවබෝද කරගන්න JavaScript,PHP සහ MySQL පිළිබඳ මූලික දැනුමක් තිබ්බොත් හොඳයි. ඒ දේවල් ගැන ලේසියෙන් ඉගෙන ගන්න w3schools site එකෙන් ඔයගොල්ලන්ට පුළුවන්. මොකද මමත් ඒකෙන් තමයි ගොඩාක් දේවල් ඉගෙන ගත්තෙ.

මුලින්ම මේ පහල තියන තැනින් කියල දෙන්න යන code එක බාගන්නකො. ඊට පස්සෙ මම කියල තියන විස්තරේ බැලුවොත් ලේසියෙන්ම කරල තියන විදිහ තේරුම්ගන්න පුළුවන් වෙයි.
Password : sara

Live Demo එකට ගිහින් පුරවන්න උත්සහයක් දීල බලන්නකො. වැරදියට පුරවන්න දෙන්නෙ නෑ නේද?
එහෙම පිරෙව්වත් submit කරන්න බෑ නේද? ඔයාගෙ මැසිමෙ මේක run කරල මේක බලන්න ඕනනම්,
PHP සහ MySQL තියන XAMP වගේ server එකක දාල තමයි බලන්න වෙන්නෙ.

දැන් බලමු මේක හරි විදිහට ඔයාගෙ මැසිමෙ run කරන හැටි

සංක්ෂිප්ත ගොනුව බාගන දිග ඇරල බැලුවොත් ඔයාලට පෙනෙයි css,js,scripts සහ images කියල folders ටිකකුයි index.php කියල ගොනුවකුයි. ඔයාගෙ browser එකේ index.php ගොනුව විවෘත්ත කරල බැලුවොත් පහළ තියනව වගේ form එකක් එනව දැකගන්න පුළුවන් වෙයි.

මුලින්ම මම දීල තියන උදාහරණෙ ඇතුලත් වෙන jquery_form කියන folder එක ඔයාගෙ localhost ක්‍රියාත්මක වෙන folder එකට copy කරගන්නකො. උදාහරණයක් විදිහට ඔයා පාවිච්චි කරන්නෙ WAMP නම් www folder එකට, XAMP නම් htdocs folder එකට. දැන් scripts කියන folder එකේ තියන dbc.php එක ඔයාගෙ Text Editor එකේ open කරගන්න. පොඩි වෙනස්කම් ටිකක් කරන්න ඕන ඔයාට ගැලපෙන විදිහට.

ඔයා server එක අලුතෙන්ම install කලානම් කිසි වෙනසක් හරන්න ඕන නෑ. එහෙම නැත්නම් දැනට නැති නමක් $dbname එකට දෙන්න. MySQL වලට password එකක් දීල තියනවනම් ඒක $password එකට දෙන්න. එච්චටයි කරන්න තියෙන්නෙ.

ඊට පස්සෙ තියන පියවරවල් කරන්න ඕන server එක online තියෙද්දි. මම කරන්න ඕන
වැඩෙයි ඒකෙන් එන ප්‍රතිඵලයයි දෙකම මෙතනදි කියන්නම්.

1. මුලින්ම sql.php file එක server එකේ run කරන්න,
ඒකට කරන්න තියෙන්නෙ browser එකේ address bar එකේ ඒකට යන පාර දෙන එක විතරයි.
උදාහරණයක් විදිහට http://localhost/jquery_form/scripts/sql.php ගන්න පුළුවන්.

මේකෙදි වෙන්නෙ අලුත් database එකක් හැදෙන එක. ඒක වෙන්නෙ කලින් ඔයා dbc.php එකට
කරපු වෙනස්කම් වලට අදාලව. වෙනසක් කරේ නැත්නම් userdata කියල database එකක details_user
කියල table එකක් අදාල columns එක්කම හැදෙනව. මතක තියාගන්න මේක එක පාරක් කළාම ඇති.
මේ file එක අපේ වැඩේට අදාල නෑ, ඒක මම ලිව්වෙ ලේසියෙන්ම database එක හදාගන්න.

2. ඊටපස්සෙ කරන්න තියෙන්නෙ index.html එක server එකේ run කරන එක.
දැන් form එක හරි විදිහට පුරවල submit කරල බලන්නකො. එතකොට අපේ දත්ත ටික database එකේ
save වෙලා තියෙයි.

එක පාරක් submit කරල ඊලඟ පාර සම්පූර්ණ නමයි උපන්දිනෙයි පුරවල අර කලින් දීපු Login Name
එකම දීල බලන්නකො. මොකද උනේ ? ඒ නම දැනට තියන හින්ද වෙන නම් ටිකක් suggest වෙලා
එනව නේද ?

දැන් බලමුකො code වලට ගිහිල්ල කොහොමද මේ වැඩේ කරල තියෙන්නෙ කියල. මුලින්ම බලමු index.php වල code එක.

වැඩිය හැඩ වැඩ කරල නැතිව HTML Table පාවිච්චි කරල තමයි මම form එක හදල තියෙන්නෙ. ඕන විදිහට හැඩ කරගන්න එක ඔයාට බාරයි. මේකට මම JQuery සහ JQueryUI වගේ ඕන කරන JavaScripts සහ CSS link කරගන තියනව. 11 වෙනි පේළියෙදි මම JQuery link කරල තියෙන්නෙ. උපන් දිනේ දෙන්න හැදුවනම් ඔයාට පේන්න ඇති ලස්සන දින දර්ශකයක් එනව අපිට දිනේ තෝරන්න. ඒකෙදි මම පාවිච්චි කරල තියෙන්නෙ JQueryUI වල datepicker කියන ගැජට් එක. ඒකට තමයි ඊලඟ පේලියෙ JQueryUI link කරල තියෙන්නෙ. 18 වෙනි පේළියෙ ඉඳන් 28 වෙනි පේළිය වෙනකන් තියන JavaScript කෑල්ල datepicker එකට ඕන කරන ටිකක්.

එතකොට මොකක්ද 17 වෙනි පේලියෙ තියන අනිත් JavaScript එක? ඒකෙ තමයි මම validation සහ suggestion කරල තියෙන්නෙ, ඉස්සරහට ඒක විස්තර කරන්නම්කො. 32 වෙනි පේළියෙ ඉඳන් 86 වෙනි පේළිය වෙනකන් තියන PHP කෑල්ල දැනට අමතක කරන්න, ඒක form එක submit කළාට පස්සෙ වෙන දෙයක් ගැන. එතනින් එහාට තියෙන්නෙ සාමාන්‍ය විදිහට HTML table එකක form එක හදල තියන එක. මෙතනදි හැම input එකකටම යටින් span එකක් දාල තියෙන්නෙ JavaScript වලින් validate කරල එන ප්‍රතිඵලය පෙන්වන්න. කරන හැටි ඉස්සරහට කියන්නම්කො.

කොහොමද Validation සහ Suddestions කරන්නෙ ?

ඇත්තටම අපේ මාතෘකාවට අදාල වෙන්නෙ validation.js කියන file එක. මොකද මේකෙ තමයි validation සහ suggestion වලට අදාල code තියෙන්නෙ. මේකෙදි මම හැම input එකක්ම validate කරන්න වෙනම function එකක් ලියල තියනව. ඒවගේම suggest කරන වැඩ වලට වෙනම function ලියල තියනව. ඒ ඒ input වල blur සහ keyup event එකේදි මම අර කලින් කියපු functions යොදාගන validate කරල තියනව. ඒ වගේම form එකේ submit event එකේදි මම හැම input එකක්ම බලල තියනව.

දැන් බලමු validation.js වල code එක, මම කෑලි කෑලි අරගන විස්තර කරන්නම්.

මෙතනදි තමයි මම එක එක events වලදි functions වලට call කරල තියෙන්නෙ. මම key up event එකේදි වෙන ටික comment කරල තියෙන්නෙ, කැමතිනම් ඔයාට පුළුවන් ඒක uncomment කරන්න. ඊට පස්සෙ බලමු මේ විදිහට call වෙන function එකක් දිහා.

අපි validation වලට Regular Expressions පාවිච්චි කරනවනම් ගොඩාක් ලේසියෙන් අපේ වැඩේ කරගන්න පුළුවන්. මෙතනදිත් මම Regular Expressions පාවිච්චි කරල තියනව. අපි දෙන input එකත් එක්ක ඒක ගැලපෙනවනම් ප්‍රශ්ණයක් නෑ, හැබැයි ගැලපෙන්නෙ නැත්නම් මම කරල තියෙන්නෙ input textbox එකට අලුතෙන් CSS Class එකක් එකතු කරන එක සහ අර මම කලින් කියපු input textbox එක යටින් තිබුන span එකට text එකක් ලියන එක. එතකොට ඒ ඒ CSS Classes අනුව input textbox එක වෙනස් වෙනව. මෙතනදිනම් මම කරල තියෙන්නෙ පාට වෙනස් කරන එක. දැන් බලමු කොහොමද suggestion එකක් කරන්නෙ කියල.

මේ function එක call වෙන්නෙ මීට උඩින් තියන function එකේදි අපි දෙන Login Name එක දැනට database එකේ තිබුනොත් කියල ඔයාලට තේරෙනව ඇතිනෙ. මෙතනදි මම කරල තියෙන්නෙ AJAX වලින් සම්පූර්ණ නමයි උපන්දිනයයි වෙනම PHP file එකකට (isValiedName.php) යවන එක. ඊට පස්සෙ ඒකෙන් අපි එවපු දත්ත ටික එහාට මෙහාට කරල දැනට database එකේ නැති නම් ටිකක් ආපහු එවනව. ඊට පස්සෙ කරල තියෙන්නෙ ඒ එන නම් ටික පෙන්නන එක. හරි ලේසියි.

වැඩි විස්තර

අපි බලමු form එක submit කලාට පස්සෙ මොකද වෙන්නෙ කියල. මම form එකේ action එකට index.php මයිනෙ දීල තියෙන්නෙ. ඒ හින්ද අපි post method එකෙන් යවන data ටික ගන්න ඕනත් index.php එකේ ඉඳන්මයි. ඒකට තමයි index.php එකේ 32 වැනි පේළියෙන් පටන් ගන්න PHP කෑල්ල තියෙන්නෙ. validation.php එක ඕන වෙන්නෙ අපි යවන data PHP වලිනුත් validate කරන්න ඕන හින්ද, මොකද නැත්නම් JavaScript dissable කරල තිබ්බොත් data validate වෙන්නෙ නැති හින්ද. අන්තිමට data validate උනොත් database එකේ ලියන එක තමයි කරල තියෙන්නෙ. එච්චටයි !

හපොයි, හිතුවට වඩා පට්ටම දිග උනා. මේ සටහන web development කරන අයට වැදගත් වෙයි කියල හිතනව. අවුලක් තියනවනම් ප්‍රතිචාරයක් විදිහට දාන්නත් අමතක කරන්න එපා. ඔබට ජය !