javascript - How to enable and disable a submit button based on if passwords are matching? - Stack Overflow

admin管理员组

文章数量:1434774

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='.2.1/jquery.min.js'>
</script>
<script src='/[email protected]/dist/jquery.validate.js'></script>
<script src=".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>

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./ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='https://cdn.jsdelivr/npm/[email protected]/dist/jquery.validate.js'></script>
<script src="https://cdn.jsdelivr/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>

• javascript
• jquery
• forms

Share Improve this question Follow edited Dec 2, 2017 at 4:15 Angel Politis 11.3k1515 gold badges5050 silver badges6767 bronze badges asked Dec 2, 2017 at 3:45 BrehmlyBrehmly 3511 silver badge44 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Your code doesn't work for two reasons:

1. 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.

2. 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./ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='//cdn.jsdelivr/npm/[email protected]/dist/jquery.validate.js'>
</script>
<script src="//cdn.jsdelivr/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.

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

本文标签： javascriptHow to enable and disable a submit button based on if passwords are matchingStack Overflow