Wie würde ich die Klasse einer Eingabe ändern, wenn der Benutzer eingibt?

Question

Ich versuche, die Farbe einer Passwortbestätigungseingabe zu ändern, wenn der Benutzer darin eingibt. Wenn es übereinstimmt, wird der Rand grün, wenn nicht, wird er rot. Hier

ist die JQuery:

var createPass = $("#createPass").val(); 
var confirmPass = $("#confirmPass").val(); 

$("#confirmPass").keydown(function() { 

    if(confirmPass == createPass && confirmPass != "") { 
     confirmPass.addClass("inputCorrect") 
    } else { 
     confirmPass.addClass("inputIncorect"); 
    } 
}); 

Die html:

<label for="passWord">Create Password</label> 
<input type="password" id="createPass" name="passWord" class="inputBox" placeholder="Minimum 8 characters" required><br> 

<label>Confirm Password</label> 
<input type="password" id="confirmPass" class="inputBox" required> 

Und die CSS:

input.passCorrect { 
    border: 1px solid #00cc00; 
} 

input.passIncorrect { 
    border: 1px solid #ff0000; 
} 

Ich habe auch versucht, die folgende JQuery ersten, aber es schien, ein bisschen lang für den Job:

$("input[id=confirmPass").keyup(function() { 

    if ($("input[id=confirmPass]").val() == $("input[id=createPass]").val()) { 

     ($("input[id=confirmPass]").removeClass("passIncorrect")); 
     ($("input[id=confirmPass]").addClass("passCorrect")); 

    } 

    if ($("input[id=confirmPass]").val() != $("input[id=createPass]").val() && ($("input[id=confirmPass]") != "")) { 

     ($("input[id=confirmPass]").removeClass("passCorrect")); 
     ($("input[id=confirmPass]").addClass("passIncorrect")); 

    } 

}); 

Ich habe versucht mit .keyup(), .keydown(), .keypress(), .change(), und habe fast jede Klasse, ID und Variable umbenannt, aber ich hatte keinen Erfolg! Es ist in einer separaten .js Datei, und ich habe es mit und ohne $(document).ready() versucht und es funktioniert nicht. Ich habe auch versucht, .css() im Gegensatz zu .addClass und .removeClass zu verwenden.

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Hier ist die feste Javascript, die es funktioniert werden:

var createPass = $("#createPass"); 
var confirmPass = $("#confirmPass"); 

confirmPass.keydown(function() { 
    // Remove both classes 
    confirmPass.removeClass("passCorrect passIncorrect"); 

    // Add the appropriate class 
    if (confirmPass.val() == createPass.val() && confirmPass.val() != "") { 
     confirmPass.addClass("passCorrect"); 
    } else { 
     confirmPass.addClass("passIncorrect"); 
    } 
}); 

Hier sind die Dinge, die nicht vorher gearbeitet hatten:

• Wenn die Ausführung von Code confirmPass.addClass("inputCorrect"), fügen Sie eine Klasse zu einem ganzzahligen Wert.
• In Ihrem Javascript haben Sie die Klassen 'inputCorrect' und 'inputIncorrect' hinzugefügt, aber in Ihrem CSS verweisen Sie auf die Klassen 'passCorrect' und 'passIncorrect'.
• Sie müssen den Wert von createPass und confirmPass jedes Mal abrufen, wenn der Benutzer eine Taste drückt, sonst enthalten die beiden Variablen, die Sie am Anfang deklarieren, immer den Anfangswert der beiden Eingaben.
• Sie müssen die Klasse der Eingabe jedes Mal entfernen, wenn der Benutzer eine Taste drückt, sonst werden beide Klassen auf die Eingabe angewendet.