How to use Globalize.js to configure culture for client side validation in ASP.NET Core MVC

Question

I having very hard time to configure client side validation in my app. I would like to it be able to accept localized pt-BR inputs.

I tried configure the app using at startup:

var locale = "pt-BR";
RequestLocalizationOptions localizationOptions = new RequestLocalizationOptions {
    SupportedCultures   = new List<CultureInfo> { new CultureInfo(locale) },
    SupportedUICultures = new List<CultureInfo> { new CultureInfo(locale) },
    DefaultRequestCulture = new RequestCulture(locale)
};

It works for rendering currency, date time and numbers in server side, but the client validation still expecting en-US input.

The client side is using jquery.validate and jquery.validate.unobtrusive Then I was advised to use Globalize.js.

I installed globalize by npm npm instal [email protected] And it added the globalize package and the cldr.js packages. And downloaded the jquery.validate.globalize.js to the project

I added reference to the js files in the HTML

<!-- cldr scripts (needed for globalize) -->
<script src="~/lib/cldrjs/dist/cldr.js"></script>
<script src="~/lib/cldrjs/dist/cldr/event.js"></script>
<script src="~/lib/cldrjs/dist/cldr/supplemental.js"></script>
<script src="~/lib/cldrjs/dist/cldr/unresolved.js"></script>

<!-- globalize scripts -->
<script src="~/lib/globalize/dist/globalize.js"></script>
<script src="~/lib/globalize/dist/globalize/number.js"></script>
<script src="~/lib/globalize/dist/globalize/date.js"></script>

<!-- Validation -->
<script src="~/lib/jquery.validate.globalize.js"></script>

but unfortunately I am getting this error when i try to se the location Globalize.locale("pt-BR")

E_MISSING_CLDR: Missing required CLDR content supplemental/likelySubtags.

What am I missing?

Answer 1

You need to load CLDR data using Globalize.load. Please see https://github.com/globalizejs/globalize/blob/master/doc/cldr.md