How-To add a custom validation method to the jQuery validator plug-in

For my current project I needed a custom validator method for the jQuery validator plug-in. I wanted to validate that a user has chosen a value from a combo box where the value is of type Guid.

First I implemented a JavaScript function which tests whether a given value represent a valid Guid but not an empty Guid (An empty Guid has the following form: 00000000-0000-0000-0000-000000000000). To achieve this result I use regular expressions

var isValidGuid = function(value) {
  var validGuid = /^({|()?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}(}|))?$/;
  var emptyGuid = /^({|()?0{8}-(0{4}-){3}0{12}(}|))?$/;
  return validGuid.test(value) && !emptyGuid.test(value);
}

The above function returns true for a valid Guid and false for every thing else.

Now I have to add this validation method to the validator plug-in as follows

$.validator.addMethod("isValidGuid", function(value, element) {
  return isValidGuid(value);
}, 'Please select a valid and non empty Guid value.');

Finally I can use this custom validation method on any form element by assigning it the class isValidGuid, e.g.

<select id="title" class="isValidGuid" title="Please select a title!">
  <option value="00000000-0000-0000-0000-000000000000" selected="selected">(select)</option>
  <option value="33a1eb15-cdbc-4c85-be01-dcb4f393c0a5">Engineer</option>
  <option value="43b5d0f7-4915-41f1-b3b9-d6335299cc22">Physicist</option>
  <option value="d80322f2-bb76-447c-a6ac-77f145bac70d">Technician</option>
</select>          

when applied we have the following outcome

image

Related Articles:

    Post Footer automatically generated by Add Post Footer Plugin for wordpress.

    About Gabriel Schenker

    Gabriel N. Schenker started his career as a physicist. Following his passion and interest in stars and the universe he chose to write his Ph.D. thesis in astrophysics. Soon after this he dedicated all his time to his second passion, writing and architecting software. Gabriel has since been working for over 12 years as an independent consultant, trainer, and mentor mainly on the .NET platform. He is currently working as chief software architect in a mid-size US company based in Austin TX providing software and services to the pharmaceutical industry as well as to many well-known hospitals and universities throughout the US and in many other countries around the world. Gabriel is passionate about software development and tries to make the life of developers easier by providing guidelines and frameworks to reduce friction in the software development process. Gabriel is married and father of four children and during his spare time likes hiking in the mountains, cooking and reading.
    This entry was posted in jQuery, validation. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
    • http://dddstepbystep.com Casey

      Very cool – another piece of your code I’ll be borrowing :)

    • http://www.lostechies.com/members/jlockwood/default.aspx jlockwood

      That’s slick…having an RTFM moment. I rolled my own validation mini-framework.

    • http://twitter.com/dpcwollmann dpcwollmann

      Nice write-up, thanks.

      You could probably get away with simplifying the pattern a little bit:

      var validGuid = /^[{(]?[0-9A-F]{8}-(?:[0-9A-F]{4}-){3}[0-9A-F]{12}[)}]?$/i;

      (I hope the html scrubber didn’t trash the pattern)

      Adding the “i” flag simplifies the character classes that match the hex characters by making the pattern match case-insensitive. Using a character class to match the optional opening and closing braces allows you to use the braces without escapes, and making the group non-capturing prevents allocation of unnecessary back references.

    • check

      check

    • uygar

      If I do not use any defined rule my custom rules do not stop the submition of form.
      I have no idea is there anyone have idea about this issue

    • http://www.google.com Ann

      Thanks for info!

    • http://www.google.com samantha

      thanks

    • http://www.yahoo.com samantha

      thank you very much. I like it

    • vigneshwaran

      Exactly what I was looking for!,thanks a bunch

    • huseyin

      thank you very much

    • A

      Nice

    • telemachus18

      Thank you so much for this information. It was exactly what I was looking for, to finish my college javascript course assignment. You’re a life-saver!!!