jQuery Form Validator plugin

Update

Latest update to v. 1.1 to enhance compatibility with the newest jQuery v. 1.3.1.

Overview

The jQuery Form Validator plugin allows to define simple, yet powerful, validators for web pages forms. It’s simple and configurable, and allows the definition of basic validations (required fields, numeric fields, integer fields, email fields) and also of regex over the fields in the forms.

Download

You can now download v. 1.1 of the jQuery Form Validator plugin.

Demo

On this web site you can find a working demo of the plugin.

Requirements

This plugin requires jQuery to be used in the web page. It has been tested with jQuery v. 1.2.6 and v. 1.3.1, but should correctly work with jQuery v. 1.2.x/1.3.1+.

Compatibility

The plugin has been tested on Windows XP, Windows Vista, Ubuntu (7.04, 7.10, 8.04 and 8.10) and Mac OS X 10.5 and is fully supported (at least) on the following browsers:

  • IE 8 beta, 7 & 6
  • Firefox 2.0+ and 3.0+
  • Opera 9 and 9.5+
  • Safari 3+
  • Google Chrome

Usage

The usage of the Form Validator is really simple. Example following:

var formValidator = new ValidatorClass();
formValidator.init({
form:           "#myFormID",
isRequired:     ['login', 'password'],
bindElement:    '#button',
callback:       function() {
alert('Ok!');
}
});

What it does

The method init() in the ValidatorClass instance enables the validator on the form with id=”myFormID“. Two text fields are required (those whose names are login and password).

The validator binds the object with id=”button” to the ‘click’ event: when it’s clicked, the validator runs the validation over the form. If the validation is successful, the callback function is called, otherwise an alert will popup telling which fields are wrong; those fields will also be coloured using a particular convention (red=required, green=numeric, blue=integer, yellow=email, lightgray=regex).

Complete example

The complete example for the script is:

var formValidator = new ValidatorClass();
formValidator.init({
form: '#example',
errorColors: {
isRequired: 'red',
isEmail:    'yellow',
isNumeric:  'green',
isInteger:  'blue',
hasRegex:   'lightgray'
},
isRequired:         ['name','email','number', 'date@select',
'street@select', 'description@textarea'],
isEmail:            ['email'],
isNumeric:          ['number'],
isInteger:          ['integer'],
hasRegex:           [
['field1', /d./, 'Error message'],
['field2@textarea', /s{5}(d{5}s{5}){1,10}$/, 'Another error']
],
allowNullNumbers:   true,
requiredFieldMsg:   'I campi in rosso sono obbligatori',
emailFieldMsg:      'I campi in giallo devono essere email',
numericFieldMsg:    'I campi in verde devono contenere numeri',
integerFieldMsg:    'I campi in blu devono contenere valori interi',
bindElement:        ['#button1', '#button2'],
bindEvent:          'click',
callback:           [callBack1, callBack2],
});

function callBack1() {
// Do something ...
}

function callBack2() {
// Do something different ...
}

Please note the definition of the required fields: for the five validation types it is possible to define an array of the field to control. Each item can be expressed in two forms:

  1. fieldName‘, which is equivalent to the CSS selector: input[name=fieldName]
  2. fieldName@domType‘, which is equivalent to the CSS selector: domType[name=fieldName] (es. domType = textarea)

Parameters

This is the explanation for every single parameter passed to the method. The default values are expressed in the square brackets next to the name:

  • form: the id of the form that will have the validation enabled
  • errorColor: a hash variable containing these colors for the wrong fields (colors applied to the fields after the validation):
    • isRequired[‘#FDD‘]: the CSS color that the field will have if it’s required and not filled
    • isEmail[‘#FFA‘]: the CSS color that the field will have if it has an incorrect email
    • isNumeric[‘#DFD‘]: the CSS color that the field will have if it’s not a number
    • isInteger[‘#CCE‘]: the CSS color that the field will have if it’s not an integer number
    • hasRegex[‘#CCC‘]: the CSS color that the field will have if it’s not compatible with the regex
  • isRequired: an array with the names of the fields that are required
  • isEmail: an array with the names of the fields that must be valid emails
  • isNumeric: an array with the names of the fields that must be numeric
  • isInteger: an array with the names of the fields that must have integer values
  • hasRegex: an array of arrays defining the regexes. Each inner array is in the form [‘fieldName’, /regex/, ‘Error message’]
  • allowNullNumbers[false]: if it is set to ‘true’ it allows numeric and integer field to have no values without being considered wrong
  • font-weight: bold;”>requiredFieldMsg[‘Red fields are required‘]: the alert message for required fields
  • emailFieldMsg[‘Yellow fields must contain valid emails‘]: the alert message for the email fields
  • numericFieldMsg[‘Green fields must contain numbers‘]: the alert message for the numeric fields
  • integerFieldMsg[‘Blue fields must contain integer values‘]: the alert message for the integer fields
  • bindElement: an array of the id’s of the objects to which the validator will be bound
  • bindEvent[‘click‘]: the event for which the validator will be bound to the previous elements
  • callback: an array of the functions to be called if the validation is successful. Each callback function is related to a single element: i.e. callBack1 is the callback function for ‘#button1’, etc.

API

  • init(): initializes the validator (read above for the parameters to be passed)
  • reset(): without any parameter, disables the validator

Terms of use

The jQuery Form Validator plugin is licensed under a Creative Commons License and is copyrighted (C)2008-2010 by Daniele Di Bernardo.

The license page can be found at: http://creativecommons.org/licenses/by-nc-sa/2.5/it/

1.992 thoughts on “jQuery Form Validator plugin

  1. Do you mind if I quote a few of your posts as long as I provide credit and sources back to your weblog? My blog is in the very same area of interest as yours and my visitors would certainly benefit from a lot of the information you present here. Please let me know if this ok with you. Thanks!

  2. I simply had to say thanks yet again. I am not sure what I would’ve gone through in the absence of the actual solutions provided by you relating to such a area. It previously was a very frustrating problem in my view, but spending time with the professional strategy you solved it took me to cry for gladness. I am just grateful for this guidance and hope you really know what a great job that you’re accomplishing teaching many people using your webpage. I know that you’ve never come across any of us.

  3. Thank you so much for giving everyone remarkably remarkable possiblity to read in detail from here. It’s always so awesome and also stuffed with fun for me personally and my office peers to search your website at the very least thrice per week to study the latest guidance you have. Of course, I’m just usually fulfilled concerning the attractive methods you serve. Certain 3 areas in this article are in truth the best I have had.

  4. I would like to show my love for your kind-heartedness in support of those people who actually need help on your niche. Your real dedication to passing the solution all around appeared to be extremely helpful and has frequently made professionals much like me to realize their goals. This important suggestions can mean a lot to me and even further to my peers. Thanks a lot; from all of us.

  5. I just wanted to develop a brief remark to thank you for all of the lovely secrets you are showing on this site. My considerable internet lookup has at the end of the day been recognized with reliable tips to exchange with my colleagues. I ‘d claim that most of us website visitors are extremely lucky to exist in a fabulous place with many lovely people with useful solutions. I feel very grateful to have discovered your entire web site and look forward to some more excellent times reading here. Thanks a lot once more for everything.

  6. Today, I went to the beachfront with my children. I found a sea shell and gave it to my 4 year old daughter and
    said “You can hear the ocean if you put this to your ear.” She
    placed the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is totally off topic but I had to tell someone!

  7. You’re so cool! I do not believe I’ve read through anything
    like that before. So nice to find another person with a few genuine thoughts on this issue.
    Really.. many thanks for starting this up. This web site is something that is needed on the internet, someone with a bit of originality!

  8. I’ve been surfing online more than three hours nowadays, but I never discovered any attention-grabbing article like yours. It is lovely price enough for me. Personally, if all webmasters and bloggers made just right content material as you did, the web will probably be a lot more useful than ever before.

  9. Thank you, I’ve recently been looking for info about this topic for a while and yours is the greatest I have found out so far. However, what in regards to the bottom line? Are you positive concerning the supply?

  10. An intriguing discussion is worth comment. I believe that you need to publish more
    about this subject matter, it may not be a taboo matter but typically people do not talk about these
    topics. To the next! Cheers!!

  11. Hi there! This is kind of off topic but I need some guidance from an established blog.
    Is it very hard to set up your own blog? I’m not very techincal but I can figure things out pretty quick.
    I’m thinking about creating my own but I’m not sure where to begin. Do you have any ideas or suggestions?

    Appreciate it

  12. I’m really enjoying the theme/design of your blog. Do you
    ever run into any internet browser compatibility problems?
    A few of my blog visitors have complained about my blog not operating correctly in Explorer but
    looks great in Opera. Do you have any advice to help fix this
    issue?

  13. Right here is the perfect site for anybody who wishes to
    find out about this topic. You know a whole lot its almost tough to
    argue with you (not that I really will need to…HaHa).
    You certainly put a fresh spin on a subject that
    has been written about for decades. Wonderful stuff,
    just great!

  14. I am curious to find out what blog system you are utilizing?
    I’m having some minor security issues with my latest
    blog and I’d like to find something more risk-free. Do you have any solutions?

  15. After looking at a number of the blog articles on your web site, I honestly appreciate your technique of blogging. I book-marked it to my bookmark website list and will be checking back soon. Take a look at my website too and tell me what you think.

  16. You’re so interesting! I do not suppose I’ve truly read through a single thing like that before. So great to find somebody with original thoughts on this issue. Seriously.. thanks for starting this up. This web site is something that is needed on the web, someone with a little originality.

  17. Hello there, simply became alert to your weblog thru Google, and found that it’s really informative. I’m going to be careful for brussels. I’ll be grateful should you continue this in future. A lot of folks might be benefited out of your writing. Cheers!|

  18. you are in point of fact a just right webmaster. The website loading speed is incredible. It sort of feels that you’re doing any distinctive trick. Moreover, The contents are masterwork. you’ve done a excellent process on this matter!

  19. I do accept as true with all of the ideas you’ve introduced for your post. They’re very convincing and will definitely work. Nonetheless, the posts are very brief for novices. May just you please lengthen them a little from subsequent time? Thanks for the post.

  20. Woah! I’m really enjoying the template/theme of this blog. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between user friendliness and visual appearance. I must say you have done a awesome job with this. In addition, the blog loads very quick for me on Chrome. Superb Blog!|

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *