Password confirmation message

Question

On my form i have two textbox name password and confirm password its working, Now my problem is when i type some sample password in the two textbox and delete it the message password match is still visible, Is there a way the message will show up if the user enter some text or number and if the user delete what he type on the textbox the message would not be visible and also the button is disable if the password not match ? Advanced Thanks.

here is my sample code:

<div class="row">
        <div class="col-md-6">
            <!-- Material input -->
            <div class="md-form mt-0">
                <input type="text" class="form-control" placeholder="Password" name="password" id="password" onkeyup='check();' required >
                 <div class="invalid-feedback">
       Enter password.     
       </div>

            </div>
        </div>

  <div class="col-md-6">
            <!-- Material input -->
            <div class="md-form mt-0">
                <input type="text" class="form-control" placeholder="Confirm Password" name="password" id="password1" onkeyup='check();' required >
           </div>
           <div style="margin-top:-20px; font-size:13px;">
            <span id='message'></span>
            </div>
        </div>
    </div>

here is my jquery:

$('#password, #password1').on('keyup', function () {
  if ($('#password').val() == $('#password1').val()) {
    $('#message').html('Password Match').css('color', 'green');
  } else 
    $('#message').html('Password not Match').css('color', 'red');
});

Current output

Answer 1

You are not checking if the value of the fields are empty, so the empty string is equal the other empty string.

$('#password, #password1').on('keyup', function () {
  if (!$('#password').val()) {
    $('#message').html('');
  } else {
      if ($('#password').val() == $('#password1').val()) {
        $('#message').html('Password Match').css('color', 'green');
      } else {
        $('#message').html('Password not Match').css('color', 'red');
    }
  }
});

https://jsfiddle.net/xpvt214o/492802/

Answer 2

This is how you can do it by checking value of both passwords first -

 $('#password, #password1').on('keyup', function() { if ($('#password').val() || $('#password').val()) { if ($('#password').val() == $('#password1').val()) { $('#message').html('Password Match').css('color', 'green'); } else { $('#message').html('Password not Match').css('color', 'red'); } } else { $('#message').html(''); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-6"> <!-- Material input --> <div class="md-form mt-0"> <input type="text" class="form-control" placeholder="Password" name="password" id="password" required> <div class="invalid-feedback"> Enter password. </div> </div> </div> <div class="col-md-6"> <!-- Material input --> <div class="md-form mt-0"> <input type="text" class="form-control" placeholder="Confirm Password" name="password" id="password1" required> </div> <div style="margin-top:0px; font-size:13px;"> <span id='message'></span> </div> </div> </div>