JavaScript Aufgabe

danielt · 19. Sep. 2014

Hallo zusammen

Ich bin in der Informatiklehre und habe den Auftrag gekriegt Ein Forumlar anhand von HTML zu erstellen und die Einträge zu überprüfen mit mehreren Sprachen. Ich habe es mit allen anderen in den griff bekommen ausser mit Javascript. Mit Javascript kenne ich mich nicht so aus und das ist noch der letzte Auftrag dann wäre ich fertig. Und muss bis heute abend um 00:00 alles abgeben.

Der Auftrag Lautet.

Überschrift: Anmeldung
Textfeld1: Benutzername soll genau 6 Zeichen lang sein und keine Sonderzeichen
nthalten.
Textfeld2: Passwort (hidden) (muss Grossbuchstaben, Kleinbuchstaben, Ziffern und Sonderzeichen (d.h. >Ascii 128) enthalten und mindesten 8 Zeichen lang sein)
Textfeld 3: Passwortwiederholung muss überprüft werden
Mind. 2 Optionsfelder (zB. Geschlecht: männlich oder weiblich)
4 Checkboxfelder (zB. Sport: Fussball, Handball, Basketball, Volleyball)
Ein Auswahlfeld (zB. Hobbies: Sport, Kino, PC; Garten)
1 Button (senden); daraufhin wird das Formular überprüft und der Benutzer erhält eine Nachricht, welche Angaben neu ausgefüllt werden müssen, oder ob alle Angabe korrekt waren. (Die Korrekturanweisungen können direkt auch nach Ausfüllen jedes Feldes erzeugt werden).
1 Button (reset); der alle Informationen zurücksetzt.

Wie krieg ich das mit Javascript hin?

Kann mir jemand eingige Tipps sagen oder mir anders helfen? Ich wäre sehr dankbar dafür?
Beim Auftrag 1 wo ich das erste Textfeld überprüfen muss ob es 6 Zeichen beinhaltet und es keine Sonderzeichen hat sollte ich Regex verwendet. Die Regex lautet ja dann: [a-zA-Z0-9]{6,}

Nun muss ich nehme ich mal an die Value aus dem Textfeld 1 im Javascript ziehen und das irgendwie dann überprüfen? wie mache ich das? kann mir jemand zu dieser und den anderen aufgaben helfen?

miniA4kuser · 19. Sep. 2014

Hast du schon mal hier (Selfhtml...forms) geschaut?

ToM80 · 19. Sep. 2014

Es könnte helfen, wenn du ganz konkrete Fragen stellst und einfach schonmal anfängst umzusetzen. Am Ende soll es doch Deine Arbeit sein und nicht die eine Ghostwriters ;-)

Vllt. auch hilfreich:
- SELFHTML: JavaScript / Anwendungsbeispiele / Formulareingaben berprfen
- https://www.google.de/search?q=javascript+formularprüfung

danielt · 19. Sep. 2014

Also hier:

Weshalb überprüft es nur den Benutzernamen und das Passwort nicht bei mir?

Code:

<td align="right">Benutzername:</td>
      <td><input maxlength="6" id="username" name="name" type="text" required></td>
    </tr>
    <tr>
      <td align="right">Password:</td>
      <td><input name="password" id="password" type="password" required></td>

Code:

function UsernamePruefen () {
	var patt = new RegExp("[a-zA-Z0-9]{6,}");
	var username = document.getElementById('username').value;
	var res = patt.test(username);
  if (res != true) {
	  document.getElementById('error').innerHTML = "Benutzername muss 6 Zeichen lang sein und darf keine Sonderzeichen beinhalten!";
  } 
}

function PasswortPruefen () {
	var patt = new RegExp("(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[-_.!@#$%]).{8,}");
	var password = document.getElementById('password').value;
	alert(password);
	var res = patt.test(password);
  if (res != true) {
	  document.getElementById('error').innerHTML = "Passwort muss 8 Zeichenlang sein. Muss mind. einen Gross- und Kleinbuchstaben beinhalten sowie ein Sonderzeichen und eine Zahl.";
  } 
}



function pruefen () {
	UsernamePruefen();
	PasswortPruefen();
}

miniA4kuser · 19. Sep. 2014

Was auch noch hilfreich ist: Fehlerkonsole und Fehlerkonsole

danielt schrieb:
Weshalb überprüft es nur den Benutzernamen und das Passwort nicht bei mir?

Steht denn etwas in der Fehlerkonsole?

ToM80 · 19. Sep. 2014

Rufst du denn die Funktion pruefen() auf?

danielt · 19. Sep. 2014

Ja ich ruefe die funktion pruefen() auf

Ich habe es nun verändert und es sieht so aus

Code:

<form name="input" action="" method="post" onsubmit="return pruefen();">

Code:

function UsernamePruefen () {
	var patt = new RegExp("[a-zA-Z0-9]{6,}");
	var username = document.getElementById('username').value;
	var res = patt.test(username);
	var result;
  if (res != true) {
	  document.getElementById('error').innerHTML = "Benutzername muss 6 Zeichen lang sein und darf keine Sonderzeichen beinhalten!";
	  result = false;
  } else {
	  result = true;
  }
  
  return result;
}

function PasswortPruefen () {
	var patt = new RegExp("(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[-_.!@#$%]).{8,}");
	var password = document.getElementById('password').value;
	var res = patt.test(password);
	var result;
  if (res != true) {
	  document.getElementById('error').innerHTML += "Passwort muss 8 Zeichenlang sein. Muss mind. einen Gross- und Kleinbuchstaben beinhalten sowie ein Sonderzeichen und eine Zahl.";
	  result = false;
  } else {
	  result = true;
  }
  return result;
}



function pruefen () {
	var result;
	if (UsernamePruefen() == false) {
		result = false;
	} else if (PasswortPruefen() == false) {
		result = false;
	} else {
		result = true;
	}
		
	return result;
}

- - - Aktualisiert - - -

beim debuggen krieg ich in dieser zeile

var res = patt.test(username);

denn wert "undefined" obwohl es mir "true/false" zurück geben muss und die zwei zeilen davor sehen ja so aus

var patt = new RegExp("[a-zA-Z0-9]{6,}");
var username = document.getElementById('username').value;

wo liegt der fehler???

miniA4kuser · 19. Sep. 2014

Steht denn in dem Feld 'username' überhaupt was drinnen?

PS: Du kannst auch alles in die Funktion prüfen() reinpacken und mit if..else-Abfragen arbeiten.
PPS: Hast du dir die Links von ToM80 und mir angeschaut und durchgelesen?

danielt · 19. Sep. 2014

ja habe ich ... helfen mir nicht wahnsinnig viel weiter .. ja im username steht der string den ich in dem textfeld geschrieben habe

ToM80 · 19. Sep. 2014

Also die Funktion an sich ist richtig.

Allerings erzeugst du teilweise unnötige Varibalen, was jetzt dein Problem nicht behebt, aber den Code entschlacken würde und somit die Fehlersuche einfacher ist.
Z. B.

PHP:

function UsernamePruefen () {
	var patt = new RegExp("[a-zA-Z0-9]{6,}");
	var username = document.getElementById('username').value;
	var res = patt.test(username);
	var result;
  if (res != true) {
	  document.getElementById('error').innerHTML = "Benutzername muss 6 Zeichen lang sein und darf keine Sonderzeichen beinhalten!";
	  result = false;
  } else {
	  result = true;
  }
  
  return result;
}

wofür die Variable "result"? Gibt doch einfach "res" wieder, denn da steht ja genau das Gleiche schon drin. Da du "username" nur einmal brauchst, brauchst du auch hier keine Variable anzulegen sondern haust den Aufruf direkt in die klammern von test().

Vllt. postest du ausnahmsweise dochmal die komplette Seite, weil irgendwo muss ja der Haken sein.

dbarthel · 19. Sep. 2014

ToM80 schrieb:
Vllt. postest du ausnahmsweise dochmal die komplette Seite, weil irgendwo muss ja der Haken sein.

Jap wäre sicher eine gute Idee.

danielt · 19. Sep. 2014

Also der Fehler liegt bei der regex ... mir ist aufgefallen das er nun beim usernamen einen wert gibt aber beim passwort nicht ...

der regex ist richtig, habe ihn auch im internet und auf diversen tool testen lassen dieses regex = (?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[-_.!@#$%]).{8,}
steht dafür das der string mind. 1 grossbuchstaben, mind. 1 klein buchstaben, mind. 1 zahl, mind. 1 sondernzeichen beinhalten muss und sogleich noch 8 zeichen gross muss es sein.

aber nun in meinem fall gibt es mir false zurück

hier die beiden dateien

Code:

<!DOCTYPE html>
<html>
<head>
<title>Anmeldung</title>
<script type="text/javascript" src="main.js"></script> 
</head>


<body>
<h1>Anmeldung</h1>

<form name="input" action="" method="post" onsubmit="return pruefen();">
  <table border="0" cellpadding="15" cellspacing="0" bgcolor="#A49BAE">
    <tr>
      <td align="right">Benutzername:</td>
      <td><input maxlength="6" id="username" name="name" type="text" required></td>
    </tr>
    <tr>
      <td align="right">Password:</td>
      <td><input name="password" id="password" type="password" required title="Das Password muss mindestens 8 Zeichen lang sein, muss Gross- und Kleinbuchstaben beinhalten sowie mindestens Zahlen und Sonderzeichen."></td>
    </tr>
    <tr>
      <td align="right">Password wiederholung:</td>
      <td><input name="passwordRepeat" id="passwordRepeat" type="password"></td>
    </tr>
    <tr>
	<td><input type="radio" name="geschlecht" value="male">Männlich</td>
	<td><input type="radio" name="geschlecht" value="female">Weiblich</td>

    </tr>
    <tr>
	<td><input type="checkbox" name="sportart" value="fussball" id="check1">Fussball</td>
	<td><input type="checkbox" name="sportart" value="basketball" id="check2">Basketball</td>
	<td><input type="checkbox" name="sportart" value="tennis" id="check3">Tennis</td>
	<td><input type="checkbox" name="sportart" value="boxen" id="check4">Boxen</td>
    </tr>
    <tr>
	<td>
	Beruf:
	<select name="beruf" size="1">
     		<option>Informatik</option>
    		<option>KV</option>
    		<option>Logistiker</option>
     		<option>Automechaniker</option>
      		<option>Mediamatiker</option>
    	</select>
	</td>
    </tr>


    <tr>
      <td align="right">Formular:</td>
      <td>
        <input type="submit" value=" Absenden ">
        <input type="reset" value=" Abbrechen">
        <h1 id="error" style="color:red;"></h1>
      </td>
    </tr>
  </table>
</form>


</body>

</html>

Code:

function UsernamePruefen () {
	var patt = new RegExp("[a-zA-Z0-9]{6,}");
	var username = document.getElementById('username').value;
	var res = patt.test(username);
  if (res != true) {
	  document.getElementById('error').innerHTML = "Benutzername muss 6 Zeichen lang sein und darf keine Sonderzeichen beinhalten!";
  }
  
  return res;
}

function PasswortPruefen () {
	var patt = new RegExp("(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[-_.!@#$%]).{8,}");
	var password = document.getElementById('password').value;
	var res = patt.test(password);
  if (res != true) {
	  document.getElementById('error').innerHTML = "Passwort muss 8 Zeichenlang sein. Muss mind. einen Gross- und Kleinbuchstaben beinhalten sowie ein Sonderzeichen und eine Zahl.";
  }
  return res;
}



function pruefen () {
	var result;
	if (UsernamePruefen() == false) {
		result = false;
	} else if (PasswortPruefen() == false) {
		result = false;
	} else {
		result = true;
	}
		
	return result;
}

ToM80 · 19. Sep. 2014

Nö die RegEx ist richtig, bei mir funktionieren deine JS Funktionen, jedoch würde ich die pruefen Funkiton umstellen:

PHP:

function pruefen () {
	var result=false;
	if (UsernamePruefen() == true) {
		if (PasswortPruefen() == true) {
			result = true;
		}
	}
	return result;
}

Ist aber Geschmackssache. Der Fehler muss woanders liegen. Ich schau mir gleich nochmal dein Form an

danielt · 19. Sep. 2014

Die regex war falsch

hab sie umgestellt auf

^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$, g

nun funktioniert es

miniA4kuser · 19. Sep. 2014

danielt schrieb:
... nun funktioniert es

Die ist aber immer noch falsch! Erlaubt z.B. auch mehr wie 8 Zeichen...

ToM80 schrieb:
...jedoch würde ich die pruefen Funkiton umstellen:

Ich würde wie gesagt alles in eine Funktion packen:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
	<!-- UTF-8 Prüfkommentar -->
	<title>Formular Prüfen</title>
	<!-- META -->
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="author" content="Gobianweb.de">
	<meta name="generator" content="Notepad++">
	<meta name="keywords" content="formular">
	<!-- Stylesheet -->
	<style type="text/css">
	/* NOSCRIPT to display if JavaScript is disabled ============================ */
	#noscript_overlay{
		background-color: black;
		color: white;
		width: 100%;
		height: 100%;
		display: block;
		position: fixed;
		top: 0%;
		left: 0%;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: 0.80;
		filter: alpha(opacity = 80);
	}

	#noscript_content {
		background-color: white;
		color: black;
		text-align: center;
		font-weight: bold;
		width: 30%;
		padding: 16px;
		border: 16px solid orange;
		display: block;
		position: fixed;
		top: 30%;
		left: 35%;
		z-index: 1002;
		overflow: auto;
	}

	/* Main structure =========================================================== */
	select, input {
		margin: 6px 4px;
	}

	strong.label {
		font-weight: bold;
		display: inline-block;
		width: 7.1em;
		margin: 6px 4px;
	}
	</style>
	<!-- JavaScript -->
	<script type="text/javascript">
	/*jslint browser: true, devel: true, sloppy: true, on: true */
	/*global  */
	function pruefen(formular) {
		// Define variables
		var pattern;

		// Check username
		pattern = new RegExp(/(?=^.{6,6}$)[a-zA-Z0-9]*$/);
		if (!pattern.test(formular.username.value)) {
			document.getElementById('error').innerHTML = "Benutzername muss 6 Zeichen lang sein und darf keine Sonderzeichen beinhalten!";
			return false;
		}

		// Check password
		pattern = new RegExp(/(?=^.{8,8}$)(?=(?:.*?\d){1})(?=(?:.*?[a-z]){1})(?=(?:.*?[A-Z]){1})(?=(?:.*?[\.!@#$%*()_+^&}{:;?.]){1})(?!.*\s)[0-9a-zA-Z\.!@#$%*()_+^&]*$/);
		if (!pattern.test(formular.password.value)) {
			document.getElementById('error').innerHTML = "Passwort muss 8 Zeichenlang sein. Muss mind. einen Gross- und Kleinbuchstaben " +
				"beinhalten sowie ein Sonderzeichen und eine Zahl.";
			return false;
		}

		document.getElementById('error').innerHTML = "Alles cool...";	// Hier dann entsprechend ein Leerstring
		return false;	// Hier wird false geliefert zum Testen, muss dann final natürlich ein return true;
	}
	</script>
</head>

<body>
	<!-- NOSCRIPT ######################################################################################## -->
	<noscript>
		<div id="noscript_content">
			ATTENTION !!!<br />
			This site needs JavaScript to work correctly.<br />
			Please enable JavaScript in the options<br />
			of the browser settings.<br /><br />
			Thank you...
		</div>
		<div id="noscript_overlay"></div>
	</noscript>

	<!-- Main structure ################################################################################## -->
	<form name="form1" action="" method="post" onsubmit="return pruefen(this);">
		<strong class="label">Benutzername:</strong>
		<input type="text" name="username" maxlength="6" required />
		<br />
		<strong class="label">Passwort:</strong>
		<input type="password" name="password" required />
		<br />
		<input type="submit" value="Daten senden" />
		   
		<input type="reset" value=" Formular löschen">
	</form>
	<br />
	<br />
	<div id="error"></div>
</body>
</html>

JavaScript Aufgabe

danielt

New member

miniA4kuser

Lounge-Member

ToM80

Guest

danielt

New member

miniA4kuser

Lounge-Member

ToM80

Guest

danielt

New member

miniA4kuser

Lounge-Member

danielt

New member

ToM80

Guest

dbarthel

Lounge-Member

danielt

New member

ToM80

Guest

danielt

New member

miniA4kuser

Lounge-Member