Question

0

231

Visualizações

Submit button enabled however when user enter input oldpassword it become disabled till reconfirm password how?

I would like to enable submission due to condition while also when the user input in the old password field the button become disable till when the user enter the confirm password input the button become enabled again

Here is my attempt

$('input[name=validationoldpassword]').keyup(function() {
  // not empty button is disable
  if ($(this).val() !== '') {
    $(':button[type="submit"]').prop('disabled', true);

  } else {
    $(':button[type="submit"]').prop('disabled', true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="validationpassword" class="col-form-label oldpasswordadduser">Old<br>&#10;Password:</label>
  <div class="col-6 d-flex">
    <input name="validationoldpassword" type="password" class="form-control oldpass" id="oldpasswords" placeholder="Password">
  </div>
</div>


<div class="form-group row">
  <label for="validationpassword" class="col-form-label passwordadduser">Password:</label>
  <div class="col-6 d-flex">
    <input name="validationpassword" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{7,}$" title="Password should be like this. e.g. A123de!123">


    <div class="form-group row">
      <label for="validationconfirmpassword" class="col-form-label passwordadduser">Re-enter<br>&#10;Password:</label>
      <div class="col-6 d-flex">
        <input name="validationconfirmpassword" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password">
      </div>
    </div>

    <button id="submitbtn" type="submit" class="btn-primary submitbutton">Done</button>

about 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-07-05T06:11:36.149Z

You need to delegate

$('#container').on("input", function() {
  const empty = $('[type=password]').filter(function() {
    return $(this).val().trim() === "";
  }).length > 0
  $(':button[type="submit"]').prop('disabled', empty);
}).trigger("input")

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="form-group row">
    <label for="validationpassword" class="col-form-label oldpasswordadduser">Old<br>&#10;Password:</label>
    <div class="col-6 d-flex">
      <input name="validationoldpassword" type="password" class="form-control oldpass" id="oldpasswords" placeholder="Password">
    </div>
  </div>


  <div class="form-group row">
    <label for="validationpassword" class="col-form-label passwordadduser">Password:</label>
    <div class="col-6 d-flex">
      <input name="validationpassword" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{7,}$" title="Password should be like this. e.g. A123de!123">


      <div class="form-group row">
        <label for="validationconfirmpassword" class="col-form-label passwordadduser">Re-enter<br>&#10;Password:</label>
        <div class="col-6 d-flex">
          <input name="validationconfirmpassword" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password">
        </div>
      </div>

      <button id="submitbtn" type="submit" class="btn-primary submitbutton">Done</button>
    </div>

0

231

Submit button enabled however when user enter input oldpassword it become disabled till reconfirm password how?

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT