Carmen: jQuery: Auf Passwortlänge prüfen

Servus,

ist es mit jQuery - dieses habe ich bereits im Einsatz - möglich zu prüfen ob ein Passwort mindestens 6 Zeichen hat? Erst dann sollte mein Submit-Button klickbar sein.

<div>
  <label for="passwort">Passwort</label>
  <input type="password" name="passwort" id="passwort" value="" required />
</div>

<input type="submit" name="registrieren" value="Registrieren" id="registrieren">
  1. Tach!

    ist es mit jQuery - dieses habe ich bereits im Einsatz - möglich zu prüfen ob ein Passwort mindestens 6 Zeichen hat? Erst dann sollte mein Submit-Button klickbar sein.

    jQuery hilft dabei nur, mit den Elementen zu agieren. Die Längenprüfung selbst kann mit einfachem Javascript erledigt werden. Jeder String hat eine length-Eigenschaft und die kann man in der if-Bedingung verwenden: passwordVariable.length >= 6

    dedlfix.

    1. Servus,

      Jeder String hat eine length-Eigenschaft und die kann man in der if-Bedingung verwenden: passwordVariable.length >= 6

      danke. Hab es so umgesetzt

      $('input[type="submit"]').prop('disabled', true);
       
      $('input[type="password"]').keyup(function() {
          if($(this).val().length  >= 6) {
             $('input[type="submit"]').prop('disabled', false);
          }
      });
      

      Wenn man am oben genannten Code noch etwas verbessern kann ruhig sagen. Ich bin für jeden Hinweis dankbar.

      1. Kleines Update: Mir ist aufgefallen wenn ein User sein Passwort löscht konnte er den Button dennoch betätigen.

        Dieses habe ich so gelöst

        $('input[type="submit"]').prop('disabled', true);
            
            $('input[type="password"]').keyup(function() {
                if($(this).val().length  >= 6) {
                   $('input[type="submit"]').prop('disabled', false);
                }
                if($(this).val().length  <= 6) {
                   $('input[type="submit"]').prop('disabled', true);
                } 
             });
        
        1. Hallo Rainer B.,

          Kleines Update: Mir ist aufgefallen wenn ein User sein Passwort löscht konnte er den Button dennoch betätigen.

          Da JavaScript im Browser läuft, kann ein technisch versierter Benutzer beliebige Manipulationen vornehmen. Du musst also die Eingaben in jedem Fall serverseitig prüfen. Die clientseitige Prüfung ist lediglich eine Erhöhung des Komforts, damit der Nutzer nicht auf die Antwort vom Server warten muss.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        2. Die untere Bedingung kannst du weglassen und einfach durch ein else ersetzen. Und du musst dir halt bewusst sein, dass deine Lösung bei jedem Passwortfeld alle Submitfelder deaktivierst. Falls du später einmal ein Registrierungsformular auf der selben Seite haben möchtest, kann dies negative Auswirkungen haben. Arbeite besser mit spezifischen IDs für die Elemente.

          LG andaris

          1. Die untere Bedingung kannst du weglassen und einfach durch ein else ersetzen.

            Nein, denn dann hat er ja den interessanten Effekt nicht, der bei der Passwortlänge 6 auftritt: erst den Button kurz anmachen und dann schnell wieder aus!

            1. @@Nomo der Ator

              Die untere Bedingung kannst du weglassen und einfach durch ein else ersetzen.

              Nein, denn dann hat er ja den interessanten Effekt nicht, der bei der Passwortlänge 6 auftritt: erst den Button kurz anmachen und dann schnell wieder aus!

              Es ist hier wohl angebracht zu erwähnen, dass du ein Blitzmerker bist! ⚡️

              LLAP 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
        3.     $('input[type="password"]').keyup(function() {
                  if($(this).val().length  >= 6) {
                     $('input[type="submit"]').prop('disabled', false);
                  }
                  if($(this).val().length  <= 6) {
                     $('input[type="submit"]').prop('disabled', true);
                  } 
               });
          

          Mal abgesehen davon, dass die beiden IFs sich für length=6 beißen (was aber optisch egal ist, weil der Browser ohnehin erst rendert wenn das JS durch ist), scheinen viele Leute nicht zu wissen, dass Vergleichsoperatoren boolesche Werte liefern. Wie oft habe ich schon Code gesehen wie

            if (deepThought == 42)
              antwort = true;
            else
              antwort = false;
          

          Manche sind stolz, dass sie diesen Codeklumpen durch einen ternären Operator „verbessern“ können:

            antwort = (deepThought == 42) ? true : false;
          

          Aber wenn man ihnen dann das hier zeigt:

            antwort = deepThought == 42;
          

          geraten sie in Verwirrung.

          Im konkreten Fall würde eine verbesserte keyup function so aussehen:

             $('input[type="password"]').keyup(function() {
                $('input[type="submit"]').prop('disabled', $(this).val().length  < 6);
             });
          
          1. Hallo Rolf b,

              if (deepThought == 42)
                antwort = true;
              else
                antwort = false;
            

            Manche sind stolz, dass sie diesen Codeklumpen durch einen ternären Operator „verbessern“ können:

              antwort = (deepThought == 42) ? true : false;
            

            Aber wenn man ihnen dann das hier zeigt:

              antwort = deepThought == 42;
            

            geraten sie in Verwirrung.

            Zu Recht. Die Verkürzung des Codes und Erhöhung der Abarbeitungsgeschwindigkeit geht zu Lasten der Lesbarkeit. Programmierer sollten aber dadurch nicht zu oft in Verwirrung geraten. Hinzu kommt noch, dass die Ausführungsreihenfolge keineswegs intuitiv ist.

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            1. Na, dann eben so: :)

                 antwort = (deepThought == 42);
              
            2. @@Matthias Apsel

              Aber wenn man ihnen dann das hier zeigt:

                antwort = deepThought == 42;
              

              geraten sie in Verwirrung.

              Zu Recht.

              Njein.

              Die Verkürzung des Codes und Erhöhung der Abarbeitungsgeschwindigkeit geht zu Lasten der Lesbarkeit.

              Njein. Ich würde aber Klammern setzen – wie Rolf schon gezeigt hat.

              Dann ist der Code lesbar und drückt genau das aus, was er soll. Verlängerung des Codes geht zu Lasten der Lesbarkeit.

              LLAP 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
            3. Hallo

                if (deepThought == 42)
                  antwort = true;
                else
                  antwort = false;
              

              Manche sind stolz, dass sie diesen Codeklumpen durch einen ternären Operator „verbessern“ können:

                antwort = (deepThought == 42) ? true : false;
              

              Aber wenn man ihnen dann das hier zeigt:

                antwort = deepThought == 42;
              

              geraten sie in Verwirrung.

              Zu Recht. Die Verkürzung des Codes und Erhöhung der Abarbeitungsgeschwindigkeit geht zu Lasten der Lesbarkeit. Programmierer sollten aber dadurch nicht zu oft in Verwirrung geraten. Hinzu kommt noch, dass die Ausführungsreihenfolge keineswegs intuitiv ist.

              hierzu etwas historisches: Die Entstehungsgeschichte von C

              Zitat hieraus:

              „Wir hörten auf, als es uns gelang, den Ausdruck

              for(;P("\n"),R--;P("|"))for(e=C;e--;P("_"+(*u++/8)%2))P("| "+(*u/4)%2);	
              

              fehlerfrei zu compilieren.“

              Gruß
              Jürgen

              1. Hallo JürgenB,

                hierzu etwas historisches: Die Entstehungsgeschichte von C

                Zitat hieraus:

                „Wir hörten auf, als es uns gelang, den Ausdruck

                for(;P("\n"),R--;P("|"))for(e=C;e--;P("_"+(*u++/8)%2))P("| "+(*u/4)%2);	
                

                fehlerfrei zu compilieren.“

                Wirklich nett. Und auf derselben Seite: Die 11 häufigsten Aussagen, die man von einem klingonischen Softwareentwickler hört:

                7. Klingonische Funktionsaufrufe haben keine 'Parameter' - sie haben 'Argumente' - wage nicht zu widersprechen.

                Bis demnächst
                Matthias

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  2. @@Carmen

    ist es mit jQuery - dieses habe ich bereits im Einsatz - möglich zu prüfen ob ein Passwort mindestens 6 Zeichen hat?

    Es ist auch ohne jQuery möglich.[1] Sogar ohne JavaScript. Einfach nur mit HTML: required und minlength-Attribut.

    Erst dann sollte mein Submit-Button klickbar sein.

    Hält sich Safari eigentlich inzwischen daran, invalide Formulardaten nicht abzuschicken?

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe

    1. in vernünftigen Browsern. Andere sollten egal sein, serverseitig muss sowieso geprüft werden. ↩︎

    1. Wird dadurch der Submit-Button disabled? Ich dachte, dann gips bei Klick auf Submit „nur“ eine Fehlermeldung.

      1. @@Rolf b

        Wird dadurch der Submit-Button disabled? Ich dachte, dann gips bei Klick auf Submit „nur“ eine Fehlermeldung.

        Das Formular wird von HTML5-konformen Browsern nicht abgeschickt. Der Button ist also außer Funktion gesetzt (disabled).

        Den Button auch als „außer Funktion gesetzt“ darzustellen, ist Sache von CSS: form:invalid button kann man ja selektieren bzw. bei Bedarf form:invalid button:not([type]), form:invalid button[type="submit"].

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
    2. Hält sich Safari eigentlich inzwischen daran, invalide Formulardaten nicht abzuschicken?

      https://webkit.org/blog/7099/html-interactive-form-validation/

  3. Servus,

    ist es mit jQuery - dieses habe ich bereits im Einsatz - möglich zu prüfen ob ein Passwort mindestens 6 Zeichen hat?

    Warum nicht gleich WWW-Authenticate via Ajax?

    MfG