[JavaScript] Dynamische Formularprüfung

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Hennington, 29. November 2008 .

  1. 29. November 2008
    Dynamische Formularprüfung

    Tag!
    Ich möchte bei meinem Registrierungsformular gerne eine Eingabeüberprüfung mittels JavaScript durchführen.
    Der Status der Eingabe soll aber nicht wei bei den meisten als alrt kommen, sondern rechts neben dem jeweiligen Feld stehen.
    Leider fällt mir grad keine Seite ein, die soetwas hat und bei google find ich auch keine Tut's für sowas.

    Es soll also, ums nochmal genauer zu erklären, beispielsweile bei Eingabe des Usernamen rechts neben dem Eingabefeld stehn, ob der Name noch frei ist.
    Bei eingabe der passwörter steht eben rechts neben dem Feld in rot "Passwort zu kurz" und bei 8 Zeichen dann "Passwort OK" in grün oder so.

    Momentan sieht mein Formular so aus:
    HTML:
    <div class="cnt">
     <div class="cnt_head">
     Registrierung
     <?php echo register_user_error($reg); ?>
     </div>
     <form action="" method="POST">
     <div class="cnt_body1">
     <label for="username">Name: </label><input type="text" name="username" maxlength="32" id="username">
     </div>
     <div class="cnt_body2">
     <label for="password">Passwort: </label><input type="password" name="password" id="password">
     </div>
     <div class="cnt_body1">
     <label for="password2">Passwort: </label><input type="password" name="password2" id="password2">
     </div>
     <div class="cnt_body2">
     <label for="mail">Mail: </label><input type="name" name="mail" maxlength="64" id="mail">
     </div>
     <div class="cnt_foot">
     <input type="submit" name="submit" value="Registrieren">
     </form>
     </div>
    </div>
     
  2. 29. November 2008
    AW: Dynamische Formularprüfung

    Ich bin zwar auf dem Gebiet überhaupt nicht versiert, aber mir stellt sich die Frage, ob es den Server nicht etwas stark belastet, wenn du bei jeder Eingabe im Benutzername-Feld eine Abfrage machst, ob der Benutzername schon existiert. Vor allem bei großen Datenbanken (ich gehe mal davon aus, dass du Mysql benutzt...). Sinnvoller wäre es das mit einem kleinen Button rechts daneben, mit dem man dann checkt, ob der Username vergeben ist oder nicht (und vielleicht noch Vorschläge postet, was man stattdessen nehmen könnte).

    Das mit der Länge sollte relativ einfach zu realisieren sein. Es gibt 3 Funktionen für Tastatur-Events.
    . onkeypress()
    . onkeyup()
    . onkeydown()

    In deinem Input-Feld rufst du sobald z.B. eine Taste gedrückt wird (onkeypress) eine Funktion auf, die checkt, ob das Passwort lang genug ist und dann eben ausgibt: zu kurz/ok.
     
  3. 29. November 2008
    AW: Dynamische Formularprüfung

    onBlur fände ich da besser. Sobald der User das Feld verlässt wird überprüft. Natürlich auch noch bei "obSubmit" beim Formular, d.h. bevor er's bspweise per Enter-Druck absenden will...
     
  4. 29. November 2008
    AW: Dynamische Formularprüfung

    Naja, das war jetzt auch nur ein Beispiel, Usernamen dürfen bei meinem Script sowieso doppelt genutzt werden, da der Login per Mailadresse und PW erfolgt.
    Die Prüfung müsste dann eben bei der Mailadresse erfolgen, da aber dann nur per PHP nach Versenden des Formulars - so muss ich ohnehin alle Eingaben nochmal prüfen, damit das ganze sicher ist.
    Naja, die Befehle guck ich mir später mal genauer an, trotzdem hoffe ich auf weitere Antworten!
     
  5. 29. November 2008
    AW: Dynamische Formularprüfung

    Ich finde beim Passwort ist onkeydown am geeignetsten. Da wird gleich angezeigt, wenn das Passwort lang genug ist, oder eben nicht (bei web.de wirds glaub ich auch so gemacht).

    Ich hab das ganze mal ein wenig getestet (klappt noch nicht perfekt, aber das ist mein allererster Versuch in Javascript xD).

    PHP:
    < html >
    <
    head >
    <
    title ></ title >
    <
    script type = "text/javascript" >
    function 
    CheckLength  ( Laenge ) {
        if(
    Laenge . length > 7 ) {
            
    // Jetzt musst du irgendwie Ausgeben, dass das Passwort lang genug ist.
        
    }
        else {
            
    // Das passiert, wenn das Passwort nicht lang genug ist.
        
    }
    }
    </
    script >
    </
    head >
    <
    body >
    <
    form name = "Formular"  action = ""  method = "" >
    <
    input type = "text"  name = "Password"  onKeyDown = "CheckLength(this.value)"  />
    </
    form >
    </
    body >
    </
    html >
    Okay. Ich habe gleich etwas herausgefunden noch. Wenn man Backspace benutzt bei meinem Beispiel, wird die Funktion aufgerufen noch bevor das Zeichen gelöscht wurde. Das heißt, wenn der String 8 Zeichen lang ist und man Backspace macht, wird der String "als Okay gewertet", obwohl er nur noch 7 Zeichen lang ist.

    Wenn man "onkeyup" verwendet, passiert dieser Fehler nicht.

    Ich habe auch eine Möglichkeit gefunden, wie man neben dem Input-Feld sieht, ob das Passwort zu lang oder zu kurz ist. Ich vermute mal, dass das sehr unschön gelöst ist, aber man kann einfach ein leeres Input daneben setzen (mit CSS schön den Rand weg). Dann setzt man je nachdem, ob der String lang genug ist.

    input.Formularname.Inputfeldname.value = "Lang genug" oder "Zu kurz"

    Vermutlich gibt es sehr viel schönere Lösungen xD
     
  6. 29. November 2008
    AW: Dynamische Formularprüfung

    Stimme Telefonzelle zu. onBlur wäre wohl in Verbindung mit onSubmit das Beste.

    Denn dann werde ich beim schreiben nicht gestört und das Script arbeitet erst wenn ich mit dem Feld fertig bin und es verlasse
     
  7. 29. November 2008
    AW: Dynamische Formularprüfung

    ich glaube du verstehst nicht ganz, was ich meine. Es soll nicht als alert (also son "PopUp") kommen, sondern einfach neben dem eingabefeld stehn.
    Dadurch wird der User nicht gestört, weiß aber gleich bescheid, ohne zu klicken.
     
  8. 29. November 2008
    AW: Dynamische Formularprüfung

    Habe dich schon verstanden

    onKeyDown agiert immer, wenn etwas am input geändert wird, während onBlur nur ausgeführt wird, wenn das Feld verlassen wird. Ist Geschmackssache, was dir besser gefällt kannst du nehmen

    m00pd00ps Lösung sieht schon ordentlich aus
     
  9. 29. November 2008
    AW: Dynamische Formularprüfung

    Tjoa, jetzt is die Frage, wie ichn Text ändern lasse.

    HTML:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function CheckLength (Laenge) {
     if(Laenge.length>7) {
     document.getElementById('foo').innerHtml = 'OK'; 
     }
     else {
     document.getElementById('foo').innerHtml = 'zu kurz'; 
     }
    }
    </script>
    </head>
    <body>
    <form name="Formular" action="" method="">
    <input type="text" name="Password" onKeyUp="CheckLength(this.value)" />
    <span id="foo"></span> 
    </form>
    </body>
    </html> 
    Geht leider so nicht. Weiß da noch jemand Rat?
     
  10. 29. November 2008
    AW: Dynamische Formularprüfung

    innerHTML
    JavaScript ist case sensitive.
     
  11. 29. November 2008
    AW: Dynamische Formularprüfung

    Ja sauber, so funktionierts!
    Ich werd gleich mal selbst gucken, aber evtlö. brauch ich noch Hilfe beim Prüfen der Emailadresse.
     
  12. 29. November 2008
    AW: Dynamische Formularprüfung

    [G]JavaScript eMail Validation[/G]
    [G]JavaScript Search String[/G]

    Oder sonstiges.
     
  13. 2. Dezember 2008
    AW: Dynamische Formularprüfung

    Dein Vorhaben ließe sich übrigens auch wunderbar mit jQuery lösen, falls du darauf zurückgreifen möchtest ...
     
  14. 2. Dezember 2008
    AW: Dynamische Formularprüfung

    achja... bevor es jemand vergisst du sagen: eine formularüberprüfung mittels javascript ist nicht ausreichend!!! immer serverseitig nochmals prüfen!
     
  15. 2. Dezember 2008
    AW: Dynamische Formularprüfung

    Sicherlich eine nette Möglichkeit, für kommerzielle Zwecke (Kann sein, dass ich meine Software irgendwann mal dafür einsetzen möchte) aber wohl nicht von Vorteil.
    Außerdem ist eig. alles was ich so mache als Übung gedacht, daher mach ich sowas noch lieber selbst. Auch das Rumbasteln in Codeschnipseln lehrt, wenn auch nurn Bisschen.
    Trotzdem danke, werd mir das auf jeden Fall später nochmal genauer angucken, vielleicht kann ich da noch bisschen was abgucken.

    Jo, das hatte ich vorher schon fertig. Find so ne JavaScriptprüfung nur benutzerfreundlicher (für diejenigen, die JS aktiviert haben).
     
  16. 2. Dezember 2008
    AW: Dynamische Formularprüfung

    "JavaScriptprüfung"? "Javaprüfung" wäre wieder was anderes. Nur um mal die Begriffe klar zu halten.
     
  17. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.