Even though I write quite some program, but there still come to some times that I hardly can understand long and too details explanation plus with too technical writing on how to plugins this and that tools inside the program.
If you are looking for some simple tutorial and example for client side validation with pretty ready made CSS (well, for me this css is called pretty), then follow my below simple steps.
Step1: Download the plugin
Download JQuery Validation Engine Here
Demo for JQuery Validation Engine from the Creator
My Own Sample as Shown at Sample1
Step2: Open my sample and View > Page Source. Then just Ctrl-A to copy the whole source code, paste and save as whatever-name-you-preferred.html or .php extension. Okay, is not I’m asking you to become copycat but this is the 1st steps to learn programming 😀 as you need to understand what people write, learned from them and modified it based on your own style and become yours ;). By the way, the plugin is of MIT license which means it is free software and free to redistributes!
1: Refer the url to includes CSS files into your page – interface & pop up box
2: Refer the url to includes js files into your page – validation engines
3: Script to trigger Validation Engines
4: Validation Engines refer to these class to trigger pop up box if requirement not met while onblur or after the cursor placed away from the input box
How Does the Plugin Works?!
Figure2: index.php – for example, user ID is a must filled field. Add into the class validate[required] as highlighted above and the js script will do the rest for you to validate this field if it is left empty.
Figure3: jquery.validationEngine.js – based on different validation requirements cases, js script will called for respective function to do the validation.
Figure4: jquery.validationEngine.js – based on “required” case, the script called for function _required to validate. It will triggered the alertText if empty value been detected and set the error to true.
Figure5: jquery.validationEngine-en.js – alertText to be shown as pop up if the field left as blank.