2016-04-04 2 views
0

Ich habe ein Formularfeld, wo Feedback an den Benutzer zur Verfügung gestellt wird, füllen Sie es aus. Zum Beispiel eine Längenanforderung von iMinLength oder mehr Zeichen.JS, wie Logik für die Feldüberprüfung auf der Grundlage von eingegebenen Zeichen erfasst und dann gelöscht

Am Anfang der Benutzereingabe möchte ich keine Fehlermeldung auslösen, weil sie wahrscheinlich noch tippen.

Wie kann ich nur eine Länge Validierung Nachricht anzeigen, wenn sie die erforderlichen 6 Zeichen eingegeben und dann einige gelöscht haben, so dass die Länge jetzt weniger als 6 Zeichen ist?

Hier ist ein Modell der Logik, die ich habe, es tut alles, was ich brauche außer den Teil, den ich oben erwähnt habe.

Wie kann ich es so einstellen, dass es sich wie oben beschrieben verhält? Ich möchte im Grunde dieser Teil während der Eingabe auszuführen (zB input feuert), wenn der Benutzer 6 eingegeben hatte oder mehr Zeichen zuerst, dann ging auf weniger als 6.

$('#sNewPasswordResult').html('<span style="color:red;">Password must be at least 6 characters</span>');

Hier ist die vollständige Brocken so weit:

$(document).on('input blur', '#sSignUpPassword', function (e) { 

if ($('#sSignUpPassword').val().length > iMinLength) { 

    $('#sNewPasswordResult').html("Password: <i class='fa fa-fw fa-check' style='color:#339933'>"); 
    $('#sSignUpPassword').css("border", "1px solid green"); 
} 
else {  
    if (e.type == 'focusout') { //only for leaving the form field 

     $('#sNewPasswordResult').html('<span style="color:red;">Password must be at least 6 characters</span>'); 
     $('#sSignUpPassword').css("border", "1px solid red"); 
    } 

}; 
}); 

Antwort

1

ich löste das Problem, indem ein Flag zu schaffen zu steuern, wenn der Benutzer die Mindest Zeichen erreicht, dann zeige ich den Fehler, wenn der Benutzer, bis die minimale Zeichen löschen, wie folgt aus:

$("#passwd").keyup(function() { 
    var $passwd = $(this); 

    if ($passwd.val().length >= 6) { 
     $passwd.data("reach-typing", true); 
    } 
    }); 
    $("#passwd").blur(function() { 
    var $passwd = $(this); 

    if ($passwd.val().length < 6 && $passwd.data("reach-typing") === true) { 
     $("#errorLength").show(); 
    } else { 
     $("#errorLength").hide(); 
    } 
    }); 

Plunker: https://plnkr.co/edit/zt9HLg?p=preview

Verwandte Themen