When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

Download the source code View demo

Validations range from email, phone, url to more complex calls such as ajax processing.
Bundled in several locales, the error prompts can be translated in the locale of your choice.

**Important**: v2 is a significant rewrite of the original 1.7 branch. Please read the documentation as the API has changed! Also the documentation is always more up to date on the github README

Legacy 1.7 documentation and download can be found under package when you hit download on github


1. Unpack the archive
2. Include the script jquery.validationEngine.closure.js in your page
3. Pick the locale of the choice, include it in your page: jquery.validationEngine-XX.js
4. **Read this manual** and understand the API

Running the Demos

Most demos are functional by opening their respective HTML file. However, the Ajax demos require the use of Java6 to launch a lightweight http server.

1. Run the script `runDemo.bat` (Windows) or `runDemo.sh` (Unix) from the folder
2. Open a browser pointing at [http://localhost:9173](http://localhost:9173)


First link jQuery to the page

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>

Attach *jquery.validationEngine* and its locale

    <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

Finally link the desired theme

    <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

Field validations

Validations are defined using the field’s **class** attribute. Here are a few examples showing how it happens:

    <input value="someone@nowhere.com" class="validate[required,custom[email]]" type="text" name="email" id="email" />
    <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
    <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" />

For more details about validators, please refer to the section below.


The validator is typically instantiated by using a call of the following form:

    $("#form.id").validationEngine(action or options);

The method takes one or several optional parameters, either an action (and parameters) or a list of options to customize the behavior of the engine.

Here comes a glimpse: say you have a form is this kind

    <form id="formID" method="post" action="submit.action">
        <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />

The following code would instance the validation engine:




Initializes the engine with default settings

    $("#formID1").validationEngine({promptPosition : "centerRight", scroll: false});
    $("#formID1").validationEngine('init', {promptPosition : "centerRight", scroll: false});
Attaches jQuery.validationEngine to form.submit and field.blur events.
<pre lang="html">
Unregisters any bindings that may point to jQuery.validaitonEngine.
<pre lang="html">


Validates the form and displays prompts accordingly. Returns *true* if the form validates, *false* if it contains errors. Note that if you use an ajax form validator, the actual result will be delivered asynchronously to the function *options.onAjaxFormComplete*.

    alert( $("#formID1").validationEngine('validate') );

showPrompt (promptText, type, promptPosition, showArrow)

Displays a prompt on a given element. Note that the prompt can be displayed on any element an id.

The method takes four parameters:
1. the text of the prompt itself
2. a type which defines the visual look of the prompt: ‘pass’ (green), ‘load’ (black) anything else (red)
3. an optional position: either “topLeft”, “topRight”, “bottomLeft”, “centerRight”, “bottomRight”. Defaults to *”topRight”*
4. an optional boolean which tells if the prompt should display a directional arrow

       <legend id="legendid">Email</legend>
       <a href="#" onclick="$('#legendid').validationEngine('showPrompt', 'This a custom msg', 'load')">Show prompt</a>


Closes error prompts in the current form (in case you have more than one form on the page)

    $('#formID1').validationEngine('hide')">Hide prompts


Closes **all** error prompts on the page.



Options are typically passed to the init action as a parameter.
$(“#formID1”).validationEngine({promptPosition : “centerRight”, scroll: false});


Name of the event triggering field validation, defaults to *blur*.

Tells if we should scroll the page to the first error, defaults to *true*.


Where should the prompt show ? Possible values are “topLeft”, “topRight”, “bottomLeft”, “centerRight”, “bottomRight”. Defaults to *”topRight”*.

If set to true, turns Ajax form validation logic on. defaults to *false*.
form validation takes place when the validate() action is called or when the form is submitted.

onBeforeAjaxFormValidation(form, options)
When ajaxFormValidation is turned on, function called before the asynchronous AJAX form validation call. May return false to stop the Ajax form validation

onAjaxFormComplete: function(form, status, errors, options)
When ajaxFormValidation is turned on, function is used to asynchronously process the result of the validation.

Set to true when the form shows in a scrolling div, defaults to *false*.

Selector used to pick the overflown container, defaults to *””*.


Validators are encoded in the field’s class attribute, as such


Speaks by itself, fails if the element has no value. this validator can apply to pretty much any kind of input field.

    <input value="" class="validate[required]" type="text" name="email" id="email" />
    <input class="validate[required]" type="checkbox" id="agree" name="agree"/>
    <select name="sport" id="sport" class="validate[required]" id="sport">
       <option value="">Choose a sport</option>
       <option value="option1">Tennis</option>
       <option value="option2">Football</option>
       <option value="option3">Golf</option>


Validates the element’s value to a predefined list of regular expressions.

<input value="someone@nowhere.com" class="validate[required,custom[email]]" type="text" name="email" id="email" />

Please refer to the section Custom Regex for a list of available regular expressions.


Validates a field using a third party function call. If a validation error occurs, the function must return an error message that will automatically show in the error prompt.

    function checkHELLO(field, rules, i, options){
      if (field.val() != "HELLO") {
         // this allows the use of i18 for the error msgs
         return options.allrules.validate2fields.alertText;

The following declaration will do

<input value="" class="validate[required,funcCall[checkHELLO]]" type="text" id="lastname" name="lastname" />


Delegates the validation to a server URL using an asynchronous Ajax request. The selector is used to identify a block of properties in the translation file, take the following example.

    <input value="" class="validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCall]] text-input" type="text" name="user" id="user" />
    "ajaxUserCall": {
        "url": "ajaxValidateFieldUser",
        "extraData": "name=eric",
        "alertText": "* This user is already taken",
        "alertTextOk": "All good!",
        "alertTextLoad": "* Validating, please wait"

* url – is the remote restful service to call
* extraData – optional parameters to sent
* alertText – error prompt message is validation fails
* alertTextOk – optional prompt is validation succeeds (shows green)
* alertTextLoad – message displayed while the validation is being performed

This validator is explained in further details in the Ajax section.

Check if the current field’s value equals the value of the specified field.

Validates when the field’s value if less or equal to the given parameter.

Validates when the field’s value if more or equal to the given parameter.

Validates if the element content size (in characters) is more or equal to the given *integer*. integer <= input.value.length maxSize[integer]
Validates if the element content size (in characters) is less or equal to the given *integer*. input.value.length <= integer past[NOW or a date]

Checks if the element’s value (which is implicitly a date) is earlier than the given *date*. When “NOW” is used as a parameter, the date will be calculate in the browser. Note that this may be different that the server date. Dates use the ISO format YYYY-MM-DD

    <input value="" class="validate[required,custom[date],past[now]]" type="text" id="birthdate" name="birthdate" />
    <input value="" class="validate[required,custom[date],past[2010-01-01]]" type="text" id="appointment" name="appointment" />

future[NOW or a date]

Checks if the element’s value (which is implicitly a date) is greater than the given *date*. When “NOW” is used as a parameter, the date will be calculate in the browser. Note that this may be different that the server date. Dates use the ISO format YYYY-MM-DD

    <input value="" class="validate[required,custom[date],future[now]]" type="text" id="appointment" name="appointment" /> // a date in 2009
    <input value="" class="validate[required,custom[date],future[2009-01-01],past[2009-12-31]]" type="text" id="d1" name="d1" />


Validates when a minimum of *integer* checkboxes are selected.
The validator uses a special naming convention to identify the checkboxes part of the group.

The following example, enforces a minimum of two selected checkboxes

    <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck1" value="5"/>
    <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck2" value="3"/>
    <input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck3" value="9"/>

Note how the input.name is identical across the fields.


Same as above but limits the maximum number of selected check boxes.


We’ve introduced the notion of selectors without giving much details about them: A selector is a string which is used as a key to match properties in the translation files.
Take the following example:

    "onlyNumber": {
        "regex": /^[0-9\ ]+$/,
        "alertText": "* Numbers only"
    "ajaxUserCall": {
        "url": "ajaxValidateFieldUser",
        "extraData": "name=eric",
        "alertText": "* This user is already taken",
        "alertTextLoad": "* Validating, please wait"
    "validate2fields": {
        "alertText": "* Please input HELLO"

onlyNumber, onlyLetter and validate2fields are all selectors. jQuery.validationEngine comes with a standard set but you are welcome to add you own to define AJAX backend services, error messages and/or new regular expressions.


Ajax validation comes in two flavors:

1. Field Ajax validations, which takes place when the user inputs a value in a field and moves away.
2. Form Ajax validation, which takes place when the form is submitted or when the validate() action is called.

Both options are optional.


The client sends the form fields and values as a GET request to the form.action url.

Client calls url?fieldId=id1&fieldValue=value1&…etc ==> Server (form.action)

Server responds with a list of arrays: [fieldid, status, errorMsg].

* fieldid is the name (id) of the field
* status is the result of the validation, true if it passes, false if it fails
* errorMsg is an error string (or a selector) to the prompt text

Client receives <== [["id1", boolean,"errorMsg"],["id2", false, "there is an error "],["id3", true, "this field is good"]] Server Note that only errors (status=false) shall be returned from the server. However you may also decide to return an entry with a status=true in which case the errorMsg will show as a green prompt.


Since the form validation is asynchronously delegated to the form action, we provide two callback methods:

**onBeforeAjaxFormValidation(form, options)** is called before the ajax form validation call, it may return false to stop the request

**onAjaxFormComplete: function(form, status, json_response_from_server, options)** is called after the ajax form validation call

Custom Regex

jQuery.validationEngine comes with a lot of predefined expressions. Regex are specified as such:

<input value="" class="validate[custom[email]]" type="text" name="email" id="email" />

Note that the selector identifies a given regular expression in the translation file, but also its associated error prompt messages and optional green prompt message.

a typical phone number with an optional country code and extension. Note that the validation is **relaxed**, please add extra validations for your specific country.

49-4312 / 777 777
+1 (305) 613-0958 x101
(305) 613 09 58 ext 101
+33 1 47 37 62 24 extension 3
(016977) 1234
04312 – 777 777
+58 295416 7216

matched a url such as http://myserver.com, https://www.crionics.com or ftp://myserver.ws

easy, an email : username@hostname.com

an ISO date, YYYY-MM-DD

floating points with an optional sign. ie. -143.22 or .77 but also +234,23

integers with an optional sign. ie. -635 +2201 738

an IP address (v4) ie.

Only numbers and spaces characters

Only letters and space characters

Only letters and numbers, no space

Using the engine in a overflown div

The big change in this method is that normally the engine will append every error boxes to the body. In this case it will append every error boxes before the input validated. This add a bit of complexity, if you want the error box to behave correctly you need to wrap the input in a div being position relative, and exactly wrapping the input width and height. The easiest way to do that is by adding float:left, like in the example provided.


What would be a good library without customization ?

Adding regular expressions

Adding new regular expressions is easy: open your translation file and add a new entry to the list

    "onlyLetter": {
        "regex": /^[a-zA-Z\ \']+$/,
        "alertText": "* Letters only"

* “onlyLetter” is a sample selector name
* “regex” is a javascript regular expression
* “alertText” is the message to display when the validation fails

You can now use the new regular expression as such

<input type="text" id="myid" name="myid" class="validation[custom[onlyLetter]]"/>

Don’t forget to contribute!

Customizing the look and feel

Edit the file *validationEngine.jquery.css* and customize the stylesheet to your likings. it’s trivial if you know CSS.

Adding more locales

You can easy add a locale by taking *jquery.validationEngine-en.js* as an example.
Feel free to share the translation 😉

Rules of thumb

* field.id are **unique** across the page
* for simplicity and consistency field.id and field.name should match (except with minCheckbox and maxCheckbox validators)
* spaces or special chars should be avoided in field.id or field.name
* use lower cases for input.type ie. *text, password, textarea, checkbox, radio*
* use the Ajax validator last ie. validate[custom[onlyLetter],length[0,100],**ajax[ajaxNameCall]**]
* use only one Ajax validator per field!
* JSON services should live on the same server (or you will get into browser security issues)
* in a perfect RESTful world, http **GET** is used to *READ* data, http **POST** is used to *WRITE* data: which translates into -> Ajax validations should use GET, the actual form post should use a POST request.


Contributions are always welcome, you may refer to the latest stable project at [GitHub](https://github.com/posabsolute/jQuery-Validation-Engine)
We use [Aptana](http://www.aptana.com/) as a Javascript editor and the Rockstart JSLint & Closure plugins http://update.rockstarapps.com/site.xml


Licensed under the MIT License


Copyright(c) 2010 Cedric Dugas
v2.0 Rewrite by Olivier Refalo

If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!

Version 1.7.1 Online
October 20 2010, release v1.7.1: Compatibility release for jQUery 1.4.3
July 1 2010, release v1.7: div overflown support + small fix to inline ajax validation + small code overhaul
Feb 1 2010, release v.1.6.3: bugfixs from forum + exempString rule addition, update to jQuery 1.4
November 23, release v.1.6.2: bugfix script loaded via ajax,
November 23, release v.1.6.1: Refactoring, external loadvalidation() is back working, languages are now ALL loaded externally, added setting to not unbind form on success,
October 29, release v.1.6: unbind validation when success function is called, option returnIsValid added
October 27, release v.1.5: Added debug mode, event triggerer can be specified in setting and checkbox bug with cakephp corrected
September 17, release v.1.4: More frameworks support, changes with the minCheckbox and maxCheckbox
August 25, release v. Ajax submit, prompt positioning, bug correction with multiple forms
August 13, release v.1.3: Ajax validation, prompts usable outside the plugin, minor CSS corrections
July 12, release v.1.3: Validation with ids instead of name, minor CSS corrections, optional inline validation.
June 5, release v.1.2.1: Added optional validation
June 5, release v.1.2: Less error prone reg Ex, corrected an error with multiple form on the same page
June 4, release v.1.1: added date validation and select required validation, corrected errors with group radio input
June 1, release v.1.0

Comments are closed due to the overwhelming number, please use the forums for support.


Become expert in web development with testking using self paced testking HP0-D07 study guides and testking 646-671 jQuery tutorials.

491 thoughts on “A jQuery inline form validation, because validation is a mess

  1. Man I wish I could post code! heh, it keeps dumping my comments. There is an issue with this line:

    if($.validationEngine.submitForm(this,settings) == true) {return false;}

  2. Trciky, I must admit. 🙂
    This piece of Your code is particulary important:

    $(document).ready(function() {

    When You submit the form, page refresh itself and functions in $(document).ready(function() part are executed when Your page finishes loading. Now, I think that for some reason Your fields keep filled data and therefore form is submitting over and over again in a loop. Try to submit Your data to some other page, for example page.html and see if your script goes to that page when You click submit.
    One other thing, why do You have two fields with the same name:

    <input name=”submit” type=”hidden” value=”true” />
    <input name=”submit” type=”submit” value=”Send Form” />

  3. The reason the form kept executing when I had the submit() enabled was that the form validated successfully so it fired the success: function() code part of that code was to submit the form.. again, so then it validated successfully again, and then submitted the form again. All the document.read does is to enable the validationEngine and then bind the form tag to a custom submit routine.

    I did set the form to submit to a different page, which is the way it is currently.

    The reason I had the double submit tags was that if someone just hit the enter key instead of clicking on the submit button then the “submit” variable would still be populated. I could have called the hidden one “submitted”, it doesn’t really matter.

  4. And this line is still commented:


    Does it work with action set to test.html? 🙂

  5. One other thing that keeps bugging me, since I cant just copy and paste Your code to play with it, why do You have return true after form submit? I didnt use it in my project and I dont see a need for it in this case. 🙂

  6. No neither works, when I comment out this line in the validator class:

    if($.validationEngine.submitForm(this,settings) == true) {return false;}

    Then when the script succeeds it submits the form, but then it doesn’t fire the “success” part. And because it’s not firing the success part the action part of the form is not being set by my script *heh* Oye!!!

  7. Right now I have return true just to make sure that the form is indeed returning true to go ahead and submit the form. It probably defaults to return true, but at this point I just want to make sure 🙂

  8. You wont beleieve what I just did. 🙂
    I got all Your js and css files. I couldnt resist, I needed to try it myself.
    This is what I had and this works, it goes to test.htm page:

    var formAction = ‘security-form.htm?action=submit’;
    formAction = ‘test.htm’;

    And this:

    else {
    //alert(‘form should have fired’);
    //return true;

    One more thing, You shouldnt submit data to static html pages, it can cause some server errors.
    Once I removed alert form the success part it went through. 🙂
    Hope this helps.

  9. *sigh* why does it work for you.. could you check my js again? Im pretty sure I just set it to what you have and it’s not working still 🙁

    I didn’t know about submitting data to a static page.. what’s the issue? it would actually throw a 404 erorr which I intercept, since test.htm doesnt actually exist.

  10. Ok it’s working, but I am getting a javascript recursion problem and Im not sure if it’s because of the .submit() issue. My guess is yes, but I hope I am wrong 🙁

  11. Do You have any error in Java console?
    And about submitting, static html cant process from fields in usual way.
    So in order to process it, You should use something like php, asp, asp.net, jsp or something similar, there is many possibilities, but html is not one of them.
    One step at a time, first to solve this problem with submit. 🙂

  12. heh actually Im a php developer 🙂 The extension is .htm but the whole site is pointing to one php file. I have that part covered, it’s just this validation thing! The old version was working great, this one.. well works great except for when I wanted to disable forms if javascript was not turned on.. now bam, kaboooooom! 🙂

    It’s a bit annoying I can not figure out why it is working the way it is 🙁

  13. Sorry If I sounded a little bit rude about Your knowledge. That was not my intention. 🙂
    Im so pleased that Cedric provided us opportunity to learn through his great work.
    I spent day and a half for my problem with this plugin before I solved it, but I learned a lot.
    Anyway, back on your problem, so now it works but You have recursion problem?
    Is there any error about javascript in error console?

  14. Yeah it says too many recursions and that’s pretty much it. Im actually leaning towards that it’s an ajax issue. It sounds like it thinks there is an ajax request when I have success set, so it is submitting the form, but we’re just not seeing it since it’s in the background. And no worries about my knowledge, you just met me.. no way for you to know much about me, except that Im having a hard time getting this thing to work! 🙂

  15. Ok the issue is this line:

    if ($.validationEngine.settings.success){ // AJAX SUCCESS, STOP THE LOCATION UPDATE
    $.validationEngine.settings.success && $.validationEngine.settings.success();
    return true;

    Not sure how to fix it yet though

  16. Ok i got it working. It was indeed the line I mentioned above, so I changed it to:

    if ($.validationEngine.settings.success()){ // AJAX SUCCESS, STOP THE LOCATION UPDATE
    return true;

  17. @Bosko: thanks for your help in troubleshooting this.. whew what a pain!

    @Cedric: Could you look into this issue whenever you release a new version? Basically I didn’t want to use Ajax, but I still wanted to use the success function. Thanks again for a great script!

  18. Great Rick. Im also looking forward to the correction of success call.
    Glad that You can now continue with Your work. 🙂

  19. No offense, this plugin looks great at a first glance but is extremely frustrating to get to work. The documentation written here is very hard to grasp and I’ve just spent the last 3 hours trying to get it to work without getting random errors.

  20. Also, one other thing to note is that I cannot find anywhere any reference about getting this to work WITHOUT a form and without a submit button.

    Any help would be much appreciated.

  21. Hi.
    I have this problem:
    when i call $.validationEngine.closePrompt(”#date”)
    prompt for “date” will close but the very next time when I have wrong date and need validation on it the prompt wont show but the form will not submit (which means that validation on this field is done)

  22. Hi.
    I have this problem:
    when i call $.validationEngine.closePrompt(”#date”)
    prompt for “date” will close but the very next time when I have wrong date and need validation on it the prompt wont show but the form will not submit (which means that validation on this field is done)

  23. Ok, I will try to describe my code.
    The form in which is my input element for validation is in an DIV element.

    I think that the problem persist because I use
    to fill the div. So I have an menu and when I click an every time I click item on it I call $(“#content”).load(“/dynsale/web/CategoryParam.jsp”); to fill the div.
    When I click an menu item I also call $.validationEngine.closePrompt(”#code”) to close previous validation prompt for my input element. This works good the prompt is closed but the very next time when I have wrong input and need validation on it the prompt wont show

  24. No, my input element still have validation event bind on it when I reload JSP page. I have
    this script in JSP page

    // SUCCESS AJAX CALL, replace “success: false,” by: success : function() { callSuccessFunction() },
    success : false,
    failure : function() {}
    // Exterior prompt close example

    which means validation on form elements is set again.
    I have done debug on jquery.validationEngine.js and noticed in row 281
    is written ($(“div.”+prompt).size() ==0) ? $.validationEngine.buildPrompt(caller,promptText,”error”) : $.validationEngine.updatePromptText(caller,promptText);

    When I call call $.validationEngine.closePrompt(”#date”) and after that reload my div “content” with same page in row 281 $(“div.”+prompt).size() =1 for my validation input element. and that is why I do not see new validation prompt again

  25. Let me know if I understood You correctly. 🙂
    You bind validationengine on #AddCategoryParamForm when You load a page. Then, when You click some menu item You poopulate this div with some content You want to validate?

  26. Nice Tools
    But one missing thing is show alert in Left side of fields, When Page direction set to RTL We need to show message in Left Side of field but in this version it is impossible

  27. I have tried various regex for file extensions, but non of them work. Has anyone got one that works!? They worked on the older versions.

  28. I’m copying part of the demoSubmit.html file and I can’t fint why, when it works, the form gets submitted twice and to success messages appear.

    Any ideas?

  29. This would be a great plugin, if you didn’t take so much control away from the user. As far as I can see there are two options once the form validates: call the submit event, or use your prescribed ‘ajax event’ which is limited in customization to the URL!!! Unfortunately I’ve got a lot more work I need to do after validation and before I submit the form via ajax. I need to wire up callbacks for an ajax loader, dialog close event, ajax preload event and an ajax success event.

    why can’t we do this:

    if(“#formid”).isValid() {
    // do all the work I need to do
    // Call my custom ajax method
    } else return;

    As far as I can see the only options we have are to submit the form or to use your ajax method.

    I think you would have a far far better product if you picked up the official (yet abandoned) JQuery.Validate plugin, and enhanced it to make use of your beautiful tooltips. Thus providing a cutting edge and highly extensible validation system, with some very nice eye candy.

  30. Bug that will affect RoR users – If the id of a field contains ‘[]’ then the prompts are not disappearing even after the field’s error is addressed.

  31. One more thing – any validation that has a regex in it must be called as ‘custom[validation]’
    For example, if your field needs the email validator rule, then you need –

  32. ruby forms will be compatible with 1.4, I will probably released it next week,

    @Kevin I like your ideas, and a beforesent option would be nice, as for using the bassistance plugin,

    I needed a script that would be custom to my need and would be blazing fast to impliment, and this is doing it 90% of the time, and when it’s not, it is really easy to modify it.

Comments are closed.