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


Refactoring legacy code