globalize validation problem with datetime input control

Question

I am trying to use the cldr-data and globalize functionality to validate my inputs in an ASP.NET Core MVC web project.

Problem occurs because it seems it can load the proper cldr-data files based on the navigator.language property(I know this is not always accurate but it should be valid in this scenario. My OS is set to en-US, browser has three languages with "de" as display and first of the list for navigator.languages)

Although the comma separator is recognized correctly(it accepts , and refuses . for date input I cannot figure out why the dates are being marked as invalid.

The date is displayed with the correct de dd.mm.yyyyformat

Create form also displays an input field with a correct format

Use of .as comma separator raises invalid

Using the datetimepicker selector gives me an invalid date

Opera/Chrome

Edge

Firefox

Settings

_ValidationScriptsPartial.cshtml

<environment include="Development">
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

    <!-- 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>
    <!-- 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>

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

</environment>
<environment exclude="Development">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"
            asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator"
            crossorigin="anonymous"
            integrity="sha256-F6h55Qw6sweK+t7SiOJX+2bpSAa3b/fnlrVCJvmEj1A=">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"
            asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
            crossorigin="anonymous"
            integrity="sha256-9GycpJnliUjJDVDqP0UEu/bsm9U+3dnQUH8+3W10vkY=">
    </script>
</environment>

<script type="text/javascript">
    function setGlobalization() {
        debugger;
        var url = "@Url.Action("GetBrowserLanguage", "Movies")";
        $.ajax({
            cache: false,
            type: 'GET',
            url: url,
            data: { navigatorlanguage: navigator.language }
        }).done(function (result) {
            debugger;
            $.when(
                $.get("/lib/cldr-data/supplemental/likelySubtags.json"),
                $.get("/lib/cldr-data/main/" + result.language + "/numbers.json"),
                $.get("/lib/cldr-data/supplemental/numberingSystems.json"),
                $.get("/lib/cldr-data/main/" + result.language + "/ca-gregorian.json"),
                $.get("/lib/cldr-data/main/" + result.language + "/timeZoneNames.json"),
                $.get("/lib/cldr-data/supplemental/timeData.json"),
                $.get("/lib/cldr-data/supplemental/weekData.json")
            ).then(function () {
                debugger;
                // 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 () {
                debugger;
                Globalize.locale(result.language);
            });
        }).fail(function (result) {
            alert("Server error(setGlobalization): " + result.statusText + " Please refresh and try again");
        });
    }
    document.addEventListener('DOMContentLoaded', function () {
        setGlobalization();
    }, false);

</script>

Create.cshtml

    <form asp-action="Create">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Title" class="control-label"></label>
            <input asp-for="Title" class="form-control" />
            <span asp-validation-for="Title" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ReleaseData" class="control-label"></label>
            <input asp-for="ReleaseData" class="form-control" />
            <span asp-validation-for="ReleaseData" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Genre" class="control-label"></label>
            <input asp-for="Genre" class="form-control" />
            <span asp-validation-for="Genre" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Price" class="control-label"></label>
            <input asp-for="Price" class="form-control" />
            <span asp-validation-for="Price" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>

MoviesController.cs

public ActionResult GetBrowserLanguage(string navigatorlanguage)
{
    try
    {
        string localePattern = "lib\\cldr-data\\main\\{0}";
        var cultureToUse = "es-ES"; //Default regionalisation to use
        string defaultLanguage = "es";

        if (navigatorlanguage.StartsWith("es", StringComparison.InvariantCultureIgnoreCase))
            cultureToUse = "es";
        if (navigatorlanguage.StartsWith("de", StringComparison.InvariantCultureIgnoreCase))
            cultureToUse = "de";
        if (navigatorlanguage.StartsWith("en", StringComparison.InvariantCultureIgnoreCase))
            cultureToUse = "en-US-POSIX";

        if (!System.IO.Directory.Exists(System.IO.Path.Combine(_hostingEnvironment.WebRootPath, string.Format(localePattern, cultureToUse))))
            cultureToUse = defaultLanguage;

        return Json(new
        {
            error = false,
            exception = false,
            language = cultureToUse
        });
    }
    catch (Exception ex)
    {
        return Json(new
        {
            error = true,
            exception = true,
            statusText = ex.Message
        });
    }
}

Movie.cs

public class Movie
{
    public int Id { get; set; }
    public string Title { get; set; }
    [DataType(DataType.Date)]
    public DateTime ReleaseData { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }
}

Full Repository

https://github.com/blfuentes/ASP.NET-Core-Movie-Sample

Answer 1

I'm having the same problem trying to set to spanish culture, the only temporary solution I found was to replace the validator.methods.date function in jquery.validate.globalize.js

$.validator.methods.date = function (value, element) {
    var fecha = new Date(value);
    var dia = fecha.getDate() + 1;
    var mes = fecha.getMonth() + 1;
    var anio = fecha.getFullYear();
    if (dia < 10) {
        dia = '0' + dia;
    };
    if (mes < 10) {
        mes = '0' + mes;
    };
    var newValue = dia + '/' + mes + '/' + anio;
    var val = Globalize.parseDate(newValue, $.validator.methods.dateGlobalizeOptions.dateParseFormat);
    return this.optional(element) || (val instanceof Date);
};

Maybe this is not the best solution, but it was the only way I could achieve date validation.