How to enable and disable a submit button based on if passwords are matching?

Question

I am creating a form where the user will register for a website and in that form there are two input fields to help confirm the users password. I am trying to disable the submit button when the passwords are not matching and then reenable it when the passwords do match. I currently have the disable part working but I cannot reenable it.

I have tried looking at this post how to check confirm password field in form without reloading page but I couldn't figure out what I needed to do beyond what I currently have.

Code:

<form id="myform" action="process_registration.php" class="basic-grey" method="post">
  <div>
    <label for="firstName" id="firstName">* First Name:</label>
    <input type="text" name="firstName" id="firstName" minlength=1 required />
  </div>

  <div>
    <label for="lastName" id="lastName">* Last Name:</label>
    <input type="text" name="lastName" id="lastName" minlength=1 required />
  </div>

  <div>
    <label for="email" id="email">* Email:</label>
    <input type="email" name="email" id="email" minlength=1 required />
  </div>

  <div>
    <label for="username" id="usernameLabel">* Username:</label>
    <input type="text" name="username" id="username" minlength=1 required />
  </div>

  <div>
    <label for="password" id="passwordLabel">* Password:</label>
    <input type="password" name="password" id="password" minlength=1 required />
  </div>

  <div>
    <label for="passwordConfirm" id="passwordLabelConfirm">* Password Confirmation:</label>
    <input type="password" name="passwordConfirm" id="passwordConfirm" minlength=1 required />
    <span id="message"></span>
  </div>

  <div>
    <input id="submit" type="submit" name="submit" value="Submit" />
  </div>

</form>

<?php include ABSOLUTE_PATH . '_includes/footer.inc.php'; ?>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js'></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script>
  $('form').validate();
</script>

<script>
  $('#password, #passwordConfirm').on('keyup', function() {
    if ($('#password').val() == $('#passwordConfirm').val()) {
      $('#message').html('Matching').css('color', 'green');
      $('submit').prop('disabled', false);
    } else
      $('#message').html('Not Matching').css('color', 'red');
    $('submit').prop('disabled', true);
  });
</script>

Angel Politis · Accepted Answer · 2017-12-02T04:20:15.413

Your code doesn't work for two reasons:

Because you're using $('submit') instead of $('#submit'). You're mistakenly using submit as though it were the tagname rather than the id of the button.
Because, the else part of your if statement, where the code to re-enable the button is located has no braces {} and thus only executes the first instruction. The second one is considered to be outside the if statement and it's executed always last, thus keeping the button permanently disabled.

Snippet:
_{(only kept the code essential for demonstration)}

/* --- JavaScript --- */
$('form').validate();

$('#password, #passwordConfirm').on('keyup', function() {
  if ($('#password').val() == $('#passwordConfirm').val()) {
    $('#message').html('Matching').css('color', 'green');
    $('#submit').prop('disabled', false);
  } else {
    $('#message').html('Not Matching').css('color', 'red');
    $('#submit').prop('disabled', true);
  }
});

<!--- HTML --->
<form id="myform" action="process_registration.php" class="basic-grey" method="post">
  <div>
    <label for="password" id="passwordLabel">* Password:</label>
    <input type="password" name="password" id="password" minlength=1 required />
  </div>
  <div>
    <label for="passwordConfirm" id="passwordLabelConfirm">*
      Password Confirmation:</label>
    <input type="password" name="passwordConfirm" id="passwordConfirm"
      minlength=1 required />
    <span id="message"></span>
  </div>
  <div>
    <input id="submit" type="submit" name="submit" value="Submit" />
  </div>
</form>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='//cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js'>
</script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js">
</script>

Note: In the answer of the question you linked the code works, because there is only one instruction following else, whereas you have two.

Thank you for this solution! Unfortunately, after pressing refresh the script doesn't see the differences in the form fields and I can submit the form even if fields don't match. Is there a way to retain "Not matching" status after reload, if the fields don't match? — Uldis, Nov 21 '19 at 18:06
You can simply re-run the event handler during the `load` event of the document. — Angel Politis, Nov 21 '19 at 20:02
This is something I won't know how to do, but will at least know in which direction to look now. — Uldis, Nov 22 '19 at 11:23

score 0 · Answer 2 · answered Mar 10 '21 at 08:01

I found out actually that it doesn't always work. Therefor I added a return false to the script.

$('#user_password, #user_password_retype').on('keyup', function () {
  if ($('#user_password').val() == $('#user_password_retype').val()) {
     $('#message').html('Matching').css('color', 'green');
     $("#savebutton").prop('disabled', false);
     return true;
  } else 
     $('#message').html('Not Matching').css('color', 'red');
     $("#savebutton").prop('disabled',true);
     return false;
  });

How to enable and disable a submit button based on if passwords are matching?

2 Answers2