jQuery inline form validation, custom positioning patch
Well, after using jQuery inline form validation plugin for some time the most serious problem with it was that it didn’t allow me to freely customize my UI. If i had a defined design of a form before writing the validation part I always had to alter design so that validation bubbles don’t pop onto something important. Like a “Invalid CAPTCHA code!” poping up on the CAPTCHA image or other stuff like this. Check-boxes are also easy “eaten” by the validation bubbles.
What i’ve written is a simple patch for jQuery inline form validation plugin allowing custom positioning of the validation bubbles. It gives you the possibility to override the default positioning by adding promptPosition attribute to the validated element with a value of any possible positioning pattern supported by the plugin (topLeft, topRight, bottomLeft, centerRight, bottomRight). After doing this your validated input field should look something like this:
<input id="captcha_code" promptPosition="centerRight" type='text' name='captcha_code' />
And all the magic that happens after customizing your form like this can be seen on the screenshot bellow:
Example of my patch's working
The patch was written for jQuery inline form validation version 1.6.2. It most surely won’t work with newer or later versions.
You can download the patch or the already modified jquery.validationEngine.js by clicking the links bellow:
Hi,
It looks very helpful….but I don’t know to how to add patch to validation.js
could any one please tell me how to apply this patch to validatopn.js?
I am new to jquery
I’ve added an already modified version of jquery.validationEngine.js. If you’re using jqueryValidationEngine version 1.6.2 replacing the old file with the one i’ve uploaded should do the trick for you.
BTW patch files are a common way for memorizing changes to files. On unix systems there’s a special program called “patch” for working with this kind of files. On windows I personally prefer using BeyondCompare but it’s not free
hi there.
can u tell me please, how use this patch?
please read my comment above
you just need to replace jquery.validationEngine.js(the one in your distribution) with jquery.validationEngine.modified.js(download it from here)
that’s if you’re using jqueryValidationEngine version 1.6.2
a’ll download it, add with ID to form… and what next? what i need to do – to see the captcha-image?
@klierik
it’s not for generating captcha images . . . . it’s for custom positioning error boxes
have you read the article at least?
oh, all se now…
sorry, my english not so well (((
Yervand, can u tell me how a can add captcha to form, witch used ValidationEngine for validation? Maybe solution or example or something else…
@klierik
try using this http://recaptcha.net/ it’s one of the most popular captcha generators for php.
thanks a lot.
good luck
Hi,
Nice patch… very much needed…. I am using this plugin in one of my websites. It works nice except one problem on window resize. On window resize the error bubbles don’t reposition… just like I am using some custom validations and div shows/ hide…. every time a div hide or shows the form moves down or up but error popups lay still…. do you have any solutions for that…
Thanks in advance
I have a problem with this jquery validation engine, its really nice and very effective. the problem is I’m using master page and using user controls so when I create page I may need to use more than one user control in child page. so my problem is I want to validate those user controls (in other words, some specific area (can be div or html table) separately when there buttons are clicked…
Please help…