7.5.3 Formulare II: Besondere Überprüfungen

Wie ein Formular auf Vollständigkeit überprüft werden kann, wissen wir nun. Doch ist es oft so, dass bestimmte Formularfelder nicht nur vollständig, sondern auch korrekt ausgefüllt werden müssen. So benötigen Telefonnummern nur Zahlen, und E-Mail-Adressen ein @-Zeichen.

Ganzzahlige Werte (z. B. Postleitzahlen) prüfen

JavaScript bietet die Funktion isNaN(), die überprüft, ob ein Wert keine Zahl ist. In Formularen bei Zahlenangaben sollten Sie sicherstellen, dass nur Ziffern verwendet werden und die Länge korrekt ist.

Beispiel: Postleitzahlen überprüfen

1
2
3
4
5
6
// Funktion zur Überprüfung einer Postleitzahl
// Länge prüfen und sicherstellen, dass es eine Zahl ist
function pruefePostleitzahl(plz) {
  if (plz.length !== 5 || isNaN(plz)) return false; 
  return true;
}

Erläuterung:

  1. plz.length !== 5: Prüft, ob die Postleitzahl genau 5 Zeichen lang ist.
  2. isNaN(plz): Überprüft, ob die Eingabe keine gültige Zahl ist. Wenn dies der Fall ist, gibt die Funktion false zurück.

Telefonnummern prüfen

Telefonnummern können zusätzlich Zeichen wie +, -, (, ) oder Leerzeichen enthalten. Die Überprüfung soll sicherstellen, dass keine ungültigen Zeichen vorhanden sind.

Beispiel: Telefonnummern überprüfen

1
2
3
4
5
6
7
8
// Funktion zur Überprüfung einer Telefonnummer
function pruefeTelefonnummer(tel) {
  const erlaubteZeichen = "+-() 0123456789";
  for (let i = 0; i < tel.length; i++) {
    if (!erlaubteZeichen.includes(tel[i])) return false;
  }
  return true;
}

E-Mail-Adressen prüfen

Bei der Prüfung von E-Mail-Adressen können Sie nicht auf alle möglichen ungültigen Zeichen prüfen, da es heute eine Vielzahl unterschiedlicher Adressformate gibt. Beschränken Sie sich daher auf die zwingend erforderlichen Zeichen: ein @-Zeichen und einen Punkt irgendwann danach.

Beispiel: E-Mail-Adressen überprüfen

1
2
3
4
5
6
7
// Funktion zur Überprüfung einer rudimentären E-Mail-Adresse
function pruefeEmail(email) {
  if (email.includes("@") && email.lastIndexOf(".") > email.indexOf("@")) {
    return true;
  }
  return false;
}

Komplettes JavaScript-Programm zur Überprüfung

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
function pruefung() {
  // Initialisierung des Formulars
  let form = document.forms[0];
  let fehler = "";

  // Hilfsfunktionen innerhalb von pruefung
  function pruefePostleitzahl(plz) {
    return plz.length === 5 && !isNaN(plz);
  }

  function pruefeTelefonnummer(tel) {
    const erlaubteZeichen = "+-() 0123456789";
    if (tel.trim() === "") return false; 
    for (let i = 0; i < tel.length; i++) {
      if (!erlaubteZeichen.includes(tel[i])) return false;
    }
    return true;
  }

  function pruefeEmail(email) {
    if (email.includes("@") && email.lastIndexOf(".") > email.indexOf("@")) {
      return true;
    }
    return false;
  }

  // Überprüfung der Textfelder
  if (form.vorname.value.trim() === "") fehler += "Vorname ";
  if (form.nachname.value.trim() === "") fehler += "Nachname ";
  if (!pruefeEmail(form.email.value.trim())) fehler += "E-Mail ";
  if (!pruefeTelefonnummer(form.telefon.value.trim())) fehler += "Telefon ";
  if (!pruefePostleitzahl(form.plz.value.trim())) fehler += "Postleitzahl ";
  if (form.ort.value.trim() === "") fehler += "Ort ";

  // Überprüfung der Auswahlliste
  if (form.land.selectedIndex === 0) fehler += "Land ";

  // Überprüfung der Radiobuttons
  let kundenartChecked = false;
  for (let radio of form.kundenart) {
    if (radio.checked) {
      kundenartChecked = true;
      break;
    }
  }
  if (!kundenartChecked) fehler += "Kundenart ";

  // Überprüfung der Checkboxen
  let kontaktChecked = Array.from(form.kontakt).some(checkbox => checkbox.checked);
  if (!kontaktChecked) fehler += "Kontaktart ";

  // Überprüfung der Textarea
  if (form.mitteilung.value.trim() === "") fehler += "Ihre Mitteilung ";

  // Fehlermeldung ausgeben
  if (fehler !== "") {
    alert("Die folgenden Felder wurden nicht korrekt ausgefüllt:\n" + fehler);
    return false;
  }

  return true; // Formular kann abgeschickt werden
}

Und nun, wie man es wirklich prüft...

Während das manuelle Schreiben von JavaScript-Validierungen eine gute Übung ist, um die Grundlagen von JavaScript zu verstehen, arbeitet man in der Praxis nicht so. Heutzutage gibt es leistungsfähige Bibliotheken und Frameworks, die diese Aufgaben übernehmen und dabei sicherstellen, dass die Überprüfungen robust, sicher und leicht wartbar sind.

Warum Bibliotheken verwenden?

  1. Zeitersparnis: Vorbereitete Funktionen und Methoden machen die Arbeit effizienter.
  2. Fehlerreduktion: Bibliotheken sind von erfahrenen Entwickler:innen geprüft und getestet.
  3. Komplexe Validierungen: Moderne Bibliotheken unterstützen auch anspruchsvolle Prüfungen wie reguläre Ausdrücke oder mehrsprachige Fehlerausgaben.
  4. Integration mit Frameworks: Bibliotheken lassen sich leicht in Frameworks wie Angular, React oder Vue.js einbinden.

1. Validator.js

Validator.js ist eine beliebte JavaScript-Bibliothek zur Validierung von Strings. Sie unterstützt eine Vielzahl von Prüfungen, darunter E-Mail, URL, Zahlenformate und mehr.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Beispiel mit Validator.js
import validator from "validator";

// Überprüfen einer E-Mail-Adresse
if (!validator.isEmail("beispiel@domain.de")) {
  console.log("Ungültige E-Mail-Adresse!");
}

// Überprüfen einer Telefonnummer
if (!validator.isMobilePhone("+4915123456789", "de-DE")) {
  console.log("Ungültige Telefonnummer!");
}

Mehr Informationen zu Validator.js

2. Yup

Yup ist eine JavaScript-Bibliothek zur Validierung und Schemaerstellung. Sie wird häufig in modernen Frontend-Frameworks wie React verwendet.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import * as yup from "yup";

// Schema definieren
const schema = yup.object().shape({
  vorname: yup.string().required("Vorname ist erforderlich"),
  email: yup.string().email("Ungültige E-Mail").required("E-Mail ist erforderlich"),
  telefon: yup.string().matches(/^[0-9+\-() ]+$/, "Ungültige Telefonnummer"),
});

// Daten validieren
schema
  .validate({
    vorname: "Max",
    email: "max@beispiel.de",
    telefon: "+49 123 456",
  })
  .then(() => console.log("Validierung erfolgreich!"))
  .catch((err) => console.error(err.errors));

Mehr Informationen zu Yup

3. HTML5-Formularvalidierung

Moderne Browser unterstützen viele Validierungen direkt über HTML5-Attribute. Diese sind einfacher und erfordern kein JavaScript.

Beispiel: HTML5-Validierung

<form>
  <label for="email">E-Mail-Adresse:</label>
  <input type="email" id="email" name="email" required>

  <label for="plz">Postleitzahl:</label>
  <input type="text" id="plz" name="plz" pattern="\d{5}" 
      title="Postleitzahl muss 5 Ziffern enthalten" required>

  <button type="submit">Absenden</button>
</form>
  • type="email": Validiert E-Mail-Adressen.
  • pattern: Erlaubt reguläre Ausdrücke für eigene Prüfungen.
  • required: Kennzeichnet ein Pflichtfeld.
  • title: Zeigt eine Fehlermeldung bei ungültigen Eingaben an.

HTML5-Formularvalidierung auf MDN