• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[JS] Function: split->array->for = einzeln abarbeiten

A

aJunkie

Mitglied
Hallo Forum,

die Syntax von PHP lässt sich zum Glück leicht auf JavaScript übertragen, aber bei einer kleinen Funktion hätte ich doch gerne Euren Rat, da mir zu viele Lösungsmöglichkeiten im Kopf schwirren.

Und zwar:
Ich habe eine <form> und dieses soll onSubmit eine Funktion aufrufen.
Dieser Funktion übergebe ich, mit Kommas voneinander getrennt, IDs der Inputfelder als ein String.
In der JS Funktion splitte ich den String nach dem Trennzeichen Komma und erhalte ein Array.

Je nachdem wie viele IDs ich der Funktion nun übergeben habe, sollen diese IDs der Inputfelder auf Inhalt geprüft werden, nämlich, dass die übergebenen IDs der jeweiligen Inputfelder nicht leer sein dürfen. Falls diese leer sind, soll ein alert stattfinden, das dem User sagt, dass er die Pflichtfelder doch bitte auszufüllen hat.

HTML:
HTML: 
<form action="" onSubmit="checkInput('input1,input2,input3');" method="post">
<input type="text" name="input1" id="input1" />
<input type="text" name="input2" id="input2" />
<input type="text" name="input3" id="input3" />
<!-- andere unwichtige inputfelder -->
</form>
JS:
Code: 
function checkInput(input)
{
    var input; // String: mehrere Wörter mit Komma als Trennzeichen
    var gesplittet = input.split(","); // String nach Trennzeichen splitten in ein Array
    
    for(gesplittet as einzeln) // je nachdem  wie viele keys ein Array hat - was hier zu tun?
    {
        // Beispiel: im Array enthalten: "input1"
        // schaue, ob "input1" leer ist, wenn ja, unterbrechen: alert("Nicht ausgefüllt!")
       // wenn alle übergebenen IDs ausgefüllt, Formular abschicken!
    }
}
Wie habe ich das zu realisieren?

Danke.
 
Zuletzt bearbeitet:
Werbung:
Ich war mal so frei und hab dir das geschrieben :)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Cheeeck</title>
        <script type="text/javascript">
            window.onload = function() {
                // Formular holen
                var formul = document.getElementById("formular");
                formul.onsubmit = checkInput;
            };
            
            var checkIds = ["input1","input2","input3"];
            function checkInput() {
                var errors = false;
                var checkAttr = {
                    "input" : "value",
                    "textarea" : "innerHTML",
                    "select" : "value"                    
                };
                
                for(var i=0; i < checkIds.length; i++) {
                    var inp = document.getElementById(checkIds[i]);
                    if(inp) {
                        var val = inp[checkAttr[inp.tagName.toLowerCase()]];
                        if (val == "") {
                            alert("Das Feld " + inp.id + " darf nicht leer sein");
                            errors = true;
                        }
                    }
                }
                if(errors) return false;
                
            }
        </script>
    </head>
    <body>
        <form action="" id="formular" method="post">
        <input type="text" name="input1" id="input1" />
        <input type="text" name="input2" id="input2" />
        <input type="text" name="input3" id="input3" />
        
        <input type="text" name="unwichtig" />
        <input type="submit" value="OK">
        </form>
    </body>
</html>

Ich habe auch mal den ganzen JS Teil aus dem HTML genommen. Ist "hübscher" so :D

Nebenbei. foreach Schleifen setzt du folgender Maßen um
Code: 
var array = ["bli","bla","blub"];
for(var teil in array) {
  alert(teil); // Gibt den index aus (0 oder 1 oder 2)
  alert(array[teil]); // entweder bli, bla oder blub
}
Bei assoziativen Array wäre der "Teil" der Key.
 
Vielen lieben Dank für deine Mühe.

Ich habe es etwas dynamischer geschrieben, um die Funktion in eine JS-Datei auszulagern und sie in mehrere Scripts leicht einsetzbar zu machen.

HTML: 
<form action="" method="post" id="formularID" onSubmit="checkInput('formularID','inputfelder,nochEinFeld,bla');">
//
</form>
Code: 
function checkInput(form,input)
{
        var formul = document.getElementById(form); // Formular holen
        var input; // String: mehrere Wörter mit Komma als Trennzeichen
           var IDs = input.split(","); // String nach Trennzeichen splitten in ein Array
        var errors = false;
        
                var checkAttr = {
                    "input" : "value",
                    "textarea" : "innerHTML",
                    "select" : "value"                    
                };
                
                for(var i=0; i < IDs.length; i++) {
                    var inp = document.getElementById(IDs[i]);
                    if(inp) {
                        var val = inp[checkAttr[inp.tagName.toLowerCase()]];
                        if (val == "") {
                            alert("Das Feld " + inp.id + " darf nicht leer sein!");
                            errors = true;
                        }
                }
// if(errors) return false; // Erstmal auskommentiert, damit alle Fehlermeldungen angezeigt werden.
            }
}
Ich hätte zwei Dinge noch gerne verbessert, nämlich, dass wenn ein Fehler auftritt, das Formular nicht abgeschickt wird. Wie beim "Abbrechen" klicken bei einem return confirm.
Ist das möglich?

Und könnte ich die Fehlermeldungen zunächst in eine Variable speichern, damit nur ein Alert mit allen Fehlermeldungen auftaucht? Bestimmt! :D
Code: 
function checkInput(form,input)
{
        var formul = document.getElementById(form); // Formular holen
        var input; // String: mehrere Wörter mit Komma als Trennzeichen
           var IDs = input.split(","); // String nach Trennzeichen splitten in ein Array
        var errors = false;
        
                var checkAttr = {
                    "input" : "value",
                    "textarea" : "innerHTML",
                    "select" : "value"                    
                };
                
                for(var i=0; i < IDs.length; i++) {
                    var inp = document.getElementById(IDs[i]);
                    if(inp) {
                        var val = inp[checkAttr[inp.tagName.toLowerCase()]];
                        if (val == "") {
                            
                            //inputfelder in ein array packen vielleicht? und am ende ausgeben
                            
                            //alert("Das Feld " + inp.id + " darf nicht leer sein!");
                            errors = true;
                        }
                }
               if(errors) alert("Folgende Felder müssen ausgefüllt werden:\n"+varioak);
            }
}

EDIT:
Scheinbar brauche ich auch kein Formular zu holen oder? Ich übergebe nur die nötigen IDs. Aus welchem Formular sie kommen, scheinen bei mir zumindest egal zu sein. Die Variable wird im weiteren Verlauf gar nicht genutzt.
 
Zuletzt bearbeitet:
Werbung:
Zu deinem Problem dass das Formular abgesendet wird. Dafür ist die "if(errors)" Geschichte da gewesen :D
Das return false bezweckt, dass nicht mit dem ursprünglichen Vorhaben (submit) weiter gemacht wird, sondenr abgebrochen wird.

So sollte dein Script ok sein:
Code: 
function checkInput(form,input)
{
        var formul = document.getElementById(form); // Formular holen
        var errorMessage = "Folgende Felder dürfen nicht leer sein: ";
        var firstError = true;
        var IDs = input.split(","); // String nach Trennzeichen splitten in ein Array
        var errors = false;
        
                var checkAttr = {
                    "input" : "value",
                    "textarea" : "innerHTML",
                    "select" : "value"                    
                };
                
                for(var i=0; i < IDs.length; i++) {
                    var inp = document.getElementById(IDs[i]);
                    if(inp) {
                        var val = inp[checkAttr[inp.tagName.toLowerCase()]];
                        if (val == "") {
                            errorMessage += (firstError) ? inp.id : ","+inp.id;
                            if(firstError) firstError = false;
                            errors = true;
                        }
                }
               if(errors) { alert(errorMessage); return false;}
               }
            }
}
 
Super! Danke!

Das return:false; habe ich rausgenommen, weil es nicht funktioniert hat. Und das tut es jetzt auch wieder nicht. Das Formular wird dennoch abgeschickt. Oben war eine Klammer zu viel, die ich entfernt habe.
Wenn ich
Code: 
var formul = document.getElementById(form); // Formular holen
auskommentiere, funktioniert alles noch und die Variable formul findet nirgendswo sonst noch seine Verwendung. Kann ich daher darauf verzichten?
 
Das return false funktioniert, es muss natürlich dem Eventhandler auch mitgeteilt werden, dass ein return false kommen kann.

Auf die IDs würde ich verzichten, da Formularelemente bereits einen Namen haben und diese hier spezifischer sind .

DerInhalt einer Textarea wird auch mit .value ermittelt.
 
Werbung:
und hier mal ein Code, der auch mit mehreren Formularen in einem Dokument und auch mit Auswahlfeldern zu recht kommt.

So sieht der JS Code aus:
Code: 
function FormCheck(elements) {
	function checkElement(el) {
		var t = el.type.toLowerCase();
		if(t == 'text' || t == 'textarea') return el.value;
		else if(t.indexOf('select') > -1) return el.options[el.selectedIndex].value;
		return null;
	}
	
	var c = check[this.name];
	var ret = true;
	for(var i = 0; i < c.length; i++) {
		if(this.elements[c[i]] && !checkElement(this.elements[c[i]])) {
			alert(c[i] + ' ausfüllen!');
			ret = false;
		}
	}
	return ret;
}
FormCheck.ini = function() {
	var forms = document.forms;
	if(!forms) return;
	for(var i = 0; i < forms.length; i++) {
		var form = forms[i];
		if(check[form.name]) form.onsubmit = FormCheck;
	}
};

Der Code auf der HTML Seite, dann so:
HTML: 
<script type="text/javascript">
window.onload = FormCheck.ini;

var check = {
Formular: ['text1', 'auswahl'],
einAnderesFormular: ['text2', 'auswahl'],
};
</script>
<form action="#" name="Formular">
<input name="text1">
<input name="text2">
<select name="auswahl">
<option value="">----</option>
<option value="wert1">wert1</option>
<option value="wert2">wert2</option>
<option value="wert3">wert3</option>
</select>
<input type="submit" value="und ab ...">
</form>

<form action="#" name="einAnderesFormular">
<input name="text1">
<input name="text2">
<select name="auswahl">
<option value="">----</option>
<option value="wert1">wert1</option>
<option value="wert2">wert2</option>
<option value="wert3">wert3</option>
</select>
<input type="submit" value="und ab ..." >
</form>
 
Ahh. :D Stimmt.
HTML: 
<form action="" method="post" onSubmit="return checkInput('bla');">

Auf die IDs möchte ich nicht verzichten, da jedes Inputfeld von einem <label> umgeben ist. Ich werde zusehen, wie ich den Inhalt vom <label> dann oben in der Funktion als Parameter nutzen kann.

Danke für Eure Hilfe.
 
Eine kleine Sache noch? :oops:

An diesem Beispiel:
HTML: 
<form action="" method="post" onSubmit="return checkInput('')">
<label for="input1">NAME</label>
<input type="text" name="input1" id="input1" />

<label for="adresse">ADRESSE</label>
<input type="text" name="adresse" id="adresse" />

<input type="submit" value="Abschicken!" />
</form>
JS:
Code: 
function checkInput(input)
{
        var errorMessage = "Folgende Felder dürfen nicht leer sein: \n";
        var firstError = true;
        var errors = false;
        var input; // String mit mehrere IDs mit Komma als Trennzeichen
           var IDs = input.split(","); // String nach Trennzeichen in ein Array splitten
        
                var checkAttr = {
                    "input" : "value",
                    "textarea" : "innerHTML",
                    "select" : "value"                    
                };

        for(var i=0; i < IDs.length; i++) {
            var inp = document.getElementById(IDs[i]);
                if(inp) {
                    var val = inp[checkAttr[inp.tagName.toLowerCase()]];
                        if (val == "") {
                            errorMessage += (firstError) ? inp.id : ", "+inp.id;
                            if(firstError) firstError = false;
                            errors = true;
                        }
                }
        }   
        if(errors) {alert(errorMessage); return false;}        
}
Es klappt alles wunderbar.
Ein schönes Feature allerdings wäre folgendes:

Wenn ein Pflichtfeld nicht ausgefüllt wird, gibt es ein alert - allerdings mit dem tagname bzw. der ID des Feldes. Schön und gut, aber es würde einfach besser aussehen, wenn statt der ID das Wort im <label>-Tag zum dazugehörigen Inputfeld ausgegeben werden würde. So würde der User gleich sehen, welches Feld gemeint ist.

Also wenn, zum Beispiel, das Feld mit der ID "input1" leer ist, soll nicht das ausgegeben werden, sondern das, was im dazugehörigen <label>-Tag steht. In dem Falle "NAME".
Die Ausgabe im alert wäre:
Folgende Felder dürfen nicht leer sein:
NAME

Über document.getElementbyID komme ich ja nur zum Inhalt des Inputfeldes, nicht des label Tags.

Wäre sehr dankbar. =)

PS: Meine Versuche scheitern bisher mit einem leeren Alert.
 
Werbung:
Die Inputelemente sollten besser innerhalb von dem Label stehen, dadurch sparst du dir die unnötige ID und der Text wird dadurch anklickbar, was die Nutzerfreundlichkeit verbessert, vor allem bei Radio- und Checkboxen.

Du hast vermutlich mein Codebeispiel auf der ersten Seite übersehen, ich hab es nochmal an deine Vorgaben angepaßt und eine entsprechende Markierung eingebaut.

HTML: 
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Formcheck </title>

<style type="text/css">
form .pflicht {
	background-color:yellow;
}
form .error {
	background-color:red;
}
</style>
<script type="text/javascript">
function removeClass(obj, name) {
	var reg = new RegExp('\\b' + name + '\\b', 'i');
	obj.className = obj.className.replace(reg, '');
}
function addClass(obj, name) {
	var reg = new RegExp('\\b' + name + '\\b', 'i');
	if(!reg.test(obj.className)) obj.className += ' ' + name;
}

function checkField(f) {
	if(f) {
		removeClass(f, 'error');
		var val = f.value ? f.value :
		 f.options ? f.options[f.selectedIndex].value
		: null;
		if(val) return f;
		addClass(f, 'error');
	}
	return null;
}

function FormCheck() {
	if(!FormCheck.check) return;
	var check = FormCheck.check[this.name];
	var ret = true;
	var msg = [];
	for(var i = 0; i < check.length; i++) {
		var elem = this.elements[check[i]];
		
		if(!checkField(elem)) {
			msg.push(elem.name);
			ret = false;
		}
	}
	if(msg.length) alert('Achtung!\n\nDu hast vergessen folgende Felder auszufüllen:\n' + msg.join('\n'));
	return ret;
}
FormCheck.check = null;
FormCheck.ini = function() {
	var forms = document.forms;
	if(!forms) return;
	
	for(var i = 0; i < forms.length; i++) {
		var form = forms[i];
		var check = FormCheck.check[form.name];
		if(check) {
			form.onsubmit = FormCheck;

			// Pflichfelder markieren
			for(var j = 0; j < check.length; j++) 
			form[check[j]].className += ' pflicht';
		}
	}
};


</script>

<body>

<h3>Beispiel</h3>

<script type="text/javascript">
window.onload = FormCheck.ini;

FormCheck.check = {
	Formular: ['text1', 'auswahl', 'area'],
	einAnderesFormular: ['text2', 'auswahl'],
};
</script>
<form action="#" name="Formular">
<input name="text1">
<input name="text2">
<select name="auswahl">
<option value="">----</option>
<option value="wert1">wert1</option>
<option value="wert2">wert2</option>
<option value="wert3">wert3</option>
</select>
<textarea name="area"></textarea>
<input type="submit" value="und ab ...">
</form>

<form action="#" name="einAnderesFormular">
<label>Text1: <input name="text1"></label>
<label>Text2: <input name="text2"></label>

<select name="auswahl">
<option value="">----</option>
<option value="wert1">wert1</option>
<option value="wert2">wert2</option>
<option value="wert3">wert3</option>
</select>

<input type="submit" value="und ab ..." >
</form>



</body>
</html>
 
Ich habe es gesehen, aber dann müsste ich die header Datei neu schreiben. Die wird eben in jedes Template includet.
Danach kommt der Inhalt.
<script type="text/javascript"> gehört ja eigentlich in den <head> Bereich. :-/
Das ist das Einzige, was mich semantisch und optisch stört.

Vielleicht hast du noch eine Idee?
Sonst werde ich das Templatesystem umschreiben müssen.

Danke dir.

Edit: Es sei denn, ich schaue mir heute Abend deine markierten Stellen genauer an. :D Danke.
 
Zuletzt bearbeitet:
Der Script Teil kann durchaus in den Header verschoben werden (was aber egal ist, script darf sowohl dort als auch im body stehen)

EDIT: ... und der beste Platz für ein Skript ist vor dem schliessendem Bodytag.
 
Werbung:
Das meine ich ja. Das macht mir Umstände, dass der Script Teil eigentlich oben hingehört.
Deswegen wollte ich es über ein einfaches onSubmit="return funktion" machen.
Heute Abend habe ich wieder Zeit dafür.
 
aJunkie schrieb:
Das meine ich ja. Das macht mir Umstände, dass der Script Teil eigentlich oben hingehört.
Zum Vergrößern anklicken....
Das meinte ich aber nicht. Dem Skript von mir ist es egal ob es im head oder body oder extern steht. Und wie gesagt, eigentlich gehören Skripte vor dem </body> Tag

EDIT: Das Skript fügt automatisch das onsubmit Event dem Formular hinzu
 
Ach so, vielleicht verstehst du das ja nicht, du musst die Variabel
Code: 
FormCheck.check = {
	Formular: ['text1', 'auswahl', 'area'],
	einAnderesFormular: ['text2', 'auswahl']
};
Für dein Formular entsprechend befüllen. Also nach diesem Schema:
Code: 
FormCheck.check = {
	Name_des_Formular: ['element1', 'element2', 'element3'],
	einAnderesFormular: ['element1', 'element2']
};
element1..3 sind die Namen der Elemente im Formular
 
Werbung:
So, tut mir leid für die Verspätung. Ich habe deinen Script jetzt eingefügt. Ein paar kleine Sachen werde ich noch ändern müssen, aber könntest du mir einen Tipp geben, wie ich statt den Namen des Elemetes auszugeben dann doch das zwischen <label> ausgeben kann?

HTML: 
<label for="einfeld">Dein Name</label>
<input type="text" id="einfeld" />
"Dein Name" sollte dann alertet werden, nicht "einfeld".
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben