JavaScript Form-Validierung vor Submit

[Dsimon24]

Hallo zusammen,

ich habe ein Formular mit ein paar Input-Felder (u.a. Datum) und zwei Radio-Button (X oder Y).

Jetzt möchte ich folgendes erreichen:
Ist Y selektiert, darf das Formular nur abgesendet werden, wenn das eingegebene Datum in
der Vergangenheit liegt. Dann soll eine Meldung per Alertbox erscheinen und das Formular
soll nicht versendet werden.

Folgende Funktion habe ich dazu geschrieben:

function check(datum) {
  var dateEin = new Date(datum);

  var dateNow = new Date();

  if (document.getElementById("vorlage_ve").checked && dateEin < dateNow) {
    return true;
  } else {
    alert('Ausgabe des Fehlers...');
    return false;
  }
}

So rufe ich die Funktion anschließend auf:

<button type="submit" onclick="checkFinaleEinst(document.getElementById('input_datum').value)" class="btn btn-default" name="btn_anlegen">Speichern</button>

Es erscheint bei einem Datum in der Zukunft dann auch die Alertbox,
aber das Formular wird dennoch versendet. Was mache ich falsch?

 

[Madman1209]

Hi,

lass dir doch mal deine Werte ausgeben, die du beim "if" prüfst.

VG,
Mad

 

[Dsimon24]

Das teste ich mal.

Aber unabhängig davon, es wird ja die Alertbox angezeigt,
dann müsste dich auch return false; das übermitteln ab-
brechen - oder habe ich da einen Denkfehler?

VG

 

[Mihawk90]

/edit
Gerade nochmal nachgelesen, das unten hatte ich wohl falsch im Gedächtnis
Den Value kann man nicht direkt auswählen, aber du müsstest schon den speziellen Radio Button selektieren, der dich interessiert, entweder mit

document.getElementsByName("...")[0].checked

oder

document.querySelector("input[type=radio][name=...][value=...]").checked

name und value natürlich entsprechend befüllen.

---

Der Vollständigkeit was ich vorher geschrieben hatte:

.checked ist eine Eigenschaft für eine Checkbox, du verwendest aber Radio Buttons.

Du musst den beiden Radio Buttons jeweils ein value="..." zuweisen und dieses auslesen. Dabei müssen natürlich beide Radio Buttons denselben name="..." haben damit sie verknüpft sind.

Der Grund, dass du den Alert erhälst ist also, weil .checked nie true sein kann, weil der Wert nicht existiert, also undefined ist.

Genereller Tip: Wenn du irgendwas abgleichst und es nicht funktioniert wie du dir denkst, lass dir mittels console.log(...) ausgeben was du abgleichen willst.
Alert ist dazu auch nicht hilfreich, vor allem wenn du viele Variablen loggen bzw. Meldungen ausgeben willst/musst.

 

[darkR]

Bei button type="submit" ist bei Aufruf des onClick Events der submit wahrscheinlich schon erfolgt. Du könntest event handler auf die form felder legen und dann entsprechend den Submit Button auf inaktiv setzen. Oder mal mit button type="button" arbeiten und im onClick event den submit auslösen.

 

[Defender1st]

Schau dir auch mal https://www.w3schools.com/jsref/event_preventdefault.asp an.

Damit verhinderst du, dass ein Button sein Submit durchführt.

 

[AndrewPoison]

Also, grundlegend:

1. deine Funktion ist inhaltlich falsch wie oben schon erwähnt
2. parallel dazu glaube ich auch nicht, dass ein Funktionsaufruf im onClick, der ein "return true/false" macht, den onClick-Event zulassen/abbrechen kann. Wird da nicht einfach nur die aufgerufene Funktion beendet, nicht aber der Event-Handler (sprich, ich glaube du bist an der Stelle eine Ebene zu tief... ggf. müsste dann im onclick="return checkFinaleEinst(...)" stehen und nicht nur "checkFinaleEinst(...)"?
3. und ganz wichtig: nicht die Validierung auf das onClick des Buttons legen, sondern auf das onSubmit des Forms! Damit ist auch abgedeckt, dass jemand z.B. einfach "Enter" drückt - womit das Form ja auch abgeschickt wird.

Und dann lässt man das JS die Bedingungen prüfen und wenn alles passt, macht man nichts - und wenn nicht, setzt mein ein e.preventDefault() und das Submitting wird abgebrochen.

document.getElementById('name-deines-forms').addEventListener("submit", function (e) {

  if {/* hier checken, ob die Eingabe fehlerhaft ist */} {
   e.preventDefault();
  }

});

und noch was: JavaScript HASST Datums/Zeit-Funktionen. Es ist die Hölle. Am besten nutzt man in wichtigen Fällen dafür dann Libraries wie Moment.js - aber schon allein dein "new Date(datum)"-Aufruf kann auf so viele unfassbar dumme weisen schief gehen, das ist echt nicht lustig. Jeder Browser handelt das am Ende anders. Die "datum"-Variable ist ja nur ein String, den der Nutzer eingibt. Und welchen Tag er damit nun wirklich meinte, ist Ansichtssache. Je nach Herkunft des Nutzers. Und auch was es für ein Browser ist. "02.03.2020" könnte sowohl den 2. März als auch den 3. Februar meinen, nur als Beispiel. Und je nachdem, wie der Nutzer es eingibt (2020-03-02 ist genauso legitim). Zeitzonen und Sonderfälle sind dabei ja noch nicht mal abgedeckt. Vertippt sich jemand, ist das Datum zwar ggf. valide, aber falsch. "02.03.202" (die letzte Null vergessen) ... - oder wenn er als Datum einfach nur eine "1" eingibt, geht das auch. Das wird intern nämlich zum 01.01.2001 0:00 Uhr, was auch vor dem aktuellen Datum liegt und damit laut Check valide wäre etc. pp. Es ist ne echte Qual mit Datumsen zu arbeiten. Nur, dass du schon mal weißt, dass es da zukünftig echt noch Probleme geben kann.