MVC Client Datenvalidierung für “dd.MM.yyyy” mit jQuery Globalize


Ich hatte bei meiner MVC Anwendung das Problem, das die Clientseitige Validierung eines Datums aus meinem Model als nicht “richtig” erkannt wurde und damit ist die Clientseitige Validierung fehlgeschlagen. Dabei wurde das Datumsformat in Browser als “dd.MM.yyyy” angezeigt und als ungültiges Datum erkannt, trotz eines gültigen Datums.

Model:

[Required]
[Display(Name = "Jobstartdate", ResourceType = typeof(WorktimeViews))]
[DataType(DataType.Date)]
public DateTime StartDate { get; set; }

Fehlermeldung im Browser:

image

Als erstes habe ich das NuGet Package “jquery-globalize” zu meinem Projekt hinzugefügt, hier habe ich aber nur einige der “Sprachen” im Projekt behalten.

image

Dann habe ich das Bundle für die JavaScript Bibliotheken angepasst und die Globalize Funktionen nach meinen anderen jQuery Bibliotheken eingefügt.

  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*", 
                        "~/Scripts/jquery.globalize/globalize.js",
                        "~/Scripts/jquery.globalize/cultures/globalize.culture.de-DE.js",
                        "~/Scripts/_myjQueryExtensions.js"));

und in meiner eigenen “_myjQueryExtensions.js” noch die folgenden Zeilen an Code hinzugefügt. In der Document Ready Funktion gibt man noch an welche Sprache aktuell für die Validierung genutzt werden soll.

jQuery.validator.methods.date = function(value, element) {
    return Globalize.parseDate(value);
};

$.validator.methods.number = function(value, element) {
    if (Globalize.parseFloat(value)) {
        return true;
    }
    return false;
};

jQuery(document).ready(function () {
    Globalize.culture("de-DE");
});

Dann wurde mein Datum “dd.MM.yyyy” als gültiges Datum erkannt und es gab KEINEN Validation Error mehr. Selbiges geht wohl auch für Zahlenwerte ob Komma oder Punkt als Tausendertrennzeichen verwendet werden soll. Das ganze lässt sich auch ausbauen, damit die richtige Sprache verwendet wird, je nach Client der sich die Webseite anzeigen lässt in meinem Beispiel habe ich hier hart die “de-DE.js” verwendet.

Probleme gab es bei mir im Chrome v23.xx mit dem Datum hier wurde vom Chrome ein “falsch” formatiertes Datum an die parseDate Methode übergeben. Außerdem gibt es Probleme mit der Range Validation Methode im MVC und Double werten.

Quellen:

http://blog.brainnovative.com/2010/12/globalizing-aspnet-mvc-unobtrusive.html

http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-validation-to-the-model

Advertisements

8 Gedanken zu „MVC Client Datenvalidierung für “dd.MM.yyyy” mit jQuery Globalize

  1. Pingback: MVC4 WebaAPI und knockoutjs – Teil 3 – Datum und Zeitangaben (moment.js) « SquadWuschel's Blog

  2. Detlef Meyer

    Danke, hat mir weitergeholfen.
    Leider ist Dir ein kleiner Fehler unterlaufen (der mich wieder einige Zeit gekostet hat aber mein Wissen über Javascript deutlich vertieft hat).
    Für den Nächsten deshalb hier meine Bemerkung.
    Die Funktion
    $.validator.methods.number = function(value, element) {
    if (Globalize.parseFloat(value)) {
    return true;
    }
    return false;
    };
    versagt bei value==0 und meldet dann „false“. Globalize.parseFloat(value) gibt korrekterweise 0 zurück und das wird wiederum von javascript als false ausgewertet. Richtig muss es heissen:
    $.validator.methods.number = function (value, element) {
    if (Globalize.parseFloat(value)!=NaN) {
    return true;
    }
    return false;
    };

    Und dem data validator musste ich durch ein neues Pattern a: „dd.MM.yyyy HH:mm:ss“, in
    globalize.culture.de-DE.js nachhelfen. Weil das halt auch ein gültiges Format ist und von c# Date.ToString() so zurück gegeben wird.Wenn man also eine DropDownList mit gültigen Datumswerten füttert bekommt javascript sowas zu Gesicht.

    Gefällt mir

    Antwort
    1. Jörg

      Vielen Dank für den Artikel,
      Das Datum funktioniert mit der Änderung korrekt. Ich kann jedoch keine Datumsformat einstellen uns bekomme immer die Zeit mit zum Datum angezeigt. Damit die Eingabe akzeptiert wird, muss Ich die Uhrzeit jedesmal löschen.
      30.11.2013 00:00:00

      [Required]
      [DataType(DataType.Date)]
      [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = „{0:yyyy-MM-dd}“)]
      oder
      [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = „{0:d}“)]
      [Display(Name = „Geburtstag“)]
      public Nullable Geburtstag { get; set; }

      Ich bin am verzweifeln. Habt jemand vielleicht einen Tipp für mich ?

      Gefällt mir

      Antwort
  3. Jörg Gullus

    Hi,

    vielen Dank für den Beitrag. Er hat mir sehr geholfen. Ich bin eigentlich reiner Winforms Verwender und kenne mich nicht so besonders aus. Dadurch bin ich auf folgendes Problem gestoßen. Wenn ich nach den hier vorgestellten Vorbild meine Anwendung anpasse und
    //app.UseGoogleAuthentication(); (MVC 5, VS 2013)
    auskommentiere, funktioniert das Ganze nicht mehr. Hast Du vielleicht eine Lösung für mich ?
    Vielen Dank!

    Jörg

    Gefällt mir

    Antwort
  4. SquadWuschel Autor

    Leider muss ich hier aktuell auch passen, ist schon eine Weile her das ich mich damit „rumplagen“ musste. Bei der Validierung von Datumswerten und Zeiten, setzte ich aktuell eher auf die Serverseitige Validierung und lasse die Clientvailidierung weg, damit umgehe ich den ganzen Ärger. Im DatePicker kann ich das genaue Format angeben was man eingeben kann und Serverseitig weiß ich dann was ich parsen will und kann entsprechend darauf reagieren. Denn Datums und Zeitangaben im Client automatisiert validieren zu lassen ist einfach zu fehleranfällig und aufwendig, wie ich finde. Denn hier gibt es keine „einfache“ Lösung.

    Gefällt mir

    Antwort

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s