Ich habe ein Formular mit einem Eingabefeld für Daten. Die Daten sollten validiert werden: nur Daten von heute + maximal 3 Jahre sind erlaubt. Wenn das Datum gültig ist, wird ein Modal angezeigt, andernfalls wird eine Warnung mit einer Fehlermeldung angezeigt.
Unter der Annahme, dass jemand das Datum auf den 26.10.2099 ändert:
Alles funktioniert wie erwartet, wenn man das Eingabefeld verlässt (indem man irgendwo anders mit der Maus klickt):
ABER wenn man Enter drückt, anstatt nur das Eingabefeld zu verlassen, passiert folgendes:
Mein Gedanke ist, dass die Änderung des Datums auf seinen Anfangswert dazu führt, dass das Ereignis onchange erneut ausgelöst wird. Dann ist das Datum gültig und das Modal wird angezeigt. Das ist beim ersten Szenario nicht der Fall. Im zweiten Szenario löst das Ereignis zweimal SOMETIMES aus, aber nicht immer.
Sie können sich hier ausprobieren: Ссылка
Oder lesen Sie den folgenden Code:
HTML:
%Vor%Javascript:
%Vor%BEARBEITEN:
Hier ist die endgültige Lösung, mit der ich gegangen bin:
%Vor% Das Problem von Ihrem Code ist, wenn Sie Enter Ihren Wert drücken! = wenn Sie woanders klicken. Sie können es sehen, wenn Sie dateParts
Wenn Sie zB: 28.10.2099 eingeben und wegklicken dateParts ist ["28", "10", "2099"]
Aber wenn Sie zB: 28.10.2099 eingeben und ENTER drücken dateParts ist ["28", "10", "2019"] Hier wird das Eingabefeld validiert und automatisch auf das Datum 28.10.2019 gesetzt, da maxDate auf gesetzt ist 3y .
Also ist meine Lösung, keydown zu binden und den Datepicker zu umgehen, bevor der Wert automatisch geändert wird.
Hier ist ein Link mit funktionierendem Code: Ссылка
Update: Code hinzugefügt
%Vor% Hinweis: Ein Code könnte entfernt werden wie: e.which = 9; e.key = 'Tab'; return false;
Um jedoch den gleichen Effekt wie einen Klick anzuwenden, sollte diese Codezeile hinzugefügt werden:
%Vor%Aus dieser Antwort wurde ein Code entnommen: In JQuery ui datepicker den Enter-Schlüssel deaktivieren
Sie müssen preventDefault () verwenden, um dieses Problem zu beheben, indem Sie die Demo unten verwenden ...
Erklärung:
Sie haben recht, wenn Sie das Datum auf seinen Anfangswert zurücksetzen, damit das onchange-Ereignis erneut ausgelöst wird. Zu diesem Zeitpunkt müssen Sie dieses Problem lösen. Um es zu handhaben, gibt es eine Option preventDefault (), die ich angehängt habe Beispiel, das Sie hierfür benötigen und als Referenz können Sie diese Links auschecken. Reference_1 , Reference_2 , Reference_3 ...
Der Datepicker löst ein Änderungsereignis aus, sobald Sie "Enter" drücken und ändert das Datum zurück, sobald das Datum nicht in minDate oder maxDate des Datepickers selbst passt.
Also habe ich Ihren Event-Handler für keyup -Ereignisse aktualisiert und den Datepicker gelöscht, sobald Sie etwas mit Ihrer Tastatur eingeben (= & gt; bedeutet, dass Sie das Datum nicht mit Hilfe des Datepickers eingeben wollen) und I setze es zurück, sobald du ENTER drückst.
Dies ist der letzte JavaScript-Code:
%Vor% Irgendwie funktioniert das .datepicker("destroy") nicht auf JSFiddle, aber es existiert definitiv: Ссылка
Das e.stopImmediatePropagation(); half auch, wenn nur nach der ENTER Taste gesucht wird, es funktioniert aber nur jedes zweite Mal. Manchmal ist keyup schneller, manchmal ist datepicker. Deshalb wollte ich den Datepicker zerstören.
Wenn change-Ereignis dynamisch ausgelöst wird, erhalten Sie die originaryEvent-Eigenschaft, wenn Sie
verwenden können %Vor%stattdessen preventDefault, obwohl beide Wege die gleiche Geige sind hier Ссылка
Tags und Links javascript jquery validation date