2017-08-07 29 views
0

パスワード確認入力の色をユーザーが入力するときに変更しようとしています。一致する場合は境界線が緑色になり、一致しない場合は赤色になります。ここでユーザーの入力時に入力のクラスを変更するにはどうすればよいですか?

はjQueryのです:

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

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

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

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> 

とCSS:

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

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

私も最初、次のjQueryを試してみたが、それは見えました少し長めの仕事:

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

    } 

}); 

私は.keyup(),.keydown(),.keypress(),.change()を試してみましたが、すべてのクラス、ID、変数の名前が変更されましたが、成功しませんでした。これは別の.jsファイルにあり、私は$(document).ready()の有無にかかわらず試してみましたが動作しません。私は.addClass.removeClassではなく、.css()を使ってみました。

ご協力いただければ幸いです!ここで

+0

最初の例でキーを押すたびに「confirmPass」値を取得して実際の値を取得してはいけませんか? –

+0

onInputイベントで試してください –

+0

提案:1)あなたは "addClass"で間違って "間違っている"と綴りました。 2)これに関する助けが必要な場合は、JSFiddleなどを作成することをお勧めします。 –

答えて

1

はそれを動作させるだろうという固定Javascriptのである:ここでは

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

は事前に働いていなかったものです:コードconfirmPass.addClass("inputCorrect")を実行すると

  • 、あなたはクラスを追加しました整数値に変換する。
  • javascriptでは、クラス 'inputCorrect'と 'inputIncorrect'を追加しましたが、CSSでは 'passCorrect'と 'passIncorrect'というクラスを参照します。
  • ユーザーがキーを押すたびにcreatePassとconfirmPassの値を取得する必要があります。そうしないと、最初に宣言した2つの変数には常に2つの入力の初期値が格納されます。
  • ユーザーがキーを押すたびに入力クラスを削除する必要があります。そうしないと、両方のクラスが入力に適用されます。
+1

ほぼ'passCorrect'を追加する前に 'passIncorrect'クラスを削除する必要があります。実際には、サイクルごとに 'passIncorrect'クラスを削除し、条件が満たされたときにクラスを再度追加することをお勧めします。 – Gerard

+0

これを指摘していただきありがとうございます!ちょうどそれを固定:) –

+1

ありがとうアッシャー! それは私のウェブサイトでは機能しませんが、まさに私が欲しいものをフィドルでやっています。 JavaScriptやJQueryを使って簡単なテストが行​​われていないので、間違っているかもしれないと思います。私は少し深く掘る必要がありますが、それがすべて修正されたら、私は間違いなくこのスニペットを使用しています。 –

関連する問題