JavaScript Form Beispiel 4: Form Button

In HTML-Formularen können Buttons nicht allein als Reset- oder Submit-Button verwendet werden, um Formulardaten zu löschen oder das Versenden der Daten an den Webserver einzuleiten. Prinzipiell können Buttons auch zu anderen Zwecken verwendet werden: Beispielsweise zum Starten einer dem Versenden der Eingabedaten vorangehenden Datenprüfung. Anders als bei Reset- und Submit-Buttons, bei denen das Typ-Attribut des Input-Elements mit reset bzw. submit belegt wird, muss das Typ-Attribut bei einem anderweitig verwendeten Button mit button belegt werden. Ansonsten werden die Eingabefelder im Formular auf die selbe Weise definiert.

Im folgenden Script-Code wird ein Formular definiert, welches aus einem Eingabeelement vom Typ Text und einem normalen Button besteht. Das Textfeld fordert den Benutzer auf eine E-Mail-Adresse einzugeben und der Button leitet eine entsprechende Gültigkeitsprüfung ein. Der Button wird direkt in der Buttondefinition mit einem Event-Handler – der Prüffunktion checkEmail – verbunden.

Das unten stehende Beispiel nutzt wieder ein JavaScript Event, welches ausgelöst wird, sobald der Benutzer auf den Button geklickt hat. Hierbei handelt es sich um das bereits beschriebene JavaScript-Event onClick. Der auf die Erstellung des Formulars folgende JavaScript Code definiert den verwendeten Event-Handler, der zur Gültigkeitsprüfung der eingegebenen E-Mail-Adresse dient. Zu Beginn der Funktion checkEmail wird auf die Value-Eigenschaft des Textfeldes zugegriffen um diese in einer String-Variablen zwischenzuspeichern. Auch hier erfolgt der Zugriff auf das Formular und dessen Felder mittels Document Object.

Das darauf folgende If-Statement dient dazu, eine der Eingabe entsprechende Ausgabe in einer Dialogbox zu tätigen. Zu diesem Zweck bedient sich die Funktion der zur Darstellung einer Dialogbox gedachten Methode Alert(). Sie gehört zur Schnittstelle des JavaScript Window-Objekts, über das auch andere Dialoge aufgerufen werden können. Beachten Sie hierzu auch die Beispiele zu den Dialogen Confirm, Prompt und Print.

Im Beispiel wird mit der Methode match des vordefinierten Objekts String entschieden, welche Ausgabe erfolgen soll. Match prüft dabei das entsprechende String auf Übereinstimmung mit dem der Methode übergebenen regulären Ausdruck. Hier wird ein regulärer Ausdruck zur (syntaktischen) Erkennung gültiger E-Mail-Adressen verwendet.

<form name="formular1" method="get">
  E-Mail-Adresse <input name="email" type="text" />
  <input type="button" onclick="checkEmail()" value="E-Mail-Adresse pr&uuml;fen" />
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Funktion zur Gültigkeitsprüfung einer E-Mail-Adresse.
  // Dabei wird lediglich das Format der Adresse geprüft.
  // Nicht geprüft wird dagegen, ob die angegebene Adresse
  // existiert.
  function checkEmail () {
    // Variable zur Zwischenspeicherung der im Textfeld eingegebenen
    // Eingabedaten.
    var adr = document.formular1.email.value;
    // Prüfung des Eingabestrings auf ein gültiges Format.
    // Der reguläre Ausdruck sollte alle gültigen E-Mail-Adressen
    // erkennen.
    if (adr.match (/^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$/))
      // Trifft der reguläre Ausdruck zu, so handelt es sich
      // um eine gültige E-Mail-Adresse und es folgt eine
      // entsprechende Ausgabe in einer Alert-Box.
      alert ('Format der E-Mail-Adresse ist korrekt');
    else
      // Ansonsten wird auf eine ungültige Eingabe hingewiesen.
      alert ('Format der E-Mail-Adresse ist nicht korrekt');
  }
  // -->
  </script>
</form>

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