BlackBoard | Programmieren | Javascript Prüfung

BlackBoard » Design, Programmierung & Entwicklung » Programmieren » Javascript Prüfung

» Hallo Gast [Anmelden|Registrieren]

Letzter Beitrag | Erster ungelesener Beitrag

Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen

Neues Thema erstellen

Antwort erstellen

Zum Ende der Seite springen

Javascript Prüfung

Autor

Beitrag

« Vorheriges Thema | Nächstes Thema »

Flux
Junior Member

Dabei seit: 24.08.2006
Beiträge: 169

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?

30.04.2008 09:26

phoenix
Moderator

Dabei seit: 22.08.2003
Beiträge: 1.157

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.

30.04.2008 09:41

Flux
Junior Member

Dabei seit: 24.08.2006
Beiträge: 169

Themenstarter

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.

30.04.2008 09:55

phoenix
Moderator

Dabei seit: 22.08.2003
Beiträge: 1.157

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';

30.04.2008 10:11

Flux
Junior Member

Dabei seit: 24.08.2006
Beiträge: 169

Themenstarter

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!

Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von Flux: 30.04.2008 11:03.

30.04.2008 10:57

phlox81

Bote des Lichts und Moderator

Dabei seit: 19.10.2002
Beiträge: 3.028
Herkunft: Irgendwo im Nirgendwo

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

__________________
Intelligenz ist eine Illusion des Menschen

phlox81.de | codenode.de

30.04.2008 11:06

Flux
Junior Member

Dabei seit: 24.08.2006
Beiträge: 169

Themenstarter

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>

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Flux: 30.04.2008 11:15.

30.04.2008 11:09

phoenix
Moderator

Dabei seit: 22.08.2003
Beiträge: 1.157

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

30.04.2008 11:27

Flux
Junior Member

Dabei seit: 24.08.2006
Beiträge: 169

Themenstarter

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

30.04.2008 14:34

phoenix
Moderator

Dabei seit: 22.08.2003
Beiträge: 1.157

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.

02.05.2008 19:32

Baumstruktur | Brettstruktur

Neues Thema erstellen

Antwort erstellen

BlackBoard » Design, Programmierung & Entwicklung » Programmieren » Javascript Prüfung

Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH