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>

when applied we have the following outcome


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 25 years as a consultant, software architect, trainer, and mentor mainly on the .NET platform. He is currently working as senior software architect at Alien Vault in Austin, Texas. 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.
  • Very cool – another piece of your code I’ll be borrowing :)

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

  • 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


  • 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

  • Ann

    Thanks for info!

  • thanks

  • thank you very much. I like it

  • vigneshwaran

    Exactly what I was looking for!,thanks a bunch

  • huseyin

    thank you very much

  • A


  • 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!!!

  • Edson

    Thanks ! just what I needed :-)