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


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 20 years as a consultant, software architect, trainer, and mentor mainly on the .NET platform. He is currently working as principal software architect at ClearMeasure Inc. 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 :-)