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>
E-Mail-Adresse
Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht