JavaScript Formulare

JavaScript-Formularvalidierung

Die HTML-Formularvalidierung kann mit JavaScript durchgeführt werden.

Fügt das Formularfeld (fname) leer ist, wird diese Funktion eine Meldung anzeigt und gibt false zurück, um zu verhindern, dass das Formular gesendet wird:

JavaScript-Beispiel

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name muss ausgefüllt werden");
    return false;
  }
}

Diese Funktion kann beim Senden des Formulars aufgerufen werden:

HTML-Formularbeispiel

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Probieren Sie es selbst aus

JavaScript kann numerische Eingaben validieren

JavaScript wird in der Regel zur Validierung numerischer Eingaben verwendet:

Bitte geben Sie eine Zahl zwischen 1 und 10 ein:

Probieren Sie es selbst aus

Automatische HTML-Formularvalidierung

Die HTML-Formularvalidierung kann automatisch durch den Browser ausgeführt werden:

Wenn das Formularfeld (fname) leer ist, dann required Die Eigenschaften verhindern den Versand dieses Formulars:

HTML-Formularbeispiel

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Probieren Sie es selbst aus

Tipp:Die automatische HTML-Formularvalidierung funktioniert in Internet Explorer 9 oder früheren Versionen nicht.

Datenvalidierung

Die Datenvalidierung ist ein Prozess, um sicherzustellen, dass die Benutzerdaten sauber, korrekt und nützlich sind.

Typische Validierungsaufgaben sind:

  • Haben die Benutzer alle Pflichtfelder ausgefüllt?
  • Haben die Benutzer einen gültigen Datumseingabe eingegeben?
  • Haben die Benutzer Text in das numerische Feld eingegeben?

In den meisten Fällen ist das Ziel der Datenvalidierung, sicherzustellen, dass die Benutzerdaten korrekt sind.

Die Validierung kann auf viele verschiedene Weise definiert und in vielen verschiedenen Weisen implementiert werden.

Die Server-Validierung wird vom Web-Server ausgeführt, nachdem die Eingabe an den Server gesendet wurde.

Bevor die Eingabe an den Web-Server gesendet wird, führt der Web-Browser die Client-Validierung durch.

HTML-Beschränkung der Validierung

HTML5 einführt ein neues Konzept der HTML-Validierung, das als Beschränkung der Validierung bezeichnet wird.

HTML constraint validation basiert auf:

  • constraint validation HTML input attributes
  • CSS-Pseudo-Selektoren für constraint validation
  • constraint validation DOM attributes and methods

constraint validation HTML input attributes

Attribute Beschreibung
disabled Definiert, dass das input-Element deaktiviert sein sollte.
max Definiert den maximalen Wert des input-Elements.
min Definiert den minimalen Wert des input-Elements.
pattern Definiert das Wertmuster des input-Elements.
required Definiert, dass das input-Feld obligatorisch ist.
type Definiert den Typ des input-Elements.

Für eine vollständige Liste besuchen Sie bitte HTML-Eingabe-Attribute.

CSS-Pseudo-Selektoren für constraint validation

Selektor Beschreibung
:disabled Wählen Sie das input-Element aus, das das "disabled"-Attribut hat.
:invalid Wählen Sie das input-Element mit einem ungültigen Wert aus.
:optional Wählen Sie das input-Element aus, das das "required"-Attribut nicht hat.
:required Wählen Sie das input-Element aus, das das "required"-Attribut hat.
:valid Wählen Sie das input-Element mit einem gültigen Wert aus.

Für eine vollständige Liste besuchen Sie bitte CSS-Pseudo-Klassen.