JavaScript Form Beispiel 7: Leere Eingaben in Textfeldern

Um sicherzustellen, ob ein Eingabefeld – Eingabeelement vom Typ Text oder Textarea – auch mit Eingabedaten gefüllt ist, kann mit Hilfe von JavaScript die Anzahl der in einem Input- bzw. Textarea-Feld eingegebenen Zeichen ermittelt werden. Dazu kann eine allgemeine JavaScript-Funktion formuliert werden die abfragt, ob in einem Formularfeld eine Eingabe getätigt wurde oder nicht. Hiermit kann sichergestellt werden, dass Felder in einem Formular auch mit einer Eingabe belegt sind, wenn dies zwingend erforderlich ist.

Der folgende Script-Abschnitt definiert eine solche Funktion und zeigt zugleich die Anwendung dieser Lösung. Im Beispiel wird als erstes ein HTML-Formular definiert, welches ein Eingabefeld sowie einen Button enthält. Klickt der Benutzer auf diesen Button, so wird die Prüffunktion isEmpty aufgerufen, die das Eingabefeld dahingehend prüft, ob das Feld leer ist oder nicht. Die Prüfung des Eingabefeldes wird durch Verbindung des onClick-Events des Buttons mit einem Event-Handler – hier übernimmt die Funktion isEmpty die Rolle des Event-Handlers – realisiert.

Beim Aufruf des Event-Handlers wird der Funktion ein Verweis auf das zu prüfende Eingabeelement übergeben. Dieser Verweis wird über die DOM-Methode getElementById ermittelt. Als zweiter Parameter wird ein leeres String angegeben, welches die Funktion isEmpty im Falle einer leeren Eingabe dazu bewegt, eine Standard-Fehlermeldung auszugeben.

Auf die Definition des Formulars folgt der JavaScript-Code, in dem die Funktion isEmpty implementiert wird. Zunächst wird geprüft, ob das angegebene Element ein Eingabeelement vom Typ text, textarea oder password ist. Wurde kein solches Element angegeben, so wird dies in einer Fehlermeldung am Ende der Funktion angezeigt wonach die Funktion beendet wird.

Im zweiten If-Statement wird dann geprüft, ob das Eingabeelement ein leeres String enthält (Benutzer hat keine Eingabe getätigt). Ist dies der Fall, so wird die Funktion mit dem Rückgabewert TRUE beendet – anderenfalls wird FALSE zurückgegeben. Wenn auch der zweite Parameter der Funktion mit einer Zeichenkette angegeben wurde, dann gibt die Funktion mittels einer Alert-Box die angegebene bzw. bei Angabe eines Leerstrings eine Standard-Fehlermeldung aus. Alert ist eine der in JavaScript nutzbaren und dem Window-Object zugehörigen Dialogboxen.

<form>
  Zeichenkette <input id="zeichenkette" name="zeichenkette" type="text" /> <input type="button" onclick="isEmpty (document.getElementById ('zeichenkette'), '')" value="Ist das Feld leer?" /><br>
</form>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Folgende Funktion prüft, ob ein übergebenes Eigabefeld leer ist.
// Als erster Parameter wird das HTML-Elementobjekt eines Formularfeldes übergeben.
// Der Zweite Parameter ist optional und muss, wenn er angegeben wird, ein String mit
// einer Fehlermeldung enthalten. Wird ein leeres String übergeben, so wird eine
// Standardfehlermeldung ausgegeben. Fehlt dieser Parameter, so wird keine Alert-Box
// mit einer Fehlermeldung geöffnet. Als Rückgabewert wird TRUE geliefert, wenn das
// Feld leer ist und FALSE, wenn im Eingabefeld mindestens ein Zeichen eingegeben wurde.
// Auch wird der Focus im Fehlerfall auf das entsprechende Eingabeelement zurückgesetzt.
function isEmpty (element, errMsg) {
  // Übergebenes Element muss ein Objekt vom Typ text, password oder textarea sein!
  if (element && typeof element == 'object' && element.nodeType == 1 &&
      (element.type == 'text' ¦¦ element.type == 'textarea' ¦¦ element.type == 'password')) {
    // Ist das Feld leer?
    if (element.value.length == 0) {
      // Fehlermeldung nur anzeigen, wenn ein String mit einer Fehlermeldung
      // als Parameter übergeben wurde.
      if (typeof errMsg == 'string')
        // Zeichenkette mit Fehlermeldung nicht leer?
        if (errMsg.length != 0)
          // Individuell angegebene Fehlermeldung ausgeben
          alert (errMsg);
        else
          // Standardfehlermeldung ausgeben
          alert ('Feld ' + element.name + ' ist leer!');
      // Eingabefeld wieder aktivieren
      element.focus ();
      return true;
    }
    // Feld ist nicht leer!
    return false;
  }
  // Parameterfehler: Es wurde kein Elementobjekt vom Typ text, password oder textarea angegeben.
  alert ('Angegebenes Element ist nicht vom Typ text, password oder textarea!');
}
// -->
</script>

JavaScript Form Beispiel 8: Textarea - Zeichenbeschränkung testen

Das nächste Beispiel nutzt eine Funktion zur Prüfung von Eingaben auf vorgegebene Begrenzungen bzgl. der Anzahl der eingegebenen Zeichen. Auch hier wird wieder das Event onClick in Verbindung mit einem Button verwendet, um die Eingabeprüfung einzuleiten. Bei der Übergabe des zu prüfenden Input-Feldes kommt auch hier die Methode getElementById() zum Einsatz, welche über das DOM einen Verweis auf das Eingabeelement über seine HTML-ELement-ID ermittelt (s.a. Document).

Die beiden folgenden Parameter der Funktion geben die Grenzen bzgl. der Anzahl der einzugebenen Zeichen im Eingabefeld an. Im Feld müssen sich nach der Eingabe mindestens min_size, höchstens aber max_size (im Beispiel fünf bzw. zehn) Zeichen befinden, damit die Funktion TRUE – die Eingabe wird akzeptiert – liefert. Der letzte Parameter gibt auch hier ein String an, welches eine auszugebende Fehlermeldung enthält, wobei auch in diesem Beispiel wegen der Angabe eines leeren Strings eine Standard-Fehlermeldung hervorgerufen wird.

Die JavaScript Funktion im unteren Beispiel funktioniert im Prinzip ebenso, wie die Funktion isEmpty. Anders als bei letzterer wird hier nicht abgefragt, ob das Feld leer ist, sondern ob sich die Anzahl der Zeichen im angegebenen Rahmen befindet. Beide Funktionen können natürlich gleichermaßen mit einfachen Textfeldern und Textareas verwendet werden.

<form>
  Anfragetext <textarea id="anfrage" name="anfrage"></textarea> <input type="button" onclick="lengthCheck (document.getElementById ('anfrage'), 5, 10, '')" value="Test auf Zeichengrenzen" /><br>
</form>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Die Funktion lengthCheck prüft die im angegebenen Eingabefeld getätigte Eingabe
// auf die in den Parametern zwei und drei angegebene Anzahl der geforderten Zeichen.
// Min_size gibt die minimale Anzahl der Zeichen, max_size die höchstmögliche Anzahl
// der einzugebenen Zeichen an. Zurückgeliefert wird TRUE, wenn die Anzahl der im Feld
// eigegebenen Zeichen innerhalb dieser Schranken ist - Ansonsten FALSE.
// Der optionale letzte Parameter dient auch hier der Angabe einer individuellen
// Fehlermeldung.
function lengthCheck (element, min_size, max_size, errMsg) {
  if (element && typeof element == 'object' && element.nodeType == 1 &&
      (element.type == 'text' ¦¦ element.type == 'textarea' ¦¦ element.type == 'password')) {
    var eingabe = element.value;
    // Anahl der im Input-Element enthaltenen Zeichen auf angegebe Schranken prüfen
    if (eingabe.length < min_size ¦¦ eingabe.length > max_size) {
      if (typeof errMsg == 'string')
        if (errMsg.length != 0)
          alert (errMsg);
        else
          alert ('Feld ' + element.name + ' muss ' + min_size + '-' + max_size + ' Zeichen enthalten!');
      element.focus ();
      return false;
    }
    return true;
  }
  alert ('Eingabeelement ist nicht vom Typ text, password oder textarea!');
}
// -->
</script>

« zurück zu Seite 1 2 3 4 5 6 weiter zu Seite 8 9 »