Grüße (=
Da mir langweilig war und ich auf eine etwas andere JavaScript schreibweise gestoßen bin, hab ich einfach mal ne nützliche Kleinigkeit geschrieben, mit der man seine Formulare automatisch überprüfen lassen kann. (ACHTUNG! Ihr solltet dennoch die Eingaben mit PHP untersuchen lassen!)
Was macht es auf meiner Beispielseite?
-> Es gibt allen Input's die Beschriftung aus dem Title-Attribut
-> Es gibt allen Input's Eventhandler, mit denen automatisch der Inhalt z.B. beim Standardtext entfernt wird,..
-> Es überprüft die Eingaben nach Verlassen des Feldes
-> Es Vergleicht Passwortfeld 1 mit Passwortfeld 2
-> Es verhindert ggf. das Absenden des Formulars, falls nicht alles korrekt ist
Bei Fragen stehe ich euch gerne zur Verfügung (= Ebenfalls hätte ich auch gerne Feedback von euch 
Eine Frage hätte ich aber auch noch: Soll ich das in dieser Schreibweise lassen, oder soll ich richtig OOP schreiben? (also mit myObject.prototype.myFunction [Nicht die Funktionsbibliothek])
Inhaltsverzeichnis:
-> Autor, Größe, Code,..
-> Funktionsübersicht
-> Benutzung des Script
FormCheck.js
Author: Dustin Breuer (Sarkkan[at]ymail[dot]com)
Summary: Automatischer Formularüberprüfer
Updated: 2010-12-08
License: MIT(<- Link zu Wiki, für Informationen zur Lizenz)
Version: 1.0 Beta
Größe: 3.985Bytes (~3,9Kb) [der .mim.js Code]
URL:
<!-- m --><a class="postlink" href="http://Code.Sarkkan.de/JavaScript/FormCheck/">http://Code.Sarkkan.de/JavaScript/FormCheck/</a><!-- m -->
<!-- m --><a class="postlink" href="http://Code.Sarkkan.de/JavaScript/FormCheck/Form.mim.js">http://Code.Sarkkan.de/JavaScript/FormCheck/Form.mim.js</a><!-- m -->
Notes:
Uncompressed Code:
<!-- m --><a class="postlink" href="http://Code.Sarkkan.de/JavaScript/FormCheck/Form.js">http://Code.Sarkkan.de/JavaScript/FormCheck/Form.js</a><!-- m -->
Check = {
// Startfunktion, wird evtl. für Nachfolgende Funktionen benötigt
Vergleich: new Array(),
Start: function(/*Name des 2.Passwort Feldes, Name des 1.*/){
for(var i = 0; i < document.getElementsByTagName("input").length; i++){
var Feld = document.getElementsByTagName("input")[i];
(Feld.title != "" && Feld.value == "") ? Feld.value = Feld.title : "";
switch(Feld.type){
case "password":
Feld.setAttribute("onblur", "Check.Prufer.Right(this, 1)", 1);
Check.Vergleich.push(Feld);
break;
case "submit":
Feld.setAttribute("onclick", "return Check.Send(this)", 1);
break;
default:
Feld.setAttribute("onblur", "Check.Prufer.Right(this)", 1);
Feld.setAttribute("onfocus", "Check.Prufer.Leer(this)", 1);
}
}
},
// Prüffunktionen
Prufer: {
Right: function(Element/*, 1 = Passwort überprüfen*/){
// Überprüft, ob das Element NULL oder == title ist
if(arguments[1] === 1){
Check.Prufer.Passwort(Element);
return true;
}
var Regex = /^[\w \@\.\-\_\ä\ü\ö\Ä\Ü\Ö]*$/;
if(!Check.Prufer.Leer(Element) && !Regex.test(Element.value)){
Check.Error(Element);
}
},
// Überprüft ob der Wert des Elementes NULL, oder wie der Titel lautet
// Gibt bei NULL/Title true, ansonsten False zurück
Leer: function(Element){
switch(Element.value){
case "":
Element.value = Element.title;
return true;
case Element.title:
Element.value = "";
return true;
default:
return false;
}
},
Passwort: function(Element){
if(Element.value != Check.Vergleich[0].value){
Check.Error(Element, 1);
return false;
}
},
All: function(){
var R = true;
for(var i = 0; i < document.getElementsByTagName("input").length; i++){
var Feld = document.getElementsByTagName("input")[i];
if(Feld.value == "" || Feld.getAttribute("defaultColor", 1) != null || Feld.value == Feld.title){
if(Feld.type == "password" && Feld.value == "") Check.Error(Feld);
else if(Feld.type == "password" && Feld.value != Check.Vergleich[0].value) Check.Error(Feld, 1);
else Check.Error(Feld);
R = false;
}
}
return R;
}
},
Error: function(Element){
Element.setAttribute("defaultColor", Element.style.color, 1);
Element.style.color = "red";
if(Element.type == "password"){
Element.setAttribute("defaultType", Element.type, 1);
Element.type = "text";
(arguments[1] == 1) ? Element.value = 'Fehlerhaft Wiederholt' : Element.value = 'Keine gueltige Eingabe!';
} else Element.value = 'Keine gueltige Eingabe! (' + Element.value + ')';
Element.setAttribute("onfocus", "Check.ResetError(this)", 1);
},
ResetError: function(Element){
Element.style.color = Element.getAttribute("defaultColor", 1);
Element.removeAttribute("defaultColor", 1);
Element.value = "";
if(Element.getAttribute("defaultType", 0) == "password") Element.type = "password";
Element.setAttribute("onfocus", "Check.Prufer.Leer(this)", 1);
},
Send: function(Element){
if(Check.Prufer.All()){
return true;
} else {
return false;
}
}
}Funktionsübersicht:
Check.Start()
Startet das Script. Gibt allen Inputfeldern die benötigen Event-Handler, setzt value,..
(Durch das automatisch eingebundene 'ContentLoaded.js' empfiehlt es sich die Funktion mit: ContentLoaded(window, Check.Start); aufzurufen.)
Check.Prufer.Right(Element, 1 = Passwort überprüfung)
Überprüft Element, ob die Eingabe Valide ist.
Wenn zusätzlich als 2. Parameter 1 übergeben wird, wird die Passwortüberprüfung(Check.Prufer.Passwort()) ausgeführt.
Check.Prufer.Leer(Element)
Überprüft Element, ob dessen 'value'-Attribut leer ist und führt ggf. Check.Error() aus.
Check.Prufer.Passwort(Element)
Überprüft, ob das 2.Passwortfeld den selben Inhalt hat, wie das erste.
Check.Prufer.All()
Überprüft jedes Inputfeld, ob diese valide sind und gibt erst dann das Formularfeld frei.
(Gibt im Fehlerfall false zurück, ansonsten true)
Check.Error(Element)
Verwandelt das Inputfeld in ein "Error-Feld". Hierbei wird dem Feld eine Rote Schrift, sowie den Wert "Keine gueltige Eingabe" gegeben.
Check.ResetError(Element)
Verwandelt das Inputfeld wieder in ein "normales-Feld". Hierbei wird die Standardschriftfarbe wieder hergestellt.
Check.Prufer.Send(Element)
Gibt zurück, ob das Formular absende bereit ist. Wird automatisch dem Submit-Button gegeben.
(Gibt im Fehlerfall false zurück, ansonsten true)
Benutzung des Script:
Gebt den Elementen, die eine Automatische Beschriftung erhalten sollen, ein 'title'-Attribute.
Nun müsst Ihr einfach nur das Script mit Check.Start() aufrufen.
Alles andere passiert vollautomatisch.
Außerdem war es keine neue Art, sondern eine für mich neue Schreibweise.
