JavaScript Baruche (schon wieder) Hilfe -.-

hahny · 15. Mai 2009

Ich brache hilfe bei JavaScript ich möchte noch zusätzlich die Klassen und Kurse überprüfen lassen, dort sollen nur Zahlen und die Buchstaben von a-d stehen dürfen.
Ich habe außerdem kein Plan wie die zähler genau funktionieren. Danke schon einmal im vorraus

Code:

<html>
 <head>
  <title>Rechnerbetreuung</title>

<style type="text/css">
 <!--
 legend {color:#FFFFFF;}
 //-->
</style>
<SCRIPT LANGUAGE="JavaScript1.3">
<!--

function pruefe_Namen()
{
  var Zeichen, Eingabe, zaehler1, zaehler2, zeichen, laenge;
  Zeichen="aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZäÄöÖüÜß- ";
  for (zaehler1=0; zaehler1<3; zaehler1++)
  {
   Eingabe=window.document.Rb.elements[zaehler1].value;
   laenge=Eingabe.lenght;

   for (zaehler2=1; zaehler2<laenge; zaehler2++);
   {
    zeichen=Eingabe.charAt(zaehler2);
    if (Zeichen.indexOf (zeichen)==-1)
    {
     alert ("Unerlaubte(s) Zeichen im Namen!");
     window.document.Rb.elements[zaehler1].value="";
     window.document.Rb.elements[zaehler1].focus();
     return false;
    }
   }
  }
}
-->
</SCRIPT>
 </head>
   <body bgcolor="#0000FF">
    <form name=Rb>
    <fieldset>
     <legend>Absender</legend>
      <table border="0" cellpadding="1">
       <tr>
         <td align="center">Nachname</td>
         <td align="right"><input type="text" name="Nachname" size="20"></input></td>
       </tr>
       <tr>
         <td align="center">Vorname</td>
         <td align="right"><input type="text" name="Vorname" size="25"></input></td>
       </tr>
       <tr>
         <td align="center">Klasse/Kurs</td>
         <td align="right"><input type="text" name="Klasse/Kurs" size="5"></input></td>
       </tr>
       <tr>
         <td align="center">Email</td>
         <td align="right"><input type="text" name="Email" size="30"></input></td>
       </tr>
      </table>
    </fieldset>
    <fieldset>
     <legend>Rechner</legend>
      <table border="0">
       <tr>
         <td align="left">Rechnerraum:</td>
         <td align="right"><input type="text" name="Rechnerraum:" size="5"></input></td>
         <td align="left">Datum:</td>
         <td align="right"><input type="text" name="Datum:" size="10"></input></td>
       </tr>
       <tr>
         <td align="left">Rechner-Nr.:</td>
         <td align="right"><input type="text" name="Rechner-Nr.:" size="5"></input></td>
         <td align="left">Uhrzeit</td>
         <td align="right"><input type="text" name="Uhrzeit:" size="10"></input></td>
       </tr>
      </table>
       Fehler-/Problembeschreibung <br>
       <textarea name="Fehler-/Problembeschreibung:" rows="10" cols="40"></textarea>
    </fieldset>
    <fieldset>
     <legend>Formular ...</legend>
      <input type="submit" value=" Absenden" onClick="return pruefe_Namen()"></input>       
      <input type="reset" value="Abbrechen"></input>
    </fieldset>
    </form>
   </body>
</html>

User007 · 15. Mai 2009

Also,...

echt aussagefähiger Titel, den du da gewählt hast!!! Du hast doch schonmal was geschrieben, dann solltest du doch wissen, wie's läuft, oder?
Formulareingaben ausschl. durch JS überprüfen zu lassen, ist nicht so sinnig - denk mal an Browser mit deaktiviertem JS!
ersetz mal die (nicht mehr zeitgemäße) JS-Sprach-/Versionsangabe durch folgende Typangabe
Code:
```
...type="text/javascript"
```
orientier dich doch an der Prüffunktion für die Namen - in der Variable 'Zeichen' sind die erlaubten Zeichen definiert. Brauchste doch nur kopieren und dann auf deine Bedürfnisse anpassen.
hahny schrieb:

Ich habe außerdem kein Plan wie die zähler genau funktionieren.

Zum Vergrößern anklicken....

Wie wär's, wenn du dich damit etwas beschäftigen würdest? Das sind ganz simple for-Schleifen bzw. 'ne if-Abfrage - guckst du hier oder hier!

Scheppat · 15. Mai 2009

Das läßt sich mit regulären Ausdrücken eleganter lösen.

So, wie in deinem Beispiel, kann es nicht funktionieren.

Erstens muss die Funktion pruefe_Namen() nicht durch einen onClick-Event-Handler beim Submit-Button, sondern durch einen onSubmit-Event-Handler direkt beim form selbst aufgerufen werden.

Zweitens durchläufst du die Elemente des Formular über ihre Indizes. Dabei werden allerdings die fieldset ebenfalls als Element mitgezählt. Dadurch wird beim ersten Durchlauf der Schleife (zaehler1 = 0) in der Zeile

Code:

   Eingabe=window.document.Rb.elements[zaehler1].value;

versucht, den Wert des fieldset zu bestimmen. Das führt zu einem JavaScript-Laufzeitfehler.

Außerdem muss es in der darauf folgenden Zeile

Code:

   laenge=Eingabe.length;

heißen.

Ich würde mir die innere der beiden Schleifen sowieso sparen und die Prüfung stattdessen mit regulären Ausdrucken umsetzen. Der Einstieg in reguläre Ausdrücke ist zwar relativ schwierig, aber es lohnt sich auf Dauer (siehe z. B. bei SELFHMTL).

Außerdem würde ich noch die folgenden Korrekturen/Verbesserungen durchführen:

Elemente eines Formulars wenn möglich über ihren Namen (und nicht über ihren Index) ansprechen.
Für die Namen keine Sonderzeichen benutzen. Einige Sonderzeichen sind zwar prinzipiell erlaubt, aber ich würde trotzdem immer nur Buchstaben, Zahlen und den Unterstrich verwenden.
Das Element form braucht unbedingt ein Attribut action.
Für die Beschriftung von Eingabeelementen gibt es das Element label.
Bei einem input sollte man immer das Attribut value angeben (auch wenn es leer bleibt).

Dabei kommt dann ungefähr folgendes heraus.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rechnerbetreuung</title>
<style type="text/css">
	body {background-color:#0000FF}
	fieldset {width:350px}
	legend {color:#FFFFFF}
</style>
<script type="text/javascript">
<!--

var pruefung = new Array();
pruefung.push(["nachname"   , /^[a-zA-ZäöüÄÖÜ -]*$/, "im Nachnamen"  ]);
pruefung.push(["vorname"    , /^[a-zA-ZäöüÄÖÜ -]*$/, "im Vornamen"   ]);
pruefung.push(["klasse_kurs", /^[a-d\d]*$/         , "in Klasse/Kurs"]);

function pruefe_namen() {
	for (var i = 0; i < pruefung.length; i ++) {
		var e = document.rb.elements[pruefung[i][0]];
		if (!e.value.match(pruefung[i][1])) {
			alert("Unerlaubte(s) Zeichen " + pruefung[i][2] + "!");
			e.value = "";
			e.focus();
			return false;
		}
	}
	return true;
}

-->
</script>
</head>
<body>
<form action="cb.html" name="rb" onsubmit="return pruefe_namen();">
	<fieldset>
		<legend>Absender</legend>
		<table summary="">
			<tr>
				<td><label for="nn">Nachname:</label></td>
				<td><input id="nn" type="text" name="nachname" size="20" value=""></td>
			</tr>
			<tr>
				<td><label for="vn">Vorname:</label></td>
				<td><input id="vn" type="text" name="vorname" size="25" value=""></td>
			</tr>
			<tr>
				<td><label for="kk">Klasse/Kurs:</label></td>
				<td><input id="kk" type="text" name="klasse_kurs" size="5" value=""></td>
			</tr>
			<tr>
				<td><label for="em">E-Mail:</label></td>
				<td><input id="em" type="text" name="email" size="30" value=""></td>
			</tr>
	     </table>
	</fieldset>
	<fieldset>
		<legend>Rechner</legend>
		<table summary="">
			<tr>
				<td><label for="rr">Rechnerraum:</label></td>
				<td><input id="rr" type="text" name="rechnerraum" size="5" value=""></td>
				<td><label for="dt">Datum:</label></td>
				<td><input id="dt" type="text" name="datum" size="10" value=""></td>
			</tr>
			<tr>
				<td><label for="rn">Rechner-Nr.:</label></td>
				<td><input id="rn" type="text" name="rechner_nr" size="5" value=""></td>
				<td><label for="uz">Uhrzeit:</label></td>
				<td><input id="uz" type="text" name="uhrzeit" size="10" value=""></td>
			</tr>
		</table>
		<div><label for="fp">Fehler-/Problembeschreibung</label></div>
		<div><textarea id="fp" name="Fehler-/Problembeschreibung:" rows="10" cols="40"></textarea></div>
	</fieldset>
	<fieldset>
		<legend>Formular ...</legend>
		<input type="submit" value="Absenden">
		<input type="reset" value="Abbrechen">
	</fieldset>
</form>
</body>
</html>

Jede Zeile, die mit pruefung.push beginnt, fügt ein weiteres Array mit drei Elementen hinzu.

Der Name des zu prüfenden Formularelements.
Der reguläre Ausdruck, der auf den Wert des Formularelements passen muss.
Der Text, der als (Teil der) Fehlermeldung angezeigt, wird, wenn der reguläre Ausdruck nicht passt.

Dieses Prinzip kann man dann sehr leicht für seine eigenen Bedürfnisse erweitern. In Internet kann man sogar reguläre Ausdrücke finden, die E-Mail-Adressen auf ihre korrekte Form überprüfen. Die sind dann aber noch mal deutlich komplizierter, als die, die ich hier benutzt habe.

hahny · 16. Mai 2009

Danke ihr beiden ^^

Ich bin nich so der Pro in JavaScript, also verzeiht mir meine unwissenheit

Die Lösungsanzätze scheinen mir nach "studieren" der Seiten aus den Links sehr sinnig und auf jeden Fall besser als meine !!

aaaalso... noch mal DANKE

PS: @ User007: ich denk nächste mal dran die Überschrift besser zu formulieren, hatte nur grade in dem Moment nich so viel Zeit
sry

User007 · 16. Mai 2009

Bin auch Anfänger was JS angeht, also muß da nix verziehen werden. Allerdings sollte man als Unwissender Lernwilligkeit beweisen bzw. zeigen...
Aussagefähige Titel dienen ja eigtl. nur dem Hilfesuchenden, da die Problematik sozusagen "vorsortiert" wird und mehr bzw. schneller Hilfestellung durch entsprechend "qualifizierte" Helfer geleistet werden kann. Die Zeit sollte wohl drin sein - schließlich "opfern" andere ihre Zeit, um dir zu helfen !

Suche

JavaScript Baruche (schon wieder) Hilfe -.-

hahny

Ensign

User007

Admiral

Scheppat

Cadet 1st Year

hahny

Ensign

User007

Admiral

Ähnliche Themen