jQuery: Auf Passwortlänge prüfen

[Carmen]

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">

[dedlfix]

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.

[Carmen]

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.

[Rainer B.]

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);
        } 
     });

[Matthias Apsel]

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

[andaris]

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

[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!

[Gunnar Bittersmann]

@@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 🖖

[Rolf b]

    $('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);
   });

[Matthias Apsel]

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

[Rolf b]

Na, dann eben so: :)

   antwort = (deepThought == 42);

[Gunnar Bittersmann]

@@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 🖖

[JürgenB]

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

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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 🖖

---

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

[Rolf b]

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

[Gunnar Bittersmann]

@@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 🖖

[Linksetzer]

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

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

[pl]

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