Formular

Aufbau eines Formulars Prüfung der Eingaben mit JavaScript
Keywords: Aufbau, Formular, Prüfung, Eingaben, Formularvorlage, JavaScript, Beispiel, download, kostenlos
 Formular Erklärung 02
    
 Home • Formulare • Formularaufbau Quellcode 

 Formularbeispiel 02
01 02 03 04 05
Eine Erweiterung des Basisformular 01. Es sind 4 Eingabefelder vorgesehen. Lediglich 2 Einträge sollen auf gültige Eingaben überprüft werden. Ein Sende-Button soll den Versand per Email auslösen.
Basisformular 02 mit Prüfungen - Erklärung des Aufbaus


a) Ist das Feld Emailadresse und / oder Nachricht leer?
b) Ist die Eingabe im Feld Emailadesse gültig?

Hier gilt: Das Eingabefeld für die Emailadresse und das Textfeld für die Nachricht sind Pflichtfelder! Bei der Eingabe der Emailadresse wird geprüft ob das Zeichen '@' und ein Punkt vorkommen.


Formularvorlagen finden Sie im Menü 5 Formularvorlagen


   Der Aufbau

Der Aufbau des Formulars ist identisch mit dem Basisformular 01. Hier wird nun zusätzlich eine Prüfung 'eingebaut'. Zur Prüfung wird JavaScript eingesetzt. Um bei der Prüfung die einzelnen Formularelemente ansprechen zu können, kann man das Attribut 'id' oder 'name' verwenden. Ich habe hier zur Identifizierung der Eingabefelder das Attribut 'name' gewählt. Über diesen eindeutigen Namen kann JavaScript die Eingabefelder 'ansprechen' und deren Inhalte auslesen.

Der bisherige Aufbau aus dem Beispiel Basisformular 01 ... 
<form action="mailto:JuppZupp@abc.de" method="post" enctype="text/plain">



Vorname

Nachname 

Email

Text



 <input type="text" size="30" value="">

 <input type="text" size="30" value="">

 <input type="text" size="30" value="">

 <textarea cols="30" rows="4"></textarea>

 <input type="submit" value=" senden">




</form>
... wird nun erweitert, indem ich für jedes Eingabefeld das Attribut 'name' eintrage:

<form action="mailto:JuppZupp@abc.de" method="post" enctype="text/plain">



Vorname

Nachname 

Email

Text



 <input type="text" size="30" name="Vname" value="">

 <input type="text" size="30" name="Nname" value="">

 <input type="text" size="30" name="Email" value="">

 <textarea cols="30" rows="4" name="Nachricht"></textarea>

 <input type="submit" value=" senden">




</form>


   Das Formular

  • Email und Nachricht sind Pflichtfelder
  • Eine Prüfung (leer?) erfolgt nur für diese beiden Felder
  • Prüfung auf gültige Eingabe bei Eingabefeld Email

Vorname:  
Nachname:  
E-Mail:*
Text:*
 
 

Auch mit diesem Formular 02 möchte ich lediglich den Aufbau einer Prüfung erklären. Nutzen sie es bitte nicht für ihre Seite. Es bietet immer noch keinerlei Schutz vor Email-Spidern und Absendung durch Roboter. Formularvorlagen für den Einsatz finden sie im Menü 2 Formularvorlagen





  Aktion auslösen beim Senden - Prüfen

Die Prüfung der Eingaben soll beim Absenden, also beim Klicken des Submit-Buttons (Sende-Buttons) eingeleitet werden. Beim Ereignis 'Senden' soll eine Aktion ausgelöst werden.

onSubmit="return Pruefen()

Einbindung des Eventhandlers 'onSubmit' im <form>-Tag
<form onSubmit="return Pruefen() ... method="post" enctype="text/plain">



Vorname

Nachname 

Email

Text



 <input type="text" size="30" name="Vname" value="">

 <input type="text" size="30" name="Nname" value="">

 <input type="text" size="30" name="Email" value="">

 <textarea cols="30" rows="4" name="Nachricht"></textarea>

 <input type="submit" value=" senden">




</form>

Beim Senden wird die Funktion 'Prüfen()' aufgerufen. Alle Tests die sie innerhalb dieser Funktion 'Prüfen()' notieren werden ausgeführt. Die Funktion 'Pruefen()' steht im JavaScript-Block, im HEAD-Bereich der Webseite. 
function Pruefen()
{
hier steht die Prüfung 1 (Eingabe Emailadresse leer)
hier steht die Prüfung 2 (Eingabe Emailadresse gültig)
hier steht die Prüfung 3 (Eingabe Text leer)
}
Bei diesem Formular werden 2 Eingabebereiche vor dem Absenden geprüft. Grundsätzlich dürfen diese Felder nicht leer sein. Bei der Emailadresse wird außerdem die Eingabe selbst noch einmal genauer geprüft. Wie eine Prüfung der Emailadresse auf Gültigkeit aufgebaut ist, lesen sie im Beispiel Eingabe Prüfen 02 (Email).

Andere Filter / Prüfungen finden sie im Menü 4


  Prüfung ob leer

Hier erkläre ich kurz die Arbeitsweise der Prüfung, ob ein Eingabefeld leer ist. Das gewählte Beispiel bezieht sich auf des mehrzeiligen Eingabebereich (textarea).

Der HTML-Code für den Eingabebereich 'Nachricht': 

<textarea name="nachricht" cols="20" rows="4">
Im HTML-Tag erkennen sie die Vergabe eines Namens für den mehrzeiligen Eingabebereich. Die Vergabe eines Namens (oder einer ID) ist Bedingung für eine Prüfung. Anhand dieses Namens wird innerhalb der Funktion zur Prüfung der Eingabe, das Formularelement identifiziert.

Die Prüfung soll beim Senden ausgelöst werden. Dazu wird das Formular noch einmal erweitert. Ein JavaScript-Eventhandler (onSubmit) übernimmt die Aufgabe, die Prüfroutine aufzurufen. Innerhalb dieser Prüfroutine stehen die Script-Anweisungen zur Prüfung. 
... onSubmit="return Pruefen();">
Beim Absenden (OnSubmit) wird die Funktion Pruefen() aufgerufen, die sämtliche Prüfungsroutinen enthält. Beim Eingabefeld 'Nachricht' wird geprüft, ob das Feld leer ist.

Hier den Teil für die Prüfung des Eingabebereichs 'Nachricht' zusammenhängend: 
// Prüfung ist das Feld Nachricht leer?

if(document.vorlage01.Nachricht.value == "") {
alert("Bitte Text eintragen!");
document.vorlage01.Nachricht.focus();
return false;
}
Schrittweise:

Wenn im Formular mit dem Namen 'vorlage01' der Eingabebereich mit dem Namen 'Nachricht' leer ist, wird eine Alert-Box mit einer entsprechenden Meldung angezeigt. 

alert("Bitte Text eintragen!");
Das sieht etwa so aus: Alert-Box

Danach wird die Eingabemarke im Formular mit dem Namen 'vorlage01' in das Feld mit dem Namen 'Nachricht' gesetzt durch 
document.vorlage01.Nachricht.focus();


   Schutz vor Email-Spidern

Diese Art der Notierung der Emailadresse in einem Formular bietet absolut keinen Schutz vor Spam-Robots, die im Quelltext von Webseiten nach Emailadressen suchen.

Siehe dazu: Basiswissen Spam

Das übliche einleitende Form-Tag zeigt die Emailadresse als zusammenhängenden Text.
<form action="mailto:IhreAdresse@web.de" method="post" ...
Das macht es den Email-Sammlern zu leicht!