Setup client-side validation to german

Question

This is something basic I guess and the accepted answer is probably going to be a link to somewhere I could not find:

I want the client-side validation of my application to use german formats on numbers, Dates and so on. For the server-side, I have set

<globalization uiCulture="de" culture="de-DE" />

in the web.config and to display dates in e.g. a create or details view, I use

[DisplayFormat(DataFormatString = "{0:dd.MM.yyyy}", 
                                                  ApplyFormatInEditMode = true)]

Now, the client-side still uses the dd/MM/yyyy - Format to validate and accordingly displays an error message in english.

In MVC4, what's the right way to set client-side Validation to a certain culture?

Try to check this question stackoverflow.com/questions/17106105/… Hope this helps — Andrei
It can't be true that it's that complicated to change validation to another culture, what a mess... — peter
I'm now at the state where some validation messages are in german, other in english, for one and the same type of inputfield .. — peter

peter peter · Accepted Answer · 2013-09-03T19:29:08

I now use the following:

1) Attaching this (stolen) code somewhere after loading jqueryval etc. (and having the referenced files in place) will have the culture applied to Globalize at the bottom of this code be the benchmark for input validation:

<script type="text/javascript" src="~/Scripts/jquery.globalize/globalize.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.globalize/cultures/globalize.culture.de-DE.js"></script>
<script type="text/javascript">
    (function ($, Globalize) {

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

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

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

        $.validator.methods.range = function (value, element, param) {
            var val = Globalize.parseFloat(value);
            return this.optional(element) || (val >= param[0] && val <= param[1]);
        };

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

    }(jQuery, Globalize));

    $(document).ready(function () {
        // Set Globalize to german
        Globalize.culture("de-DE");
    });

</script>

2) Custom error message if value entered in a field violates verification or user tries to submit with empty value for that field:

@Html.ValidationMessageFor(model => model.Datum, "my custom error message")

It's a pitty, I know I'm a noob but it should definitly be more intuitive to change server AND client side validation to another culture, including all error messages.

Setup client-side validation to german

1 Answers