Haken bei Inputfeld (Ajax?)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
adresse
array
aufgetreten versuchen
blocken
code
datum
email
erneut code
fehlermeldung
feld
format
http
inhalt
login
post
schnittstelle
status
technischer fehler
type
url
-
Hallo,
ich habe ein Login-System in PHP geschrieben. Leider halten sich meine JavaScript/Ajax usw Kenntnisse stark in Grenzen, deswegen folgende Frage:
ich will programmieren, dass wenn man beispielsweise die E-Mail eingetippt hat, ein Haken rechts vom (oder im) Inputfeld erscheint, wenn die E-Mail noch nicht existiert und wenn sie schon existiert, ein rotes x erscheint.
Das Gleiche bei Passwort und Passwort wiederholen (wenn sie übereinstimmen: haken/kreuz)
Könnt ihr mir da bitte helfen?
Formular:
<form action="index.php" method="post"> <table id="register"> <tr><td>Vorname</td> <td><input type="text" name="vname" size="30" style=" -moz-border-radius:15px; /* Firefox */ -webkit-border-radius:15px; /* Safari, Chrome */ -khtml-border-radius:15px; /* Konqueror */ border-radius:15px; /* CSS3 */" maxlength="50"/></td> </tr> <tr><td>Nachname</td> <td><input type="text" name="nname" size="30" style=" -moz-border-radius:15px; /* Firefox */ -webkit-border-radius:15px; /* Safari, Chrome */ -khtml-border-radius:15px; /* Konqueror */ border-radius:15px; /* CSS3 */" maxlength="50"/></td> </tr> <tr><td>Passwort</td> <td><input type="password" name="passwort" size="30" style=" -moz-border-radius:15px; /* Firefox */ -webkit-border-radius:15px; /* Safari, Chrome */ -khtml-border-radius:15px; /* Konqueror */ border-radius:15px; /* CSS3 */" maxlength="50"/></td> </tr> <tr><td>Passwort wiederholen</td> <td><input type="password" name="passwort2" size="30" style=" -moz-border-radius:15px; /* Firefox */ -webkit-border-radius:15px; /* Safari, Chrome */ -khtml-border-radius:15px; /* Konqueror */ border-radius:15px; /* CSS3 */" maxlength="50"/></td> </tr> <tr><td>E-Mail</td> <td><input type="text" name="email" size="30" style=" -moz-border-radius:15px; /* Firefox */ -webkit-border-radius:15px; /* Safari, Chrome */ -khtml-border-radius:15px; /* Konqueror */ border-radius:15px; /* CSS3 */" maxlength="50"/></td> </tr> <tr><td><input type="submit" value="Registrieren" style=" -moz-border-radius:15px; /* Firefox */ -webkit-border-radius:15px; /* Safari, Chrome */ -khtml-border-radius:15px; /* Konqueror */ border-radius:15px; /* CSS3 */ text-align: center; " name="register"/></td> </tr> </table> </form> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hey,
hier solltest du dir noch über diverse andere Sachen Gedanken machen.
Wann möchtest du die Felder validieren?
Nach der Eingabe? Beim eintippen oder beim absenden des Formulars? Wobei du beim absenden sowieso validieren solltest.
Um die Sache etwas einfacher zu machen könntest du jQuery nutzen. Die Passwörter zu überprüfen ist ja einfach. Wenn du dich entschieden hast wann du das machen möchtest vergleichst du einfach den Inhalt der Felder. Falls sie nicht identisch sind markierst du die Felder (z.B. mit CSS).
Du müsstest den Passwortfeldern noch id's zuweisen, dann geht das mit jQuery ungefähr so:
if(jQuery('#passwort').val() != jQuery('#passwort2') { jQuery('#passwort').addClass('errorEingabe'); jQuery('#passwort2').addClass('errorEingabe'); return false; }
Das mit der E-Mail Adresse ist dann schon wieder ein wenig kniffliger. Hier müsste du mit Ajax gegen eine Schnittstelle prüfen ob diese bereits vergeben ist. Die Rückgabewerte deiner Schnittstelle müssen dementsprechend angepasst sein. In jQuery ungefähr so:
jQuery.ajax({ type: "POST", url: "emailcheck.php", data: { email: jQuery('#email').val(), }, dataType: 'json', success: function(data) { if(!data) { jQuery('#email').addClass('emailError'); } else if(data.success == true) { jQuery('#email').addClass('emailOk'); } else { jQuery('#email').addClass('emailError'); } }, error: function() { alert("Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut."); } });
WICHTIG!!
Das sind allerdings nur Ansätze es kommt jetzt darauf an wie du es lösen möchtest. Wann und ob du überhaupt mit jQuery arbeiten willst. -
Könntest du mir bitte näher erklären, was das Programm macht (jetzt nur bei E-Mail).
Ich will es bereits beim Eintippen überprüfen.
Und was wird dann an emailcheck.php übertragen?
Edit:
habs ausprobiert. Es kommt die ganze Zeit die Fehlermeldung "Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut.", auch wenn ich etwas in das Inputfeld eingebe
Beitrag zuletzt geändert: 28.12.2013 22:41:17 von kogsz -
Hey,
sorry hätte das wohl was genauer erklären sollen. Also wie gesagt das ist nur ein Ansatz.
Ich versuch dir den Ajax-Call mal Step by Step zu erklären.
Die ersten beiden Zeilen sind eigentlich trivial. Wir nutzen die Bibilothek jQuery die Funktion ajax.
Als type setzen wir die http-Methode post.
Dann kommt die url, ich vermute hier liegt wohl bei dir der Fehler. Als url kannst du entweder eine url angeben z.B. "www.meinedomain.de/irgendein/skript" oder eben ein relativen Pfad wie "emailcheck.php". Diese Datei muss existieren, sie ist die Schnittstelle von der ich gesprochen hatte. Das php Skript, oder welche Sprache auch immer du benutz, muss dann die E-Mail Adresse mit der Datenbank, oder ähnlichen, abgleichen. Dann muss diese Schnittstelle die Daten im richtigen Format, welches du mittels dataType definierst, zurückgeben. Also in diesem Beispiel im json-Format. In php gibt es z.B. die Funktion http://www.php.net/manual/de/function.json-encode.php.
jQuery.ajax({ type: "POST", url: "emailcheck.php", dataType: 'json',
Unter data kannst du die Daten definieren, die du an die Schnittstelle mittels post oder get übermittelst.
Falls du post wählst kannst du dann z.B. wieder mit php die E-Mail Adresse mit $_POST['email'] abfragen.
data: { email: jQuery('#email').val(), },
Der success und der error Block. In den zweiten läufst du scheinbar, ich denke da du die Schnittstelle das Skript noch nicht angelegt hast, oder ein falsche url definiert hast. Der error Block wird aufgerufen falls der http-Request fehlschlägt. Also z.B. im falle eines http Fehlers 404. Der success Block ist dann der in dem du zumindest schon mal einen Response erhältst. Diesen musst du jetzt bewerten. In data wird der json Response gespeichert. Existiert data nicht stimmt irgendwas noch nicht mit deinem Rückgabewert (erste if Abfrage). Ich bau data immer als Array auf, in json sieht das dann ungefähr so aus {"success": true, "statusMeldung": "irgend eine Rückgabe"}. Über den success Status kannst du ermitteln ob der Request erfolgreich war. Du könntest das mittels der statusMeldung noch genauer validieren. Dann müsse im ersten else Teil noch ein wenig mehr passieren. Im zweiten else Teil kannst du z.B. auch die statusMeldung verarbeiten, der Request war nicht erfolgreich aber warum? Ist die E-Mail Adresse bereits in Verwendung oder willst du sie vll nicht zulassen weil es eine wegwerf E-mail ist, oder vll ist sie nicht valide. Hier hast du ziemlich viele Möglichkeiten, welche alle von deiner Schnittstelle abhängen.
success: function(data) { if(!data) { alert("Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut."); } else if(data.success == true) { jQuery('#email').addClass('emailOk'); } else { jQuery('#email').addClass('emailError'); } }, error: function() { alert("Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut."); } });
Ich hoffe ich konnte dir etwas weiterhelfen.
Gruß -
Danke für die schnelle Hilfe :)
Leider geht es aber immernoch nicht :(
Inhalt von test.php:
<form action="test.php" method="post"> <input type="text" name="email"/> <input type="submit"/> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script language="javascript" type="text/javascript"> jQuery.ajax({ type: "POST", url: "test2.php", data: { email: jQuery('#email').val(), }, dataType: 'json', success: function(data) { if(!data) { jQuery('#email').addClass('emailError'); alert("nodata"); } else if(data.success == true) { jQuery('#email').addClass('emailOk'); alert("ok"); } else { jQuery('#email').addClass('emailError'); alert("error"); } }, error: function() { alert("Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut."); } }); </script>
Habe noch alerts hinzugefügt, sodass ich gleich ne Meldung bekomme und nich mit CSS rumhantieren muss :D
Inhalt von test2.php (bei dir emailcheck.php):
<?php echo $_POST['email']; ?>
Es kommt immernoch die Fehlermeldung mit dem technischen Fehler.
-
In deiner test2.php musste ja nun prüfen, ob Email vorhanden oder nicht und dann im JSON Format ein TRUE oder FALSE zurückgeben. Mit einem echo kann es nicht funktionieren.
-
habe test2.php erweitert:
<?php include "db_connect.php"; echo $_POST['email']; $email = $_POST['email']; $user_vorhanden = mysql_num_rows(mysql_query("SELECT * FROM login WHERE `E-Mail` = '$email')); // 1 bei User schon vorhanden, bei 0 nicht if($user_vorhanden == 1) { echo "<img src=haken.jpg />"; } else { echo "<img src=kreuz.jpg />"; } ?>
Gleiche Fehlermeldung :/ -
:) deine test2.php muss die Daten im json Format zurückliefern z.B.
<?php include "db_connect.php"; $email = $_POST['email']; $user_vorhanden = mysql_num_rows(mysql_query("SELECT * FROM login WHERE `E-Mail` = '$email')); // 1 bei User schon vorhanden, bei 0 nicht if($user_vorhanden == 1) { $result = array( "success" => false, "status" => "E-Mail wird bereits verwendet" ); } else { $result = array( "success" => true, "status" => "E-Mail noch frei" ); } echo json_encode($result); ?>
hoffe hab kein tipper drin.
Das Bild setz du dann über javascript. -
Sorry Leute aber es geht immernoch nicht :D
Wenn ich auf test.php gehe erscheint jetzt nicht mehr die Fehlermeldung, sondern "ok", wegen
else if(data.success == true) { jQuery('#email').addClass('emailOk'); alert("ok");
Das ist ja schon einmal ein Fortschritt :D
Wenn ich aber etwas in das Textfeld eingebe passiert rein gar nichts.
Sorry, dass ich euch so auf die Nerven gehe :D
BTW würde mir glaube ich ein jQuery/Ajax ? Tutorial nicht schaden. Ich habe leider keins auf (vorzugsweise) deutsch gefunden, das mich angesprochen hat und gut war. Kennt ihr da welche? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
