onchange同様のパスワードを確認します

Question

私はパスワードを確認するための小さなフィールドを作成しましたが、パスワードを確認する際に似ているかどうかを確認する必要があります。パスワードが似ているかどうかを確認する必要があります。これでお願いします。

マイコード：

function ppd() { 
 
    var password = $("#password").val(); 
 
    var confirm_password = $("#confirm").val(); 
 

 
    if (password != confirm_password) { 
 
    $("#confirm").css('border-color', "#c80000"); 
 
    $("#textboxid").css({ 
 
     "background-color": "#fee2e2" 
 
    }); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <input type="password" id="password" name="" placeholder="Password" class="form-control" /> 
 
</div> 
 

 
<div class="form-group"> 
 
    <input type="password" id="confirm" onChange="ppd();" name="" placeholder="Confirm Password" class="form-control" /> 
 
</div>

jQueryフィドルHere

Answer 1

あなたは文字がフォームフィールドに入力された後handler.Theイベントがトリガされonkeyupイベントをトリガする必要があります。

ここに解決策があります。

document.getElementById('confirm').onkeyup=function(){ 
 
    var password = $("#password").val(); 
 
\t var confirm_password = $("#confirm").val(); 
 
\t if(password != confirm_password) { 
 
      $("#confirm").css('border-color', "red"); 
 
\t } 
 
     else{ 
 
      $("#confirm").css('border-color', "green"); 
 
     } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <input type="password" id="password" name="" placeholder="Password" class="form-control" /> 
 
</div> 
 
\t \t \t \t \t \t 
 
<div class="form-group"> 
 
\t <input type="password" id="confirm" name="" placeholder="Confirm Password" class="form-control" /> 
 
</div>

別の解決策は、oninput方法を使用することです。

document.getElementById('confirm').oninput=function(){ 
    //code here 
} 

Answer 2

あなたのコードを確認しました。このIDでdivにしていないので、lastlineを除いて何も間違っていません。

$("#textboxid").css({"background-color": "#fee2e2"}); 

あなたのコードは間違いなく、このシナリオではonchangeを使用するのがよいです。ここではonchangeがどのように機能するかを理解するだけです。 onchangeイベントは、要素がフォーカスを失ったときに発生し、要素に最後にフォーカスが当たってから内容が変更されたときに発生します。

私は何が間違っているのか分からず、jqueryファイルが動作していない可能性があります。 このコードは機能しています。

<div class="form-group"> 
         <input type="password" id="password" name="" placeholder="Password" class="form-control" /> 
        </div> 

        <div class="form-group"> 
         <input type="password" id="confirm" onChange="ppd();" name="" placeholder="Confirm Password" class="form-control" /> 
        </div> 

Javascriptを

function ppd(){ 
var password   = $("#password").val(); 
var confirm_password = $("#confirm").val(); 

if(password != confirm_password) { 
    $("#confirm").css({'border-color': "#c33"}); 
    $("#password").css({"background-color": "red"}); 

}}

私はあなたの独自のコードと私のcodepenのリンクを与えます。 check here