• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Hilfe beim Formular Echtzeit überprüfung

Gaspel

New member
Hallo Leute!
Ich bin an einer Registration für meine Webseite am Programmieren. Per Javascript soll echtzeit überprüft werden ob die angaben auch überein stimmen und ob es sich um eine E-mail handelt oder nicht und ob das Passwort sicher ist.
Dies funktioniert auch soweit so gut. allerdings möchte ich nun ein Funktion hinzufügen das alle überprüft und nur wenn alles stimmt, das Submit übernimmt.
Dies hab ich programmiert aber aus irgendwelchen gründen funktioniert das so nicht. Hat mir da jemand nen tipp?

Javascript:
Code:
        var eingabepw1;
	var eingabepw2;
	var eingabeemail1;
	var eingabeemail2;
	var eingabename;
	var eingabevname;
	  
	  function pwcorrect() {
   var pweingabe1 = document.getElementById('pxx').value;
   var pweingabe2 = document.getElementById('pyy').value;


   var call1 = document.getElementById('feedback1');
   var call2 = document.getElementById('feedback2');
            

   if (pweingabe1.length > 7)  
   {    
        
   
      if (pweingabe1.match(/\d{1,}/) && pweingabe1.match(/[a-zA-ZäöüÄÖÜ]{1,}/) && pweingabe1.match(/\W/)) 
        {   
      call1.style.color="#428c0d";               
      call1.innerHTML = "<strong>sehr sicher!</strong>";
	  eingabepw1 = 1;
        }
        
        
        else if (pweingabe1.match(/\d{1,}/) && pweingabe1.match(/[a-zA-ZäöüÄÖÜ]{1,}/) || pweingabe1.match(/\W/) && pweingabe1.match(/[a-zA-ZäöüÄÖÜ]{1,}/)) 
        {   
    call1.style.color="#56a40c"; 
    call1.innerHTML = "<strong>sicher!</strong>";
	eingabepw1 = 1;
        }
        else
        {   
         
		call1.style.color="#ff9410"; 
		call1.innerHTML = "<strong>unsicher!</strong>";
		eingabepw1 = 0;	
		}
    }
    else
    {
		if (pweingabe1.length > 0) {
		call1.style.color="#ff352c"; 
		call1.innerHTML = "<strong>zu kurz!</strong>";    
		eingabepw1 = 0;
		}
	}
	if (pweingabe2.length >= 1)
	{
	if (pweingabe2 == pweingabe1) {
    call2.style.color="#428c0d"; 
	call2.innerHTML = "Passwort <strong><i>stimmt</strong></i> überein!";
	eingabepw2 = 1;
	} else {
    call2.style.color="#ff352c";
	call2.innerHTML = "Passwort <strong><i>stimmt nicht</strong></i> überein! ";
	eingabepw2 = 0;
	}
	}	
	};
	
	
	function emailcheck() {
	var val1 = document.getElementById('ixx').value;
	var val2 = document.getElementById('iyy').value;
	
	var call1 = document.getElementById('feedback3');
	var call2 = document.getElementById('feedback4');
	if (val2.length >= 1) {
	if (val1 != val2) {
    call2.style.color="#ff352c"; 
	call2.innerHTML = "E-Mail <strong><i>stimmt nicht</i></strong> überein";
	eingabeemail2 = 0;
	} else {
    call2.style.color="#428c0d"; 
	call2.innerHTML = "E-Mail <strong><i>stimmt</i></strong> überein!";
	eingabeemail2 = 1;
	}
	}
	if (val1.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/))
	{
    call1.style.color="#428c0d"; 
	call1.innerHTML = "ist <strong><i>eine</i></strong> E-Mail!";	
	eingabeemail1 = 1;
	} else {
    call1.style.color="#ff352c"; 
	call1.innerHTML = "ist <strong><i>keine</i></strong> E-Mail!";	
	eimgabeemail1 = 0;
	}
	};
	
	function formcheck() {
	
	var name = document.getElementById('name').value;
	var vname = document.getElementById('vname').value;
	
	if (vname.length > 1) {
	eingabevname = 1;
	} else {
	eingabevname = 0;
	}
	if (name.length > 1) {
	eingabename = 1;
	} else {
	eingabename = 0;
	}
	if (eingabepw1 == 1 && eingabepw2 == 1 && eingabeemail1 == 1 && eingabeemail2 == 1 && eingabevname == 1 && eingabename == 1) {
	document.forms["regi"].submit();
	}
	};
Html Registration.php
HTML:
			<form action="?p=test" method="post" id="regi" >
		<table id="regi">
			<tr id="email" >
				<td id="email">
				<label>E-Mail: </label>
				</td>
				<td>
				<input type="text" name="email" placeholder="@">
				</td>
			</tr>
			<tr>
				<td>
				<label>Vorname: </label>
				</td>
				<td>
				<input type="text" name="vname" id="vname" >
				</td>
			</tr>
			<tr>
				<td>
				<label>*Name: </label>
				</td>
				<td>
				<input type="text" name="name" id="name">
				</td>
			</tr>
			<tr height="20">
			</tr>
			<tr>
				<td>
				<label>*E-Mail: </label>
				</td>
				<td>
				<input type="text" name="ixx" id="ixx" onkeyup="emailcheck();"/>
				</td>
				<td>
				<span id="feedback3"></span>
				</td>
			</tr>
			<tr>
				<td>
				<label>*Bestätigen: </label>
				</td>
				<td>
				<input type="text" name="iyy" id="iyy" onkeyup="emailcheck();" />
				</td>
				<td>
				<span id="feedback4"></span>
				</td>
			</tr>
			<tr height="20">
			</tr>
			<tr>
				<td>
				<label>*Passwort: </label>
				</td>
				<td>
				<input type="password" name="pxx" id="pxx" onkeyup="pwcorrect();" />
				</td>
				<td>
				<span id="feedback1"></span>
				</td>
			</tr>
			<tr>
				<td>
				<label>*Bestätigen: </label>
				</td>
				<td>
				<input type="password" name="pyy" id="pyy" onkeyup="pwcorrect();" />
				</td>
				<td>
				 <span id="feedback2"></span>
				</td>
			</tr>
			<tr>
				<td colspan="3">
				<button type="button" onclick="formcheck();" id="send">Registrieren</button>
				</td>
			</tr>
		</table>

Interessant ist auch das wenn ich die E-mail erst überprüfen möchten wenn man fertig ist mit tippen und 'onchange' nehme funktioniert das auch nicht...

Besten Dank!
 
Zuletzt bearbeitet von einem Moderator:
So ich habe oben einige Tippfehler verbessert! Jetzt funktioniert auch der Script soweit so gut.
Leider gibt es mir aber kein Submit, auch wenn ich alle Eingaben getätigt habe.

Code:
	if (eingabepw1 == 1 && eingabepw2 == 1 && eingabeemail1 == 1 && eingabeemail2 == 1 && eingabevname == 1 && eingabename == 1) {
	document.forms["regi"].submit();
	}

Gibt es noch ne alternativ Lösung zu der Aufstellung? Oder liegt das Problem ganz wo anders dass ich nie alle Variablen als 1 bekomme.

Ich weiss nicht woran es liegen könnte.
Besten Dank!
 
Nun wenn ich den Script so programmiere:

Code:
	if (eingabepw1 == 1 && eingabepw2 == 1 && eingabeemail1 == 1 && eingabeemail2 == 1 && eingabevname == 1 && eingabename == 1) {
	document.forms["regi"].submit();
	} else {
       document.forms["regi"].submit();
       }
Funktionierts einwand frei. Allerdings funktioniert die Prüfung an sich nicht. Nur hab ich bis jetzt den Fehler nicht entdeckt... AUch wenn ich alle Felder in der Anmeldung ausfülle passiert nichts.

- - - Aktualisiert - - -

Okay Problem gelöst, danke für die Hinweise, Habe den Hauptbeitrag berichtigt falls es jemand gebrauchen könnte...
 
Noch ein paar Bemerkungen:

1. Du hast die ID "regi" (und nicht nur die alleine, sondern auch andere) doppelt im Dokument vergeben. Das darf nicht sein, da diese eindeutig sein müssen.
2. Du solltest dir dringend angewöhnen, deinen Code sauber zu formatieren - so machst du dir das Leben (also das Maintainen des Codes) nur unnötig schwer.
3.
Gibt es noch ne alternativ Lösung zu der Aufstellung?
Ich habe mir den Code jetzt nicht genauer angesehen (wegen 2.), aber du kannst wahrscheinlich mit den "neuen" HTML5-Formvalidierungs-Attributen (wie z.B. require oder pattern) einiges erschlagen.
4. Dir ist hoffentlich klar, dass dein komplettes Formular nicht funktioniert, wenn JS deaktiviert ist...?
5. Was bringt ein <label>, wenn es keinen Bezug zu einem Eingabefeld hat?
 
Zurück
Oben