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
have you read the article at least? :) it’s not for generating captcha images . . . . it’s for custom positioning error boxes
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 ;)