Integration with jquery.validation

[rogerfar]

I like your library, but it is so simple, did you consider making a pull request to the jquery validation project?

Thanks anway for the nuget package!

[intermension]

The plugin is helpful but I wasted some time trying to make it work when the culture is site selected (by user choice) i.e. a little flags dropdown, rather than driven by browser locale.

I had to read through all the Globalization code on how to make it work which in the end was pretty simple tho at that point not abstracted.

So your method to this:

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

I had to change them all out to this:

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

where

Globalize.cultureSelector = "en-GB" // for example

is set in document.ready or some other suitable place.

[cigano]

Worked for me. I was having this error:

Uncaught TypeError: Globalize.parseDate is not a function. ...

I attached the fixed file, as @intermension suggested:

/*!
** An extension to the jQuery Validation Plugin which makes it use Globalize.js for number and date parsing
** Copyright (c) 2013 John Reilly
*/

(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);
    }; */

    $.validator.methods.date = function (value, element) {
        var val = Globalize.parseDate(value, null, Globalize.cultureSelector);
        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));

[ncarandini]

This do not works.

On:

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

the method call to

Globalize.parseDate(value, null, Globalize.cultureSelector);

is wrong because the method accept max two values and passing null as the second value generate an error in the expandPattern function of the date.js file.
If you don't look at the console (F12 on Chrome, for example) you can think it's working, when in reality the validation simply stopped to work!

[johnnyreilly]

Sorry I'm not maintaining this anymore - feel free to fork

[ncarandini]

Oh, I see.
Too bad, you're the one who really helped me a lot at understanding globalization and validation.
It's a pity that globalize and jquery validation are so difficult to work with.
As an example, trying to validate dates that comes from an input field of type "Date" fails because the value is not the globalized one but the ISO one, so Globalize.parseDate fails :-(

So I wrote a workaround, but maybe is a brittle one, I'm just a rookie in this field:

$.validator.methods.date = function (value, element) {
  if (element.type === "date")
  {
    value = new Date(value).toLocaleDateString();
  }
  val = Globalize.parseDate(value,
           $.validator.methods.dateGlobalizeOptions.dateParseFormat);
  return this.optional(element) || !/Invalid|NaN/.test(new Date(val).toString());
};

Hope this can help someone. I don't think I'm going to fork it.

[msd-kharazi]

Hello & thanks a lot. there is a dependency problem is :
Globalize v1.4.2 uses:

Globalize.prototype.parseNumber = function( value, options ) {
validateParameterPresence( value, "value" );
validateParameterTypeString( value, "value" );

return this.numberParser( options )( value );

};

jquery-validation-globalize call it as:

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