Los Techies : Blogs about software and anything tech!
Gabriel Schenker's Blog » How-To add a custom validation method to the jQuery validator plug-in

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

Kick It on DotNetKicks.com
Posted Mar 10 2009, 09:53 AM by Gabriel N. Schenker
Filed under: ,

Comments

DotNetShoutout wrote How-To add a custom validation method to the jQuery validator plug-in - Gabriel Schenker's Blog -
on 03-10-2009 8:19 AM

Thank you for submitting this cool story - Trackback from DotNetShoutout

Casey wrote re: How-To add a custom validation method to the jQuery validator plug-in
on 03-10-2009 8:38 AM

Very cool - another piece of your code I'll be borrowing :)

jlockwood wrote re: How-To add a custom validation method to the jQuery validator plug-in
on 03-12-2009 9:31 PM

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

dpcwollmann wrote re: How-To add a custom validation method to the jQuery validator plug-in
on 04-07-2009 2:30 PM

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 wrote re: How-To add a custom validation method to the jQuery validator plug-in
on 04-17-2009 2:44 AM

check

uygar wrote re: How-To add a custom validation method to the jQuery validator plug-in
on 07-17-2009 6:08 PM

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 wrote re: How-To add a custom validation method to the jQuery validator plug-in
on 01-19-2010 8:44 AM

Thanks for info!

samantha wrote re: How-To add a custom validation method to the jQuery validator plug-in
on 02-09-2010 8:49 AM

thanks

samantha wrote re: How-To add a custom validation method to the jQuery validator plug-in
on 02-09-2010 8:50 AM

thank you very much. I like it

Add a Comment

(required)  
(optional)
(required)  
Remember Me?

Enter the numbers above:
Copyright Los Techies 2008, 2009. All rights reserved.
Powered by Community Server (Commercial Edition), by Telligent Systems