Skip to main content

jQuery Validation Globalize hits 1.0

· 3 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

This is just a quick post - the tl;dr is this: jQuery Validation Globalize has been ported to Globalize 1.x. Yay! In one of those twists of fate I'm not actually using this plugin in my day job anymore but I thought it might be useful to other people. So here you go. You can read more about this plugin in an older post and you can see a demo of it in action here.

The code did not change drastically - essentially it was just a question of swapping parseFloat for parseNumber and parseDate for a slightly different parseDate. So, we went from this:

(function ($, Globalize) {
// Clone original methods we want to call into
var originalMethods = {
min: $.validator.methods.min,
max: $.validator.methods.max,
range: $.validator.methods.range,
};

// Tell the validator that we want numbers parsed using Globalize

$.validator.methods.number = function (value, element) {
var val = Globalize.parseFloat(value);
return this.optional(element) || $.isNumeric(val);
};

// Tell the validator that we want dates parsed using Globalize

$.validator.methods.date = function (value, element) {
var val = Globalize.parseDate(value);
return this.optional(element) || val instanceof Date;
};

// Tell the validator that we want numbers parsed using Globalize,
// then call into original implementation with parsed value

$.validator.methods.min = function (value, element, param) {
var val = Globalize.parseFloat(value);
return originalMethods.min.call(this, val, element, param);
};

$.validator.methods.max = function (value, element, param) {
var val = Globalize.parseFloat(value);
return originalMethods.max.call(this, val, element, param);
};

$.validator.methods.range = function (value, element, param) {
var val = Globalize.parseFloat(value);
return originalMethods.range.call(this, val, element, param);
};
})(jQuery, Globalize);

To this:

(function ($, Globalize) {
// Clone original methods we want to call into
var originalMethods = {
min: $.validator.methods.min,
max: $.validator.methods.max,
range: $.validator.methods.range,
};

// Globalize options - initially just the date format used for parsing
// Users can customise this to suit them
$.validator.methods.dateGlobalizeOptions = {
dateParseFormat: { skeleton: 'yMd' },
};

// Tell the validator that we want numbers parsed using Globalize
$.validator.methods.number = function (value, element) {
var val = Globalize.parseNumber(value);
return this.optional(element) || $.isNumeric(val);
};

// Tell the validator that we want dates parsed using Globalize
$.validator.methods.date = function (value, element) {
var val = Globalize.parseDate(
value,
$.validator.methods.dateGlobalizeOptions.dateParseFormat,
);
return this.optional(element) || val instanceof Date;
};

// Tell the validator that we want numbers parsed using Globalize,
// then call into original implementation with parsed value

$.validator.methods.min = function (value, element, param) {
var val = Globalize.parseNumber(value);
return originalMethods.min.call(this, val, element, param);
};

$.validator.methods.max = function (value, element, param) {
var val = Globalize.parseNumber(value);
return originalMethods.max.call(this, val, element, param);
};

$.validator.methods.range = function (value, element, param) {
var val = Globalize.parseNumber(value);
return originalMethods.range.call(this, val, element, param);
};
})(jQuery, Globalize);

All of which is pretty self-explanatory. The only thing I'd like to draw out is that Globalize 0.1.x didn't force you to specify a date parsing format and, as I recall, would attempt various methods of parsing. For that reason jQuery Validation Globalize 1.0 exposes a $.validator.methods.dateGlobalizeOptions which allows you to specify the data parsing format you want to use. This means, should you be using a different format than the out of the box one then you can tweak it like so:

$.validator.methods.dateGlobalizeOptions.dateParseFormat = // your data parsing format goes here...

Theoretically, this functionality could be tweaked to allow the user to specify multiple possible date parsing formats to attempt. I'm not certain if that's a good idea though, so it remains unimplemented for now.