the Fictionalrealm / Coding

jQuery Inline Form Validation Engine

Recently I’ve been surfing the net in search of a jQuery powered form validation plugin, the best of what I found is the jQuery Inline Form Validation Engine. On the left is a screenshot of plugin’s performance which i find quite good from both programming and design point of views.  The screenshot is taken from plugin’s author’s website at http://www.position-absolute.com.

It’s quite easy to implement in your project and consists from just a couple of JS files one ( one of them contains  error messages and validation rules and the other validation code itself).  Also you have to include a single css file and that’s all. No images required at all.

You can easily add your own custom validation rules and tweak the stuff that’s already present in the code. Everything is pretty simple and requires a basic knowledge of JavaScript.

With this 3 files you get a really good looking error massage (you can change the design by tuning the CSS), regexp validation, some basic stuff that’s already implemented like email validation and confirm password field’s validation, typed in value’s length validation and AJAX validation. All you have to do to enable the validation engine is describe what validation procedures should be applied to a certain field of your form by adding various classes to it and call an initialization function of the validation engine. The end result looks something like this:

<form id="myFormId" method="post" action="myform.php">
    <input id="email" class="validate[required, custom[email], ajax[ajaxEmailAvailability]]" name="email" type="text" />
    <input id="submitButton" type="submit" value="Submit Form" />
</form>
<script>
    $("#myFormId").validationEngine({});
</script>

The Cons of the plugin in my opinion are:

• Does not support window resize. When you resize the browser all the validation bubbles shift from the fields they should be attached to. Cause of this you have to close all the bubbles on window.resize event. A fix for this is planned for 1.7 release ( the current version is 1.6.2)
• There’s no way to custom position the validation bubbles and if you got a form with a little complex design it’s possible that the bubbles will get on some other important stuff (mine was getting on the captcha image when validating the captcha code). It’s like this – can tell all the bubbles in the form to show in the upper right, lower right, upper left, lower left and just on the right of the input box but you can’t tell a specific bubble to appear in your desired location.  (I’ve written a patch allowing custom positioning located here)

Overall i highly recommend the plugin. It’s very comfortable to use and get accustomed to. And looks good!