Formularüberprüfung

In diesem Beispiel wird eine sehr sinvolle Anwendung von JavaScript gezeigt: das Überprüfen von Formularfeldern. Dieses Feature ist sehr praktisch, erlaubt es doch eine Eingabeüberprüfung, ohne erst zeitraubend via Server bei einem CGI rückfragen zu müssen.

Um auf die Elemente eines Formulares zurückzugreifen, hangelt man sich einfach am form-Objekt entlang. Dieses gehört zum document-Objekt. Es kann via Objekt-Nummer document.forms[index] oder mittels des spezifizierten Namens darauf zugegriffen werden. Im Beispiel heißt die FORM myform, man kann somit auf dieses Objekt als document.myform zugreifen.

Auf die einzelnen Elemente der Form kann nun mittels Index document.formname.elements[index] oder mittels document.formname.elementname referenziert werden. Wie auch bei der Form muß in diesem Fall das NAME-Attribut auch gesetzt werden.

An diesem Beispiel wird der Zugriff gezeigt: Mittels des onBlur-Handlers, der immer dann aktiv wird, wenn sich im zugehörigen Objekt etwas ändert, wird das value-Attribut des text-Objekts ausgegeben, d.H. der Inhalt des Textfeldes.
Übrigens: myForm+textFeld.value läßt sich hier auch durch this.value abkürzen.

 <FORM NAME="myForm">
  Geben Sie ein beliebiges Wort ein:
  <INPUT TYPE="TEXT" NAME="textFeld" SIZE=10 
   onBlur="alert('Ihr beliebiges Wort lautet:\n'+myForm.textFeld.value)">
 </FORM>

Nun, dieses Beispiel ist nicht sonderlich sinvoll, läßt sich aber zu einem sinvollen Beispiel erweitern: Bei der Reise durchs Web trifft man oft auf Formulare, bei denen man Namen, Adresse etc. angeben muß. Zuerst werden die zahlreichen Felder des Formulars ausgefüllt, dann wird das Formular abgeschickt, und nach einem Weilchen kommt die Antwort des Servers: Nicht alle Felder wurden ausgefüllt, es wird um nochmalige Bearbeitung und Absenden gebeten. Das kostet Zeit und nervt. Sinvoller ist es, die Eingabe der Felder direkt vom Browser via JavaScript prüfen zu lassen. Aus den eingegebenen Informationen läßt sich dann z.B. sogar noch ein neues kontextabhängiges Formular generieren, in dem weitere Informationen angegeben werden können, ohne den Server zu bemühen. Dies schont die Geduld der Browsenden.

Das folgende Beispiel beschränkt sich auf ein einfaches Formular: Es sollen Name und E-Mail angegeben werden, die Angabe des Alters ist optional. Mittels eines kleinen Scripts wird überprüft, ob

der Name angegeben wurde,
die E-Mail der gültigen Syntax entspricht, also ein "@" und mindestens einen darauffolgenden Punkt (.) enthält,
ob das wahlweise angegebene Alter auch wirklich eine Zahl ist.

<SCRIPT LANGUAGE="JavaScript">
// JavaScript Form Validation 

function checkForm(form) {
  var foundError = false;
  var errorMsg   = "";

  // check if required fields are not empty
  isBlankField(form.realname) 
	? errorMsg += "- Sie haben Ihren Namen nicht angegeben.\n" 
	: true;
 
  isBlankField(form.email)    
	? errorMsg += "- Sie haben Ihre E-Mail nicht angegeben.\n" 
	:  // check if eMail-Address seems to be valid
       	   isValidEmail(form.email.value)
       		? true 
		: errorMsg += "- Ihre E-Mail Adresse scheint ungueltig zu sein.\n";
               
  // check if 'age' field contains only numbers
  if  (!isBlankField(form.age))
   if (!isNumber(form.age.value)) 
       errorMsg += "- Sie duerfen nur Zahlen als Alter angeben.\n"; 
        	
  // prompt user if something is wrong	
  if (errorMsg.length>0) {
	alert("Sie haben das Formular nicht korrekt ausgefuellt:\n"+
		errorMsg);
	return false;
  }
  else {
        alert("Formularueberpruefung:\n"+
               "Sie haben das Formular korrekt ausgefuellt!\n\n");
        return true;
        }
};


// Checks for a blank field
function isBlankField(field) {
    return (field.value.length == 0);
};

// Checks for a "@" in email address 
function isValidEmail(str) {
	var atPosition  = str.indexOf('@');
	var dotPosition = str.indexOf('.',atPosition);
	return ( (atPosition && dotPosition)>0);
};

// Checks that a string contains only numbers
function isNumber(str) {
  for(var position=0; position<str.length; position++){
	var chr = str.charAt(position)
        if  ( (chr < "0") || (chr > "9") ) 
              return false;
  };      
  return true;
};
</SCRIPT>

Bitte geben Sie Ihren Namen, Ihre E-Mail und -wenn Sie möchten- Ihr Alter an.
Ihr Name:
Ihre eMail:
Ihr Alter: