Localization Validation Scripts

Client side localization validation scripts made simple with this tag helper component.

Validating localized numbers, dates and currency fields requires a lot of scripts to install, then according to the current culture the relevant scripts must be loaded. See below scripts that are required for valdiating localized input fields (numbers, currenicy and date):

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

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

<!-- jquery valdiation globalize -->
<script src="https://cdn.jsdelivr.net/gh/johnnyreilly/jquery-validation-globalize@1.0.0/jquery.validate.globalize.min.js"></script>

<script type="text/javascript">
    $.when(
        $.get("/lib/cldr-data/supplemental/likelySubtags.json"),
        $.get("/lib/cldr-data/main/{culture}/numbers.json"),
        $.get("/lib/cldr-data/main/{culture}/currencies.json"),
        $.get("/lib/cldr-data/supplemental/numberingSystems.json"),
        $.get("/lib/cldr-data/main/{culture}/ca-gregorian.json"),
        $.get("/lib/cldr-data/main/{culture}/timeZoneNames.json"),
        $.get("/lib/cldr-data/supplemental/timeData.json"),
        $.get("/lib/cldr-data/supplemental/weekData.json"),
    ).then(function () {
        // Normalize $.get results, we only need the JSON, not the request statuses.
        return [].slice.apply(arguments, [0]).map(function (result) {
            return result[0];
        });
    }).then(Globalize.load).then(function () {
        Globalize.locale("{culture}");
    });
</script>

 

Notice that culture paramter is relevant to the currently selected culture.

Adding all that code can be done simply by using this simple tag helper component as below:

1- Install nuget packge:

Install-Package LazZiya.TagHelpers -Version 2.1.0

2- Register the component in startup:

services.AddTransient<ITagHelperComponent, LocalizationValidationScriptsTagHelperComponent>();

or just install LazZiya.ExpressLocalization to simply do all localizatin settings of any asp.net core 2.x web application with one step.

3- Add the below tag where you need valdiation scripts :

<localization-validation-scripts></localization-validation-scripts>

This tag has two optional attributes:

- source: defines the source where to load localizaton scripts from, it can be Local or JsDeliver

Default value is JsDeliver, so you don't have to manually install any scripts, all required scripts will be loaded from jsdelivr.

If you choose Local, you have to install all scripts to your wwwroot/lib folder. (see: How to install client side localization validation scripts)

- version: define which version of cldr-data scripts to install. Default is 35.1