PHP Form-Eintrag nach Eingabe sofort überprüfen

[Jxn]

Hallo, nochmal ich.

bin gerade weiter dabei, eine Login und Registrierungs-Einheit zu machen. Sieht soweit so aus

<form action="" method="POST">
        <label>Benutzername:</label>
        <input type="username" id="uname" name="uname" required /><br /><br />

        <label>E-Mail-Adresse:</label>
        <input type="email" id="mail" name="mail" required /><br /><br />

        <label>Passwort:</label>
        <input type="password" name="pw" required /><br /><br />

        <input type="checkbox" name="agb" required />
        <label>Ich stimme den AGB und Datenschutzrichtlinien zu.</label><br /><br />

        <input type="submit" value="Registrieren" />
      </form>

<?php
                $pdo = new PDO('mysql:host=xxxxx;dbname=xxxxxxxxx', 'xxxxxxxxxxx', 'xxxxxxx');

                $username = $_POST['uname'];
                $mail = $_POST['mail'];
                $pw = sha1($_POST['pw']);

                 $statement = $pdo->prepare("INSERT INTO user (username, email, password) VALUES (?, ?, ?)");
                 $statement->execute(array($username, $mail, $pw));

                ?>

Das ist ja jetzt nicht die Welt. Wird auch alles eingetragen, alles tutti.

Jetzt hätte ich aber gerne, dass sofort nachdem der Benutzername eingegeben wird, überprüft wird, ob dieser schon vergeben ist oder nicht. Genauso wie für die E-Mail-Adresse. Möchte, dass dann das input-Feld rot gefärbt wird. Hab dafür extra schon die action des Formulars auf die Seite geschrieben (action=""), da ja keine neue Seite geöffnet werden soll, sondern nur das input-Feld rot und eventuell noch eine Meldung daneben erscheinen soll. Mein Ansatz war folgender:

             $sql="SELECT username FROM user";
             foreach ($pdo->query($sql) as $row) {
             }

             if($username == $row['username']) {
               echo "Dieser Benutzername ist vergeben"
             } else {
               $statement = $pdo->prepare("INSERT INTO user (username, email, password) VALUES (?, ?, ?)");
               $statement->execute(array($username, $mail, $pw));
             }

Aber ich der überprüft jetzt ja nicht sofort den Benutzernamen, sondern erst nach dem Absenden. Habe es dann mit Javascript probiert zu färben, hat aber auch irgendwie nicht geklappt.

Hat da jemand eine Idee?

 

[Sparta8]

Du brauchst JavaScript und Ajax. Mit PHP allein gehts nur nach dem absenden. Wenns "live" passieren soll, dann nur mit JS.

(Deine Label Tags brauchen noch das "for" attribut, hat aber nichts mit deiner Frage zu tun.)

 

[Jxn]

Okay, ich habe mal probiert das ganze in JS zu drehen:

                <script>
                  var username = document.getElementById('uname').value;
                  var email = document.getElementById('mail').value;

                  <?php
                      $sql="SELECT name FROM data";
                      foreach ($pdo->query($sql) as $row) {}
                  ?>
                  var inputname = <?php $row['username'] ?>

                  if(username == inputname) {

                  } else {
                    $statement = $pdo->prepare("INSERT INTO user (username, email, password) VALUES (?, ?, ?)");
                    $statement->execute(array($username, $mail, $pw));
                  }
                </script>

Ist der Ansatz richtig?

 

[michi174]

ne absolut falsch der Ansatz. Google einfach mal nach Ajax Registrierung. Da sollte es genug Tutorials geben dafür.

 

[blablub1212]

So würde ich das nicht machen. Bau dir eine kleine API die einen Endpunkt zum Überprüfen der Verfügbarkeit eines Users hat mit einem Input-Parameter Username und ruf die API mit Ajax bei einem beliebigen Event auf (OnInput, OnChange etc.).

Siehe z.B.:

https://www.itechempires.com/2016/03/jquery-username-availability-validation-using-php-and-mysql/

Generell würde ich die Authentifizierung aber als fertiges Paket nehmen. Das wurde schon tausendmal entwickelt und du kannst dabei soviel falsch machen. Also lieber irgendwas nutzen was verbreitet und ordentlich getestet ist.

z.B.:

https://github.com/PHPAuth/PHPAuth

oder falls du dein Backend evtl. doch lieber mit Nodejs anstatt PHP machen willst:

http://www.passportjs.org

 

[Jxn]

Ja, darüber habe ich auch schon nachgedachte. Wollte es nur gerne selber machen, wegen bzw. zur Übung.
Aber im Endeffekt hast du Recht, ich glaube ich schaue mir mal das Passportjs an.

Danke!