BlackBoard | Druckvorschau: Javascript Prüfung

Geschrieben von Flux am 30.04.2008 um 09:26:

Javascript Prüfung

Hi,

Ich möchte ein Formular bzw. dessen Textfelder mit Javascript auf richtigkeit überprüfen. Wie ich das mache weiss ich. Was ich jedoch nicht weiss, ist wie ich es machen kann, dass dann je nach Fehler eine Fehlermeldung erscheint. soll heissen mir "alert" weiss ich wie ausgeben. aber ich möchte einfach nur normalen text ausgeben.

dann möchte ich noch, dass das alle textfelder, die einen fehler enthalten eine andere classe oder z.B. einfach zwingend (den css-style ignorierend) einen roten hintergrund erhalten.

weiss jmd wie ich so etwas mache?

Geschrieben von phoenix am 30.04.2008 um 09:41:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

<script language="JavaScript">
function pruefen() {
  if (document.forms[0].elements[0].value == "") {
    alert("Fehlermeldung für Element1");
    document.forms[0].elements[0].focus();
    return false;
  }
  if (document.forms[0].elements[1].value == "") {
    alert("Fehlermeldung für Element2");
    document.forms[0].element[1].focus();
    return false;
  }
}

</script>

Kleine Erklärung:

"forms[0]" spricht das erste Formular auf der Seite an. "forms[1]" das Zweite usw...

"elemtents[0]" spricht das erste Element im Form an, "elemtents[1]" das Zweite usw..

"focus" setzt den Cursor nach Fehlermeldung gleich in das Element, z. B. dem Eingabefeld.

Wenn du Elemente in einem Form besitzt die nicht überprüft werden sollen, danach aber ein Element hast welches wieder überprüft werden soll, musst du diese Element trotzdem noch mitzählen.

Geschrieben von Flux am 30.04.2008 um 09:55:

vielen dank! das ist schonmal ne grosse hilfe!

nun möchte ich aber nicht, dass die fehlermeldung per alert ausgeht sondern per normalen html-text.

Geschrieben von phoenix am 30.04.2008 um 10:11:

Sollte eigendlich so funktionieren:

Label Anlegen worin der Text ausgegeben werden soll.

code:
1:	<label id="testlable" title="testlable">Testtext</label>

Dann statt dem "alert" dies einbinden.

code:
1:	document.getElementById('testlabel').innerHTML = 'neuerTesttext';

Bin mir nicht sicher ob es funktioniert, kannst es ja mal testen und sagen ob es geht.

Einfärben mit JavaScript sollte so gehen...

code:
1:	deinelement.style.backgroundColor = '#fff';

Geschrieben von Flux am 30.04.2008 um 10:57:

hi,

vielen dank! ausser dem einfärben funktioniert soweit alles einwandfrei! (nun funktioniert alles perfekt! siehe edit unten)

habs noch ein bischen abgeändert, ich gebe jeweils den formnamen und den textfeldnamen an anstatt durchzuzählen:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<script type="text/javascript">
function check(){
	if(document.form.textfeld1.value == "") {
		document.form.textfeld1.focus();
		document.getElementById('errorlabel').innerHTML = 'fehler';
		document.form.textfeld1.style.backgroundColor = '#fff';
		return false;
	}
}
</script>

und die Form:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

<form name="form" action="form.html" method="post" onsubmit="return check()">
 
  <input type="text" name="textfeld1" id="textfeld1" />
  
  <input type="text" name="textfeld2" id="textfeld2" />
 
  <input type="text" name="textfeld3" id="textfeld3" />
 
<input type="submit" value="Senden" />

</form>

document.form.textfeld1.style.backgroundColor = '#fff'; müsste eigentlich stimmen oder?

EDIT: funktioniert! musste nur #fff durch #FF0000 ersetzen. vielen dank!

Geschrieben von phlox81 am 30.04.2008 um 11:06:

Ich weiss das Ruby on Rails genau das macht, was du da vorhast. (Wobei die Überprüfung da evtl. auch serverseitig noch stattfindet.)
Evtl. schaust du dir das mal an.

Und das du serverseitig noch mal prüfen solltest, ist dir ja bewusst

Geschrieben von Flux am 30.04.2008 um 11:09:

Zitat:

Original von phlox81
das du serverseitig noch mal prüfen solltest, ist dir ja bewusst

natürlich

danke.

nun hab ich bloss noch das problem, dass das feld rot bleibt, auch wenn der inhalt korrigiert und dann nach dem 2ten mal senden richtig ist. ich müsste irgendwie eine funktion machen, indem er vor der prüfung wieder den hintergrund aller felder auf weiss bzw. nichts setzt.

EDIT: folgendermassen gelöst:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:

<script type="text/javascript">
function check(){
document.form.textfeld1.style.backgroundColor = '';
document.form.textfeld2.style.backgroundColor = '';
document.form.textfeld3.style.backgroundColor = '';
	if(document.form.textfeld1.value == "") {
		document.form.textfeld1.focus();
		document.getElementById('errorlabel').innerHTML = '<?php echo "ERROR! Textfeld 1 ist leer.!"; ?>';
		document.form.textfeld1.style.backgroundColor = '#FF0000';
		return false;
	}
	if(document.form.textfeld2.value == "") {
		document.form.textfeld2.focus();
		document.getElementById('errorlabel').innerHTML = '<?php echo "ERROR! Textfeld 2 ist leer.!"; ?>';
		document.form.textfeld2.style.backgroundColor = '#FF0000';
		return false;
	}
	if(document.form.textfeld3.value == "") {
		document.form.textfeld3.focus();
		document.getElementById('errorlabel').innerHTML = '<?php echo "ERROR! Textfeld 3 ist leer.!"; ?>';
		document.form.textfeld3.style.backgroundColor = '#FF0000';
		return false;
	}
}
</script>

Geschrieben von phoenix am 30.04.2008 um 11:27:

Zitat:

Original von Flux
folgendermassen gelöst

Dies hätte ich dir auch vorgeschlagen. Das mit dem "#fff" sollte nur als Beispiel dienen hätte auch "#xxx" schreiben können, wollte aber lieber einen validen Farbcode verwenden.

Dann ist ja nun soweit alles gelöst. Wenn weitere Fragen aufkommen können wir ja bestimmt weiterhelfen.

greets

Geschrieben von Flux am 30.04.2008 um 14:34:

jap

danke,

könnte man das ganze evtl etwas vereinfachen, dass man nur noch eine "if" abfrage in der check() funktion hat? so müsste man z.B. für ein formular mit 30 feldern 30 "if" abfragen machen, was informationstechnisch nicht allzu elegant sein dürfte

Geschrieben von phoenix am 02.05.2008 um 19:32:

Man könnte das ganze noch in eine For-Schleife einbauen. Würe ungefähr so aussehen:

code:

1:
2:
3:
4:
5:
6:
7:

for (var i = 0; i <= 30; i++)

if(document.form.textfeld[i].value == "") {
		document.getElementById('errorlabel' + i).innerHTML = '<?php echo "ERROR! Textfeld " +  i +  " ist leer.!"; ?>';
		document.form.textfeld[i].style.backgroundColor = '#FF0000';
		return false;
}

Die If-Abfrage würde dann 30 mal durchlaufen werden und jedes durchnummerierte Element prüfen.