Pages

Sunday, March 6, 2011

jQuery: Lightweight Validation Plugin


Here is a validation plugin that I've been working on in my spare time and while also at my day job. I asked my employer, Catalyst, if I could release this as open source and they told me to post it.

Brief documentation:
//Initialize: 
$('.elementsToValidate').validateHandle();
//Add rules if they aren't in the default rule set ($.fn.validateHandle.defaults.defaultRule):
$('#specificElement').addRule({ "rule": /^[0-9]{1,20}$/, "message": "Can only be digits foo!" });
//Validate:
$('.elementsToValidate').validate();
The reason I created this plugin is because it seems like the validation plugins that are out there are pretty good but they're all quite large and we didn't need all the frills so I created this lighter weight validation that does a great job.
Please comment if you found the plugin useful or if you think there need to be improvements. Give me 5 stars on the jQuery plugins page here if you enjoyed my plugin. Thanks!
  • Cross-browser compatible
  • Current version: 1.0.2
  • MIT License
  • Compressed Size: 4.82 KB

5 comments:

  1. It seems that the Demo doesn't work? (Firefox 3.6.15)

    ReplyDelete
  2. Hello!
    How can i create a rule so that the field is required ?
    I tried:
    $("my_field_name").addRule({ "rule": /^.{1,}$/ , "message": "This field is required." });
    ...but the user can put one or several blank character and valid the form...

    ReplyDelete
  3. @Frans: I have fixed the issue on the demo page. Everything seems to be working on FF 3.6.15 now.

    @Anonymous: The . character matches any character when used in a regex. If you refactor your regex I believe you will see the validation you are looking for. Also there is a readme section at the top of the uncompressed jquery.validateHandle.js file that would be helpful.

    Here are some good regex tools that I use:
    http://regexpal.com/
    http://regex.larsolavtorvik.com/

    ReplyDelete
  4. Hi Sam,

    Cheers for the plugin... we had it up and running in 30 minutes flat, and it is working exactly as we hoped it would... great stuff!

    However, it appears that there's a (relatively small) bug in Webkit-based browsers (Safari and Chrome on Mac) when applying client-side validation to "select" input fields, ie. dropdown boxes.

    I have prepared and example demoing the issue, as well as some screenshots, but I couldn't find an email address for you on here (or on the jQuery plugin website for that matter).

    Lemme know what would be the best way to get this stuff across to you.

    Cheers,

    Peter

    ReplyDelete
  5. @Peter: Please email me at samonstuffblog@gmail.com. I do not have a mac to test on though. So it might be something that you have to diagnose and fix in the plugin yourself. I do not see any issues with the plugin in Safari and Chrome.

    ReplyDelete