Formular Checks
Der Javascript Check ist nur eine Hilfe beim Ausfüllen des Formulars, er kann mühelos umgangen werden und taugt daher nicht als Sicherheitsfeature; serverseitige Prüfung ist unerlässlich.
Funktion zum Formularcheck
Der Check ist nur in transitional HTML W3C konform.
Die Formularfelder müssen benannt sein: name="...", damit mit Javascript auf sie zugegriffen werden kann. Formularelemente mit Namen Attributen sind aber nicht mehr strict xHTML konform.
<script type="text/javascript">
// ---------------------------------- Funktion tesTer --------------------------
function tesTer() {
// ---------------------------------- Name leer ??? ----------------------------
if(document.theForm.Name.value.length==0) {
alert("Bitte geben Sie Ihren Namen ein");
document.theForm.Name.focus();
return false;
}
// ---------------------------------- Name nur erlaubte Zeichen ??? ------------
// Leerschlag auch erlaubt
var goodK = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyzäöü";
var fVal = document.theForm.Name.value;
var allValid = true;
for (i = 0; i < fVal.length; i++) {
ch = fVal.charAt(i);
for (j = 0; j < goodK.length; j++)
if (ch == goodK.charAt(j))
break;
if (j == goodK.length) {
allValid = false;
break;
}
}
if (!allValid) {
alert("Im Namen sind nur Buchstaben erlaubt.");
document.theForm.Name.focus();
document.theForm.Name.select();
return (false);
}
// -------------------------------- Telefon leer ??? ---------------------------
if(document.theForm.Telefon.value.length==0) {
alert("Bitte geben Sie Ihre Telefonnummer ein");
document.theForm.Telefon.focus();
return false;
}
// -------------------------------- Telefon nur Zahlen ??? ---------------------
var noNu = 1;
for(i=0; i < document.theForm.Telefon.value.length;++i)
if(document.theForm.Telefon.value.charAt(i) < "0" || document.theForm.Telefon.value.charAt(i) > "9") noNu = -1;
if(noNu == -1) {
alert("Die Telefonnummer soll ausschliesslich aus Zahlen bestehen.");
document.theForm.Telefon.focus();
document.theForm.Telefon.select();
return false;
}
// --------------------------------- eMail leer ??? ----------------------------
if(document.theForm.eMail.value.length==0) {
alert("Bitte geben Sie Ihre E-Mail-Adresse ein");
document.theForm.eMail.focus();
return false;
}
// --------------------------------- eMail Leerschlag ??? ----------------------
if(document.theForm.eMail.value.search(/ /) != "-1") {
alert("Die E-Mail Adresse darf keine Leerzeichen enthalten.");
document.theForm.eMail.focus();
document.theForm.eMail.select();
return (false);
}
// -------------------------------- eMail Syntax: name@domain.org --------------
// eMail string durch das @ in zwei Teile splitten
sp=document.theForm.eMail.value.split(/@/);
/*
falls es nicht 2 Teile hat, oder der erste Teil oder der zweite Teil leer ist
oder es im zweiten Teil keinen Punkt hat
*/
if((sp.length != 2) || sp[0] == "" || sp[1] == "" || sp[1].indexOf ('.',0) == -1) {
alert("E-Mail Adressen haben das Format: name@domain.org \nBitte achten Sie auf das @ und den .");
document.theForm.eMail.focus();
document.theForm.eMail.select();
return (false);
}
// --------------------------------- Cip leer ??? ------------------------------
if(document.theForm.Cip.value.length==0) {
alert("Bitte geben Sie Ihre Postleitzahl ein");
document.theForm.Cip.focus();
return false;
}
// --------------------------------- Cip weniger als 4 oder mehr als 5 ??? -----
if(document.theForm.Cip.value.length < 4 || document.theForm.Cip.value.length >5) {
alert("Die Postleitzahl soll 4 oder 5 Stellen haben");
document.theForm.Cip.focus();
document.theForm.Cip.select();
return false;
}
// --------------------------------- Cip any bad characters ??? ----------------
var Cip = document.theForm.Cip;
badK = "+¦@*#ç%&¬|)(=?~][}{-;,:.";
for(i=0;i<badK.length; i++) {
posK = badK.charAt(i);
if (Cip.value.indexOf (posK,0) != -1) {
alert("Eine Postleitzahl enthält keine Sonderzeichen.")
Cip.focus();
Cip.select();
return false;
}
}
} // -------------------------------- ende Funktion tesTer ---------------------
</script>
Eventhandler im Formular
onsubmit="return tesTer()"
Im Formular-Tag ist ein Eventhandler untergebracht, welcher das Javascript aufruft,
wenn der submit-Button geklickt wird.
<form onsubmit="return tesTer()" name="theForm" method="post" action="test_danke.htm">
Ps.: Die Tabelle zum Layout zu nutzen ist altmodisch, besser wird dies mit CSS getan.
Check den Code.