show/hide green tick upon input field change

Question

I wont put the whole code, since i think it doesnt matter, because the problem is js related. I have a form and input fields(2 password fields). With css i made a "green tick" next to these fields. I want these green ticks to appear when BOTH fields are equal, and re-appear when i delete one "character" from one of the fields - when they are not equal.

pswd1/pswd2 - my input pass fields

I want the green ticks to show when they are equal and when the length of the second field(the confirmation one) is greater than 6

$('#pswd1').on('change', function(){
   pass = $('#pswd1').val();
   pass1 = $("#pswd2").val();
   if(pass = pass1 && pass1.length > 6){
       $("#gtick1").show();``
       $("#gtick2").show();
     }
});

Answer 1

pass = pass1

should be

pass === pass1

You have some wild `` in there too. Throw a console.log('hi') in at the top to make sure the code is actually being run and you should be gucci.

Answer 2

you can play around this code. Though it's not exactly what you want but it will serve your purpose

 $('#pswd1, #pswd2').on('keyup', function(){ pass1 = $('#pswd1').val(); pass2 = $("#pswd2").val(); if(pass1 === pass2){ $("#passDiv1").css("background-color", "green"); $("#passDiv2").css("background-color", "green"); }else{ $("#passDiv1").css("background-color", "yellow"); $("#passDiv2").css("background-color", "yellow"); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="passDiv1" style="padding: 5px"> <input id="pswd1" type="password"/> </div> <div id="passDiv2" style="padding: 5px"> <input id="pswd2" type="password"/> </div> 

Answer 3

By using = , you are assigning the value from one variable to another inside the condition, to compare you should use == or === . Also I will prefer input event instead of change here.

Try the following way:

 $('#pswd1, #pswd2').on('input', function(){ var pass = $('#pswd1').val(); var pass1 = $("#pswd2").val(); if(pass == pass1 && pass1.length > 6){ $("#gtick1, #gtick2").show(); } else{ $("#gtick1, #gtick2").hide(); } }); 

 span{ color: green; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="password" id="pswd1"> <span id="gtick1">✔</span><br> <input type="password" id="pswd2"> <span id="gtick2">✔</span>