Frage zu einer einfachen Formularvalidierung mit JavaScript

S

starbug

Erfahrenes Mitglied
Hallo allerseits,

bin ganz neu hier weil ich mich im Moment ein wenig mit JavaScript beschäftige. Ich habe mir mal eine kleine Aufgabe gesucht in der es darum geht ein ganz einfaches Formular zu überprüfen. Man gibt einen Namen in ein Textfeld und wenn das Textfeld leer ist dann sol dahinter in roter Schrift stehen "Bitte Namen angeben". Hab das auch alles gemacht aber es ****t nicht. Vielleicht kann mir einer sagen wo der Fehler liegt. Hier mal mein Code:

XHTML:
HTML: 
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Aufgabe</title>
<link rel="stylesheet" type="text/css" href="Klausuraufgabe.css" />
</head>
<body>
<script type="text/javascript" src="Klausuraufgabe.js"></script>
<form action="#"  method="post">
	<label id="name">Name</label>
    <input type="text" id="eingabe" size="20" />
    <span id="fehlerName"></span> <br />
    <input type="button" id="pruefe" onclick="check()"  value="Prüfen" />
    <input type="button" id="zurück" value="Zurücksetzen" />
 </form>
 </body>
 </html>

Code: 
JavaScript:

function check()
{
	var eingabe = document.getElementById("eingabe");
	
	
	if(eingabe == "")
	{
		document.getElementById("fehlerName").className = "falscherName";
		document.getElementById("fehlerName").innerHTML = "Bitte geben sie einen Namen ein";
		return false;
	}
	
	
	
	
}

CSS:
Code: 
.falscherName{color:red;}
 
Du willst ja den Inhalt des Textfeldes und nicht das DOM Objekt selbst prüfen also muss die Zeile lauten

Javascript: 
var eingabe = document.getElementById("eingabe").value;
 
So ich hätte da noch ein Validierungsproblem. Es gibt ein Einnahmefeld ein Ausgabefeld und ein Feld indem die Differenz angezeigt wird. Leider lässt sich bei mir überhaupt nix berechnen und ich wüsste gerne wieso. Vielleicht kann mir jemand weiterhelfen? Hier mal mein JavaScript Code:
Code: 
	var x = 0;
	var y = 0;	

function berechne()
{
	
	
	var einnahmen = document.getElementById("einnahme");
	var ausgabe = document.getElementById("ausgabe");
	var diff = document.getElementById("diff");
	
	x = parseInt(einnahmen.value);
	y = parseInt(ausgabe.value);
	
	diff.value = x-y;
	
}
 
Funktioniert bei mir ohne Probleme. Ich nehme an du hast dich irgendwo bei den IDs vertippt.

HTML: 
<!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" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Differenz</title>
</head>

<body>
	<div>
		<p><input id="einnahme" /> - <input id="ausgabe" /> <input type="button" onclick="berechne();"  value="=" /></p>
		<p><input id="diff" /></p>
	</div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		var x = 0;
		var y = 0;
		
		function berechne() {
			var einnahmen = document.getElementById("einnahme");
			var ausgabe = document.getElementById("ausgabe");
			var diff = document.getElementById("diff");
	
			x = parseInt(einnahmen.value);
			y = parseInt(ausgabe.value);
	
			diff.value = x-y;
		}
	/* ]]> */
	</script>
</body>

</html>
 
Hmm komisch ich hab die id's eigentlich nachgeguckt. Hier ist mal mein HTML-Teil, vielleicht siehste da was was ich nicht sehe :-).

HTML: 
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Rechner</title>
<link rel="stylesheet" type="text/css" href="rechner.css" />
</head>
<body>
<script type="text/javascript" src="rechner.js"></script>
<form action="#" method="post">
Einnahmen <input type="text" id="einnahme" size="20" /><span id="message1" class="message"></span> <br />
Ausgaben <input type="text" id="ausgabe" size="20" /> <span id="message2" class="message"></span> <br />
Differenz<input type="text" id="diff" size="20" />
<input type="button" id="berechne" onclick="berechne()" value="Berechnen" />
</form>
</body>
</html>
 
Die Fehlerkonsole (mit der du dich dringend bekannt machen solltest) sagt

Error: berechne is not a function
Zum Vergrößern anklicken....

Das liegt daran, dass du bereits ein Formular Element mit dieser ID hast und deshalb eine globale Variable mit diesem Namen existiert. Nenne das Element und die Funktion nicht gleich.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück