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. Hi,
    very nice code, couple of suggestions:

    1. id, name consistency *i had to hack in couple of $(caller).attr(“name”) to $(caller).attr(“id”) in order to get .formError container to work with symfony’s forms.
    as an example in symfony inputs are generated with somename[input_name] as name and somename_input_name as id. .formError container won’t hide. This kind of name/id generation helps on POST to retrieve form values as an array inside the request

    2. slinding panel. As an example: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
    .formError container is positioned absolute and stays on top when sliding up. Wanted to ask if there is an idea beside looking into input field parents visibility (form, panel) and to hide the .formError container. Think this should be configurable.
    For now the single hack is to find .formError containers and fadeTo 0 respectively when sliding-up and to 0.9 when sliding down (at the end of the slide action)
    below the code

    // Collapse Panel

    // Expand Panel


  2. @Mark you can use this

    Hide bubbles
    Show bubbles

    jquery script:

    $(this).fadeTo(”fast”,0); });

    $(this).fadeTo(”fast”,0.9); });

  3. Hi!

    Wow nice piece of code. I love it. Looks good and is easy to implement 🙂

    However I have a question. I have a form with 2 input fields that should contain dates. For example, the first field has the name “start_date” and the second field has the name “end_date”. Is it possible with your validator to check if the date in start_date is prior to the date in end_date? start_date < end_date?
    Something like dateprior[fieldID] or datelater[fieldID].

    Also another action would need to check if booth fields contain dates or both fields contain no dates. Because you should not be able to enter a date in “start_date” without entering a date in “end_date”, but it’s valid to enter no dates at all.

    Is that somehow possible with your library or easy to implement?

    regards from Austria

  4. Thanks for the code.

    I need to add this to an old CMS from ’90. I have to add class by javascript like this.

    var inputid = $(this).attr(“id”);

    $(this).removeClass().addClass(‘validate[required,custom[onlyLetter],length[0,100]] text-input’);

    }else if(inputid==’e-post’){
    $(this).removeClass().addClass(‘validate[required,custom[email]] text-input’);
    }else if (inputid==’telefon’){
    $(this).removeClass().addClass(‘validate[required,custom[telephone]] text-input’);

    However if I add class with js, it does not work. Is it because event delegation problem?

    Can anyone tell me how I can make it work even I have to add class by js?

  5. Nice piece of script.

    I have been working on a big form which divided into multiple subforms. I have got 2 buttons(previous/next) (input:button) on each multiple subforms. I want to run the validation when people click on the next button. Is it possible to execute the validation by clicking the buttons?

    As far as I know validation would be run when on form submit event only. thanks.

  6. If you want to use it with date-picker you have to add this line:
    $(this+”[class*=date-pick]”).filter(“[class*=validate]”).bind(“change”, function(caller){loadValidation(this)})

  7. Thx for the response. this code:

    $(this).fadeTo(”fast”,0); });

    $(this).fadeTo(”fast”,0.9); });

    works great but when you have more than one form on a page its closing all the bubbles. I’m trying to target a specific form but cant seem to get it to work. Is it possible to target a specific form using an id?

  8. Hi this is a great plugin. But unfortunately, the date validation in the demo doesn’t work. I entered 9999-33-11 and it didn’t throw any validation error.

  9. @Mark unfortunatelly with the current code the hack doesn’t work with 2 forms, because the
    error containters (bubbles) are generated only with the name of the input field.
    <div class=”formError user_email”
    user_email is the name of the input field in the form.
    i think the code can be tweaked to generate an extra html tag – i’d say “rel” to point to the form ID so you can filter in the click() function.
    Would be nice if Cedric would add this functionality enhancement.

  10. Thanks for the great plugin. I’m having trouble using it with hidden fieldsets. In my form, depending on the user’s selection in a dropdown, different fieldsets of the form are hidden or displayed. This plugin is still trying to validate the parts of the form that are display none. The validation messages end up stacked in the top left edge of the window for all the invisible fieldsets. Is there a way I can make it only validate the fieldsets that aren’t set to display none at the time the form is submitted?

  11. @Cedric Douglas – Hi Cedric, I know what you mean, .Net does mess with the name attr.

    Could you not use the rel attr or something like most other plugins for v1.3?

    Also it would be good if you could subscribe to a post on your blog so that I can follow the replies in case there is a fix.. keep up the great work 😉

  12. Tried with JSF something like

    The validation works and the message appears but when I go back and enter a valid input and move out of focus, the error message does not disappear. This seems to be happening with JSF inputText tag only. Any comments for a workaround??


  13. @Shawn try using optional instead of required, not a perfect solution but should work.

    @markive, when the 1.3 will be out I will announce it on the site, subscribe to the article rss feed maybe. I need to say that the name use is a big problem I had not think about, I will correct this in the following month for sure.

    @donny, well it do not validate if you enter idiot numbers unfortunatly, more like if the
    user do not match the date format, you could use a better regex.

    @marius I will try to improve the way bubble are created so it stop messing around with so much of you guys,

    I’m trying to keep up with all the comments guys, this script had an overwhelming response, please understand that I created this script for my job I cannot work allm day long on it 😉

  14. Hi Cedric!

    This form is the best form Ive ever seen and Im trying to use your validation, but when i write swedish characters the validation engine dosent recognize it.

    I tried to add the characters åäö ( dont know if you can see them ) in regex but it wont work.

    Do you got any tips or ideas to make this work?

    Best Regards.

  15. @Charlie I do not know how internationalisation work with special character,sorry, maybe you could try modify the regex, You should be able to find regex validations for your language in some swedish coding sites.

  16. Hi Cedric! 😀

    Ive got it to work, dont know if you want this in your documentation…

    But this is how I did it:

    1. I changed the encoding from utf-8 to 8859-1 ( As below:

    2. I added this:
    “regex”:”/^[A-ZåäöÅÄÖa-z \ \’]+$/”,

    Works like a charm! 😀

    Easily the best jQuery plug 2009!

  17. It is a wonderful code.
    There is one noticed point and I want to report.

    I am Japanese. It reports though it is likely not to be told well because English is not understood.

    When slash (/) mixes with name and id of input, it seems not to operate correctly.


  18. Great work. I only have one problem though. My form is a long form and it is placed in a div container whose height is variable (a little shorter than the browser window height) with overflow:auto so we can see scroll bars.

    The bubbles appear in odd places when first rendered. Is there a way I can adjust the placement of the bubbles to match this case?

  19. hello sir
    thanks for nice script.
    how can i make prompts to disappear after say 10 seconds so that if input fields are very close to each other, prompts wont block entering data into input fields.
    i tried adding $(divFormError).fadeOut(10000); after $(divFormError).fadeTo(“fast”,0.8);
    it works fine but after that if submit button is clicked , no more prompts appear for errors.
    please guide

  20. Nice script!

    There might be an issue with the below code…
    $(this).not(“[type=checkbox]”).bind(“blur”, function(caller) { return loadValidation(this) })
    $(this + “[type=checkbox]”).bind(“click”, function(caller) { loadValidation(this) })

    Validation is performed on all elements on the form regardless whether the element contains a class attribute value of ‘validate’.

  21. @Cedric Thanks for the suggestion of using optional instead of required for the hidden elements so they won’t validate. It works if I manually set them, but can you or anyone else suggest how I would go about changing the class to optional for all display:none elements before validation? I’m guessing that I could find all display:none and change class to “validate[optional” on submit, but I can’t figure out the correct way to write it in jQuery. Would something like that even work?
    Thanks again for the great plugin… I hope I can get it to work with the hidden elements and still have some of them be required.

  22. I think date validation should be maded with regex like telephone instead of fix format. Thanks for this good job.

  23. Kudos to you.

    How can I add a php parameter to the username if I want it to be unique?


  24. Wroks like charm in WordPress too. I just replaced all $ with jQuery so theres no conflicts with other libraries.

  25. Found a really annoying problem with this validation.
    I have form where you can choose how many names you want to fill in and it hides the divs with a dropdown.
    If you show 4 persons and then go back to 1 it still shows the errors for the hidden fields.

    Any idea how to hide errors for not visible inputs?

  26. Credit card custom rule:

    I was using the regex:

    “regex”: “/^((4\d{3})|(5[1-5]\d{2}))(-?|40?)(\d{4}(-?|40?)){3}|^(3[4,7]\d{2})(-?|40?)\d{6}(-?|40?)\d{5}/”,

    It does not work. I get this link directly from

    Please help…

    Great job. this plugin does everything for me … Thank you

  27. @Mack, I have the same problem… It was suggested that I make the hidden fields optional, and that works, but I still need a way to require them if they’re not hidden. Please share if you find a solution.

  28. Does anyone has any suggestion to setup an inline rule for running a external function which can return a true or false coupling with a string as error msg.
    This will compensate any addition fancy validation such as credit cad number.
    There are many external javascript function to perform such function.

    Thank you in advance.

  29. I’m testing this, but when every time this validate a field, the script is creating a new div formError, whith out destroy or modify that exist for same field. And if i correct error of field the div keep active. Can you help me?

    Sorry my english ( I’m Brazilian)

Comments are closed.