Beispiel - Formular (Feedback)

	J a v a s c r i p t II.

Fehlerprüfung per JavaScript II.

Weitere Modifikationen hinsichtlich der Fehlerprüfung, insbesondere bezüglich der Email-Adresse.

Nachstehend das Formular, indem Du die diese Modifikationen testen kannst, nachdem Du Dich (unterhalb des Formulares) mit den Erklärungen vertraut gemacht hast.

F e e d b a c k zur Mouseover-Seite

Textfeld: DEIN NAME (der Anwender soll seinen Namen eingeben):
Prüfung: Sind Ziffern in der Zeichenkette?.


if(!isNaN (document.mailer.d_name.value))
{
alert ("Nur Buchstaben bitte");
document.mailer.d_name.focus();
return false;
}

Textfeld: DEINE E-MAIL (der Anwender soll seine Email eingeben):
Prüfung:
Unerlaubte Zeichen in einer Email-Adresse/
Wurde ein Punkt NACH dem "@-Zeichen" eingegeben? /
Wurde versehentlich mehr als ein "@-Zeichen" eingetippt?/
Tauchen NACH dem Punkt 2-4 Zeichen auf? .

Jetzt wird die Email-Adresse im Hinblick auf unerlaubte Zeichen durchgesehen.

var zeichen="/ ;:,äüö";
eingabe=document.mailer.d_mail.value;
laenge=eingabe.length;

for( i=0;i<laenge;i++ )
{
  badchar=eingabe.charAt(i);
  if (zeichen.indexOf(badchar)>-1)

 {
alert("Die Zeichen \n Slash(/),\n  Doppelpunkt (:),\n  Semikolon (;),\n
Komma (,)\n  und Leerzeichen ( )\n sowie deutsche Umlaute (ä,ü,ö) \n
sind in einer Email nicht erlaubt." );
document.mailer.d_mail.focus();
return false;
 }
}

Sind mehrere "@-Zeichen in der Email-Adresse enthalten?

atPosition=document.mailer.d_mail.value.indexOf('@');

if(document.mailer.d_mail.value.indexOf('@',atPosition+1)>-1)
{
alert ("Du hast versehentlich mehr als ein '@-Zeichen' eingegeben.");

document.mailer.d_mail.focus();
return false
}

Taucht irgendwo NACH dem "@-Zeichen" auch der Punkt auf?

if(document.mailer.d_mail.value.indexOf('.',atPosition)==-1)
{
alert ("An irgendeiner Stelle NACH dem '@-Zeichen'
sollte ein Punkt folgen.");
document.mailer.d_mail.focus();
return false
}

Jetzt folgt die Analyse der TopLevelDomain.
Folgen nach dem Punkt mindestens 2 - 4 Buchstaben ?

punktPosition=document.mailer.d_mail.value.lastIndexOf('.');

if(punktPosition+3>document.mailer.d_mail.value.length)
{
alert("Nach dem Punkt müssen noch mindestens 2 Zeichen folgen. ")
return false
}

if(punktPosition+5<document.mailer.d_mail.value.length)
{
alert("Bitte mindestens 2, aber NICHT mehr
als 4 Zeichen nach dem Punkt.\n
Zum Beispiel: \
meinemail@.de \n
meinemail@.com \n
meinemail@.info \n")
return false
};

letzte

Abfrage nach 2 Zeichen nach dem Punkt:

Ist die Position des Punktes +3 Zeichen (punktPosition+3) grösser als die Länge der Eingabe ( > document.mailer.d_mail.value.length)?

Abfrage nach maximal 4 Zeichen nach dem Punkt:

Zu beachten ist:

Reset-Button: LÖSCHEN ( der Anwender hat die Möglichkeit die Eingaben zu löschen):
Verbesserung: Nachfrage vor Löschvorgang

<input type="Reset"  value="Löschen"
onclick="return confirm ('Willst Du wirklich alle
Eingaben löschen?')"; >

QUELLTEXT, komplette HTML-Seite mit Formular und JavaScript-Fehlerprüfung I. und II.:

<html>
<head>
<title> Formular - Fehlerprüfung per JavaScript II </title>
<SCRIPT LANGUAGE="JavaScript">

function checkForm()
{

if(document.mailer.d_name.value=="")
{
alert ("Bitte Deinen Namen eingeben");
document.mailer.d_name.focus();
return false;
}

if( document.mailer.d_name.value.length <2  )
{
alert ("Dein Name sollte doch schon aus zwei Zeichen bestehen, sonst wäre es ja  kein Name sondern ein Buchstabe oder eine Ziffer");
document.mailer.d_name.focus();
return false;
}

if(!isNaN (document.mailer.d_name.value))
{
alert ("Nur Buchstaben bitte");
document.mailer.d_name.focus();
return false;
}

if (document.mailer.d_mail.value=="")
{alert ("Bitte eine Email eingeben");
document.mailer.d_mail.focus();
return false
}

if(document.mailer.d_mail.value.indexOf('@')==-1 ||document.mailer.d_mail.value.indexOf('.')==-1)
{
alert ("Eine gültige Emailadresse muss  \n '@' (At-Zeichen)und einen '.' (Punkt)\n enthalten.");
document.mailer.d_mail.focus();
return false
}

var zeichen="/ ;:,äüö";
eingabe=document.mailer.d_mail.value;
laenge=eingabe.length;

for( i=0;i<laenge;i++ )
{
  badchar=eingabe.charAt(i);
  if (zeichen.indexOf(badchar)>-1)
 {
alert("Die Zeichen \n Slash(/),\n  Doppelpunkt (:),\n  Semikolon (;),\n  Komma (,)\n  und Leerzeichen ( )\n sowie deutsche Umlaute (ä,ü,ö) \n sind in einer Email nicht erlaubt." );
document.mailer.d_mail.focus();
return false;

}

atPosition=document.mailer.d_mail.value.indexOf('@');

if(document.mailer.d_mail.value.indexOf('@',atPosition+1)>-1)
{alert ("Du hast versehentlich mehr als ein '@-Zeichen' eingegeben.");
document.mailer.d_mail.focus();
return false
}

if(document.mailer.d_mail.value.indexOf('.',atPosition)==-1)
{alert ("An irgendeiner Stelle NACH dem '@-Zeichen' sollte ein Punkt folgen.");
document.mailer.d_mail.focus();
return false
}

punktPosition=document.mailer.d_mail.value.lastIndexOf('.');

if(punktPosition+3>document.mailer.d_mail.value.length){alert("Nach dem Punkt müssen noch mindestens 2 Zeichen folgen. ")
return false};

if(punktPosition+5<document.mailer.d_mail.value.length){alert("Bitte mindestens 2, aber NICHT mehr als 4 Zeichen nach dem Punkt.\n Zum Beispiel: \ meinemail@.de \n meinemail@.com \n meinemail@.info\n")
return false};

if (document.mailer.bewertung_note.options.value=="bit_auswaehlen"                                     )
{
alert ("Bitte Treffen Sie doch eine Noten-Auswahl ");
return false
}

if(document.mailer.verbesserung_inh.checked==false && document.mailer.verbesserung_lay.checked==false && document.mailer.verbesserung_langs.checked==false && document.mailer.verbesserung_nichts.checked==false
)

{
alert("Bitte kreuzen Sie doch ein oder mehrere Felder  bei ' Zu verbessern? ' an.");
return false
}

radio1=
document.forms[0].elements[7].checked;
radio2=
document.forms[0].elements[8].checked;
if(radio1 == false && radio2 == false)
{
alert (" Bitte wählen Sie JA oder NEIN:' Neue Inhalte per Email? ' ");
return false

}

if(document.mailer.comment.value.length<15)
{
alert ("Mehr als 15 Zeichen sollten es schon sein ;-) ");
document.mailer.comment.focus();
return false;
}

}

//-->
</script>
<noscript>Bitte JavaScript im Browser aktivieren</noscript>
</head>

<div align="center">F e e d b a c k zur Mouseover-Seite</div>

<form name="mailer" action="mailto:deine.mail@deinmailanbieter.de" method="post" enctype="text/plain">
<table  width="100%" border="1" cellpadding="10" cellspacing="0" >
<tr>
<td >
Dein Name:&nbsp;&nbsp;&nbsp;&nbsp;
<input type="Text" name="d_name" value="" size="20" maxlength="50" >
<br>
Deine E-Mail:&nbsp;
<input type="Text" name="d_mail" value="" size="20" maxlength="50" >
<br>
Die Note :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="bewertung_note" >
<option value="bit_auswaehlen" >Bitte auswählen
<option >1=super, klasse, weiter so.
<option >2=gute homepage.
<option >3=zufriedenstellend, im prinzip OK.
<option >4=noch zu verbessern.
<option >5=ups..ich bin den tränen nahe.
<option >6=auweia...dabeisein ist alles.
</select>
<br>
<br>
Zu verbessern:
<input type="Checkbox" name="verbesserung_inh" value="inhalt">Inhalt&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="Checkbox" name="verbesserung_lay" value="layout">Layout&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="Checkbox" name="verbesserung_langs" value="langsam">Zu langsam&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="Checkbox" name="verbesserung_nichts" value="nichts">nichts
<br>
<br>
Möchtest Du per Email über neue Inhalte informiert werden? <input type="Radio" name="ra_info" value="yes">ja&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="Radio" name="ra_info" value="no">nein
<br>
<br>
Kommentar:&nbsp;&nbsp;&nbsp;
<textarea name="comment" cols="30" rows="5"  ></textarea></td></tr>
<tr>
<td align="center" ><input type="Reset"  value="Löschen" onclick="return confirm ('Willst Du wirklich alle Eingaben löschen?')"; >&nbsp;&nbsp;&nbsp;<input type="Submit"  value="Abschicken" onclick="return checkForm()" ></td>
</tr>
</table>
</form>

</body>
</html>

weiter »