Javascript richtig in HTML5 einfügen und Überprüfung der Formulare

Aktuelle Programmier- und Auszeichnungssprachen HTML / CSS / JavaScript
1

Hallooooo :slight_smile:

ich sitze grad an einem Projekt meiner Uni und komme einfach nicht weiter.
Ich besitze eine Formular-HTML5-Datei, die halt typische Merkmale eines Anmeldeformulars zeigt.

<html lang="de">
<head>
		<meta charset="utf-8">
		<title> Formular </title>
		<meta name="Formular" content="Alle Linien ausfüllen um dich zu registrieren" >
		<meta name="Author" content="Nicole Netzbandt">
		<link rel ="stylesheet" type="text/css" href="CssLink.css">
		<script language="javascript" type="text/javascript" src="JavaScript.js"></script>
</head>

<body>

<href class ="body">


 	<div id="head">
		<h1>Formular<h1>
	</div><br>
		<div id="nat">
	<br><button type="button" id="löschen">Event löschen</button><br><br>
	<button type="button" id="update">Update Events</button><br><br>
   <button type="button" id="showAll">Alle Events</button>
   </div>
 	<div id="nav">
	<A HREF="Main.html">Start Seite</A><br>
			Benutzername:
			<input type= "text" name= "Suchleiste" size="20" maxlength="20" required><br>
			Passwort: <br>
			<input type= "text" name= "Suchleiste" size="20" maxlength="20" required>
			
			<button type="button" id="login">Log In</button>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp<br><A HREF="Formular.html">Anmeldung</A>
	<br>

	<from action="from_response.php" method="post">
	<from action="select.html">
	<select name="Kategorien" size="5">
			<option>Frühling</option>
			<option>Sommer</option>
			<option>Herbst</option>
			<option>Winter</option>
			</Select>
			</from>
			<br>
			Ort: <br>
			<input type="text" list="games">
		    <datalist id="games">
			<option value="Berlin">
			<option value="Brandenburg">
			<option value="Kölln">
			<option value="Sachsen">
			<option value="Dänemark">
			<option value="Candy Mountain">
			</datalist><br>
			Eventtyp: <br>
			<input type="text" list="eventtyp">
			<datalist id="eventtyp">
			<option value="Horror">
			<option value="Sport">
			<option value="Kostüm">
			<option value="Länder">
			<option value="Party">
			<option value="Nerd">
			</datalist>
			<br>Zeit: <br>
			<input type="text" list="zeit">
			<datalist id="zeit">
			<option value="8:00 - 10:00 Uhr">
			<option value="10:00 - 12:00 Uhr">
			<option value="12:00 - 14:00 Uhr">
			<option value="14:00 - 16:00 Uhr">
			<option value="16:00 - 18:00 Uhr">
			<option value="18:00 - 20:00 Uhr">
			</datalist>
			Eventname: <br>
			<input type="text" list="name">
			<datalist id="name">
			<option value="Zombie Walk">
			<option value="MMC">
			<option value="Jonglier Meisterschaften">
			<option value="Zirkus Halli Galli">
			<option value="We buttern das Brot mit Butter">
			<option value="Sonstige">
			</datalist>
			<br><A HREF="Tabelle1.html">Eventliste</A> 
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <button type="button" id="suche">Suchen</button>
			<br><br>
			
	</div>

<br>
<div class = "middle">

 Bitte füllen Sie alle Felder mit Sternchen aus. 
 Vielen Dank!
 <br><br>
 Name*:<br><br>
 <input type= "text" name= "name" size="40" maxlength="40" required>&nbsp <href class = "rechts"> <img src="http://www.ggc.edu/sebin/d/i/NoPerson.png" height="250" width="220" border="5"><br><button type="button" id="suchen"> Bild wählen </button></href></href><br>
<br><br>
 Vorname*: <br><br>
 <input type= "text" name= vorname" size="40" maxlength="40" required>
<br><br>
 Alter*:<br><br>
 <input type="text" list="Alter" required>
 <datalist id="Alter">
  <option value="16">
  <option value="17">
  <option value="18">
  <option value="19">
  <option value="20">
  <option value="21">
  <option value="22">
  <option value="23">
  <option value="24">
  <option value="24">
  <option value="25">
  <option value="26">
</datalist>
<br><br>
 Straße und Hausnummer*:<br><br>
 <input type= "text" name= "strasse" size="40" maxlength="40" required>&nbsp <input type= "text" name= "hausnummer" size="5" maxlength="5" required>
<br><br>
 Postleitzahl*:<br><br>
 <input type= "text" name= "plz" size="10" maxlength="10" required>
<br><br>
 Telefonnummer:<br><br>
 <input type= "text" name= "telnummer" size="40" maxlength="40">
<br><br>
 E-Mail-Adresse*:<br><br>
 <input type= "text" name= "mail" size="40" maxlength="40" required>
 <href class ="rechts"><button type="submit" id="suchen"> Absenden </button></href>
 </div>
</body>
<footer>
<div id="footer">
AGB Impressum Login
</div>

</footer>
</html>```

Und dann gibt es noch ein "passenden" Javascript dazu, welcher sich aber nicht anzeigen lassen will :confused:. Das Javascript soll eine ablaufende Zeitanzeige anzeigen, die wenn sie abgelaufen ist auf die Hauptseite springt. Zusätzlich gibt es mehrere Überprüfungen der Eingabefelder, die jeweils eine Fehlermeldung ausgeben, wenn etwas falsches drin steht.

function countdown(time,id){

//time brauchen wir später noch
t = time;

//Tage berechnen
d = Math.floor(t/(606024)) % 24;

// Stunden berechnen
h = Math.floor(t/(60*60)) % 24;

// Minuten berechnen
// Sekunden durch 60 ergibt Minuten
// Minuten gehen von 0-59
//also Modulo 60 rechnen
m = Math.floor(t/60) %60;

// Sekunden berechnen
s = t %60;

//Zeiten formatieren
d = (d > 0) ? d+„d „:““;
h = (h < 10) ? „0“+h : h;
m = (m < 10) ? „0“+m : m;
s = (s < 10) ? „0“+s : s;

// Ausgabestring generieren
strZeit =d + h + „:“ + m + „:“ + s;

// Falls der Countdown noch nicht zurückgezählt ist
if(time > 0)
{
//Countdown-Funktion erneut aufrufen
//diesmal mit einer Sekunde weniger
window.setTimeout(‚countdown(‘+ --time+’,’’+id+’’)’,1000);
}
else
{
//führe eine funktion aus oder refresh die seite
//dieser Teil hier wird genau einmal ausgeführt und zwar
//wenn die Zeit um ist.
strZeit = „Die Zeit ist um. Bitte Registrieren Sie sich erneut.“
alert(strZeit);
window.location.href = „https://www.google.de“;
}
// Ausgabestring in Tag mit id=„id“ schreiben
document.getElementById(id).innerHTML = strZeit;
}

function chkFormular () {
if (document.Formular.name.value == „“) {
alert(„Bitte Ihren Namen eingeben!“);
document.Formular.name.focus();
return false;
}
if (document.Formular.vorname.value==""){
alert(„Bitte Ihren Vornamen eingeben!“);
document.Formular.vorname.focus();
return false;
}
if(document.Formular.mail.value==""){
alert(„Bitte Ihre E-Mail eingeben!“);
document.Formular.mail.focus();
return false;
}
if(document.Formular.mail.value.indexOf("@gmx.de")== -1){
alert(„Ihre Internetadresse muss mit ‚@gmx.de‘ enden!“);
document.Formular.mail.focus();
return false;
}
if(document.Formular.Alter.value==""){
alert(„Bitte Alter eingeben!“);
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i)
if (document.Formular.Alter.value.charAt(i) < „0“ ||
document.Formular.Alter.value.charAt(i) > „9“)
chkZ = -1;
if (chkZ == -1) {
alert(„Altersangabe keine Zahl!“);
document.Formular.Alter.focus();
return false;
}
}
if(document.Formular.strasse.value==""){
alert(„Bitte Straße eintragen!“);
document.Formular.strasse.focus();
return false;
}
if(document.Formular.hausnummer.value==""){
alert(„Bitte Hausnummer eintragen!“);
document.Formular.hausnummer.focus();
return false;
}
car chkX = 1;
for(i = 0; i < document.Formular.telnummer.lenght; i++)
if(document.Formular.telnummer.value.charAt(i) < „0“ ||
document.Forumlar.telnummer.value.charAt(i) > „9“)
chkX = -1;
if(chkX == -1){
alert(„Telefonnummer muss aus Zahlen bestehen!“);
document.Forumlar.telnummer.focus();
return false;
}
if(document.Formular.plz.value==""){
alert(„Bitte Postleizahl eintragen!“);
document.Formular.plz.focus();
return false;
}
car chkX = 1;
for(i = 0; i < document.Formular.plz.lenght; i++)
if(document.Formular.plz.value.charAt(i) < „0“ ||
document.Forumlar.plz.value.charAt(i) > „9“)
chkX = -1;
if(chkX == -1){
alert(„Postleizahl muss aus Zahlen bestehen!“);
document.Forumlar.plz.focus();
return false;
}

```

Mein Problem ist jetzt - es passiert leider nichts. Ich weiß nicht woran das liegt: ob ich meine JavaScript-Datei falsch eingebunden habe, oder etwas an meinem Code falsch ist. Könnte mir jemand Klarheit verschaffen? :slight_smile:

2

Bin zwar selbst JavaScript-Noob, aber… da sind einige „offensichtliche“ Fehler drin. Sowas wie
car chkX = 1;
sollte wohl
var chkX = 1;
heißen, und die { öffnenden und schließenden } Klammern stimmen nicht. Das <form…> am Ende gehört AFAIK auch nicht in die .js-Datei, sondern ins HTML.

Eigentlich würde ich ja vorschlagen, schrittweise vorzugehen:

  1. Eine HTML-Seite erstellen, die NUR ein Element enthält, und NUR in diesem Element mit einem minimalen JavaScript ein Countdown angezeigt wird
  2. Eine HTML-Seite erstellen, die NUR ein Eingabefeld enthält, und NUR dieses eine Eingabefeld mit dem einem minimalen JavaScript überprüfen
    …
    aber… das ganze sieht etwas… räusper… „zusammengestückelt“ aus, so dass man annehemen kann, dass das ganze genau so entstanden ist :smiley:

Vielleicht postet noch jemand „konkreter hilfreiches“ (d.h. die fertige, funktionierende Lösung?), aber bis dahin: Wenn man in FireFox (und AFAIK auch in Chrome)
STRG+SHIFT+i
drückt, erscheinen die Web-Entwickler-Tools, wo man z.B. auf „Konsole“ gehen kann, und dort Infos über Dinge wie die anfänglich erwähnten (Tipp-)Fehler bekommt, direkt mit Link auf die fehlerhafte Zeile.

3

[ot]Thema manell freigeschaltet. Keine Ahnung, warum es gefiltert wurde. Sorry für die Umstände.[/ot]

4

[quote=Marco13]Wenn man in FireFox (und AFAIK auch in Chrome)
STRG+SHIFT+i
drückt, erscheinen die Web-Entwickler-Tools, wo man z.B. auf “Konsole” gehen kann, und dort Infos über Dinge wie die anfänglich erwähnten (Tipp-)Fehler bekommt, direkt mit Link auf die fehlerhafte Zeile.[/quote]
Unter Chrome, Firefox und sogar dem aktuellen Internetexplorer erhält man die Entwicklertools mit einem beherzten Druck auf F12.

5

Hehe alles klar danke schön :slight_smile: Ja ich bin etwas hilflos in diesem Thema ^^°