JavaScript Checkbox Beispiel 3: Validation - Gültigkeitsprüfung

In einem Formular ist es oft nötig bestimmte Konfigurationen von Checkbox-Elementen auf vorgegebene Rahmenbedingungen abzustimmen. Hierzu können JavaScript-Funktionen auf Seite des Clients mittels Validation der Benutzereingabe dafür sorgen, dass die geforderten Eingabebedingungen gegeben sind. Im Falle von Eingabefehlern kann der Benutzer beispielsweise unter Verwendung einer Alert-Box auf diese Fehler hingewiesen werden.

Folgendes Beispiel prüft – nach Anklicken eines Buttons – durch eine Funktion, ob die vom Benutzer getätigten Einstellungen der Checkbox-Gruppe korrekt ist gibt eine dem Prüfergebnis entsprechende Meldung aus. Das onClick-Event wird auch hier wieder dazu verwendet, die Validierrungsfunktion zu starten. Näheres zum Thema JavaScript und Events finden Sie unter Event.

Der Zugriff auf die Elemente der Checkbox-Gruppe erfolgt über den Namen der in der Gruppe enthaltenen Elemente (hier ergebnis). Innerhalb des HTML-Elementenbaumes werden die einzelnen Checkbox-Elemente der Gruppe in einem Array gespeichert. Auf die Elemente wird per Vektor-Operator zugegriffen. Mittels Checked-Eigenschaft der einzelnen Elemente wird die korrekte Konfiguration in der If-Anweisung abgefragt. Ist die Eingabe korrekt, so wird in einer Alert-Box eine entsprechend positive, andernfalls eine negative Rückmeldung an den Besucher gerichtet. Alert-Boxen werden über das JavaScript-Objekt Window geöffnet.

<form name="formular3">
  Ein M&auml;usemelker melkt:<br>
  <input type="checkbox" name="ergebnis" value="hund"> Hunde<br>
  <input type="checkbox" name="ergebnis" value="katze"> Katzen<br>
  <input type="checkbox" name="ergebnis" value="maus"> M&auml;use<br>
  <input type="button" onclick="validate_checkbox ()" value="Validate">
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Die nächste Funktion prüft, ob die Stati der Checkboxen im Hinblick auf
  // die Fragestellung korrekt gesetzt sind (validation).
  function validate_checkbox () {
    // Konfiguration der Checkbox-Elemente prüfen...
    if (!document.formular3.ergebnis[0].checked &&
        !document.formular3.ergebnis[1].checked &&
        document.formular3.ergebnis[2].checked)
      // und im Falle einer korrekten Eingabe eine Erfolgsmeldung...
      alert ('Eingabe korrekt!');
    else
      // oder bei Falscher Eingabe eine Fehlermeldung ausgeben.
      alert ('Falsche Eingabe!');
  }
  // -->
  </script>
</form>

JavaScript Checkbox Beispiel 4: Check - Auswahl eines Checkbox-Elements

Das nächste Checkbox-Beispiel demonstriert die Möglichkeiten zur scriptgesteuerten Auswahl einzelner Checkbox-Elemente. Um eine Checkbox auf „Checked” zu setzen (aktivieren; check) muss lediglich die Checked-Eigenschaft über den JavaScript Code auf TRUE gesetzt werden. Eben dies soll die im folgenden Beispiel implementierte Funktion üernehmen.

Im Beispiel wird zunächst eine Gruppe von Radio-Buttons mit dem Namen aufgabe definiert. Die Value-Eigenschaft der Radio-Buttons speichert die zur jeweiligen Aufgabe gehörige Antwortnummer. Mit dem onChange-Event wird auf Änderungen bei der Einstellung der Radio-Buttons reagiert. Ändert der Benutzer die Einstellung der Radio-Buttons, so führt dies zu einem Aufruf der Function checkbox_check, wobei der Value-Wert des angeklickten Radio-Button (durch this.value) an die Funktion übergeben wird.

Weiter unten wird eine Gruppe von Checkboxen definiert, die in ihrer Value-Eigenschaft die Antwortnummer tragen. Auf diese Weise kann das Script die einer Radio-Button-Auswahl zugehörigen Checkbox-Elemente aktivieren. Da eine Auswahl der Checkboxen durch den Benutzer nicht möglich sein soll, werden diese mittels Disabled-Eigenschaft deaktiviert.

Durch die unten gelistete Funktion checkbox_check wird die Zuordnung der Checkbox-Einstellungen zur Aufgabenstellung realisiert. Die Funktion erhält als Parameter einen Wert, der dazu genutzt wird eine zur Aufgabe zugehörige Checkbox-Einstellung zu setzen – alle Checkboxen, bei denen der Value-Wert mit dem übergebenen Wert übereinstimmt, sollen gesetzt werden. Einzelne Elemente des Formulars werden hier wieder über das Document Object und den Formnamen angesprochen.

Mit der in der Funktion genutzten For-Schleife wird über alle im Formular mit dem Namen formular4 enthaltenen Eingabeelemente iteriert. In den If-Abfragen wird zunächst abgefragt, ob das derzeit zu betrachtende Element ein Element vom Typ Checkbox ist. Dies geschieht, indem die Type-Eigenschaft des Eingabeelements mit dem String „checkbox” verglichen wird. Wird diese Abfrage positiv beantwortet, so wird im nächsten Schritt das der Funktion übergebene geforderte Ergebnis mit der Value-Eigenschaft des in Bearbeitung befindlichen Checkbox-Elements verglichen. Gleichen sich die beiden Werte, so wird die Checkbox aktiviert (check), ansonsten wird sie deaktiviert (uncheck).

<form name="formular4">
  Aufgabe:<br>
  <input type="radio" name="aufgabe" onchange="checkbox_check (this.value)" value="1"> 15 + 9<br>
  <input type="radio" name="aufgabe" onchange="checkbox_check (this.value)" value="2"> 17 + 4<br>
  <input type="radio" name="aufgabe" onchange="checkbox_check (this.value)" value="3"> Antwort auf alle Fragen<br>
  Ergebnis:<br>
  <input type="Checkbox" name="ergebnis" value="2" disabled> 21<br>
  <input type="Checkbox" name="ergebnis" value="3" disabled> 42<br>
  <input type="Checkbox" name="ergebnis" value="1" disabled> 24<br>
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Die Funktion checkbox_check setzt den Status von Checkbox-Elementen auf
  // TRUE (Checked) bzw. FALSE (Unchecked), falls der im Parameter ergebnis
  // angegebene Parameterwert mit dem Wert der Value-Eigenschaft der jeweiligen
  // Checkbox übereinstimmt.
  function checkbox_check (ergebnis) {
    // Alle im Formular enthaltenen Eingabeelemente durchgehen
    for (var i = 0; i < document.formular4.elements.length; i++)
      // Handelt es sich um eine Checkbox?
      if (document.formular4.elements[i].type == 'checkbox')
        // Stimmt die Value-Eigenschaft der Checkbox mit der
        // ausgewählten Aufgabe überein?
        if (document.formular4.elements[i].value == ergebnis)
          // Ergebnis gehört zur Aufgabe und muss deshalb
          // auf Checked gesetzt werden.
          document.formular4.elements[i].checked = true;
        else
          // Alle anderen Checkboxes: uncheck
          document.formular4.elements[i].checked = false;
  }
  // -->
  </script>
</form>

« zurück zu Seite 1