frage zu einem script / genauer ablauf
Kleine
- java
hallo ihr alle,
ich habe im web ein script zur formularüberprüfung gefunden, jedoch würde ich gerne genau wissen, wie das teil abläuft und es erst dann einsetzen.
könnt ihr mir bei der erklärung helfen, was die einzelnen abschnitte und funktionen vornehmen?
einige habe ich bereits kommentiert. hoffe, dass ich diese ausschnitte richtig verstanden habe, jedoch fehlen mir die details.
<script type="text/javascript">
window.onload = init; // Funktion init wird beim oeffnen des Fensters ausgefuehrt
var validationConfig = [
{ref:'description',datamask:/^[a-zA-Z-]+(\s[a-zA-Z-]+)*$/,msg:'Das Feld Beschreibung darf nur Buchstaben enthalten'},
] //regexp der verschiedenen Felder
function init() {
if (!document.getElementById || !document.getElementsByTagName || !document.createElement || !document.createTextNode) {
alert('You need a new browser!');
return;
}
document.getElementsByTagName('form')[0].onsubmit = function(){return validateForm();};
}
function validateForm() {
var container,errorMsg,el,ol,anchor;
var errorCount = 0;
container = document.getElementById('container');
// Fehlermeldung zur?cksetzen
if (document.getElementById('error-message')) {
container.removeChild(document.getElementById('error-message'));
var ps = document.getElementsByTagName('div');
for (i = 0;i < ps.length;i++) {
if (ps[i].className == 'error')
ps[i].className = '';
}
}
// bewerten und Meldung kreieren
errorMsg = newEl('div',{id:'error-message'});
el = newEl('h3');
el.appendChild(newEl('a',{id:'error-name',name:'error-name',href:'#'},'Bitte korrigieren Sie folgende Fehler:'));
errorMsg.appendChild(el);
ol = newEl('ol');
for (var i in validationConfig)
{
var obj = document.getElementById(validationConfig[i].ref)
var val = obj.value.match(validationConfig[i].datamask);
if (val == null) {
el = newEl('li');
anchor = newEl('a',{href:'#'+validationConfig[i].ref},validationConfig[i].msg);
anchor.onclick = function(){document.getElementById(this.href.split('#')[1]).focus();return false;};
el.appendChild(anchor);
ol.appendChild(el);
if (document.getElementById(validationConfig[i].ref))
document.getElementById(validationConfig[i].ref).parentNode.className = 'error';
errorCount++;
}
}
if (errorCount > 0){
errorMsg.appendChild(ol)
container.insertBefore(errorMsg,container.getElementsByTagName('form')[0]);
document.getElementById('error-name').focus();
return false;
} else {
return true;
}
}
function newEl(name,atts,txt) {
var e = document.createElement(name);
if (atts != null && atts != 'undefined') {
for (var i in atts) {
e.setAttribute(i,atts[i]);
}
}
if (typeof txt == 'string') {
e.appendChild(document.createTextNode(txt));
}
return e;
}
</script>
freue mich über jeden kleinen hinweis zum ablauf dieses scripts.
danke :)
kleine
Hallo,
Beim Laden der Seite wird die Funktion init ausgeführt:
window.onload = init;
In dieser wird geprüft, ob der Browser alles "kann" , was es für die Formularüberprüfung so braucht:
if (!document.getElementById || !document.getElementsByTagName || !document.createElement || !document.createTextNode) {
alert('You need a new browser!');
return;
}
Desweiteren wird dafür gesorgt, dass beim Absenden des Forumulars die Funktion "validateForum" aufgerufen wird:
document.getElementsByTagName('form')[0].onsubmit = function(){return validateForm();};
Die Funktion "validateForm" ist eigentlich schon gut dokumentiert und verär daher ganz gut was sie macht:
Sie setzt evtl. vorhandene Fehlermeldungen zurück (entfernt die DIV-Container, in denen der Fehler angezeigt wird).
Sie holt sich aus dem Objekt "validationObject" die Konfigurationen für die Forumlarfelder, die geprüft werden sollen. Eine Konfiguration besteht aus:
* der ID des zu prüfenden Elementes ("ref")
* einem regulären Ausdruck, der auf das Feld passen mus ("datamask")
* einer Fehlermeldung, die ausgegeben wird, falls der reguläre
Ausdruck nicht passt ("msg").
Wenn ein Feld nicht korrekt ist (also der reg. ausdruck in "datamask" nicht matcht), wird in eine Liste aus Fehlermeldungen ein neues Element eingefügt, welches bei Klick direkt auf das fehlerhafte Element führt
(per Anker-Link).
Die Funktion "newEl" schliesslich ist lediglich eine Hilfsfunktion, die neue DOM-Objekte erzeugt.
Hope that helps,
Jörg