Categories
AJAX Bootstrap CSS Development Google Java Javascript jQuery PHP

javascript bootstrap 4 validation with password confirmation

In a simple form there are 3 input fields with regex pattern in each.
Two of them (‘Password’ and ‘Confirm Password’) must match. If the don’t, a message “Not Matching” is displayed. If they do, “Valid” is displayed.

How can I (via the javascript) force the Bootstrap 4 validation’s red border and ‘X’ icon to be displayed in the following case :

Entering ‘aa’ in the ‘Password’ field (it matches the regex hence the valid green border and V icon).
Entering ‘aa’ in the ‘Confirm Password’ field (it matches the regex hence the valid green border and V icon).
Now I add another character to ‘Confirm Password’ and it immediately displays “Not Matching”, but since it’s ok according to the regex – it is still green with a ‘V’ icon.

I need to force the red border and ‘X’ icon when this happens.

My code :

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    input[type="submit"]:disabled {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container mt-2">
    <div class="row">
      <div class="col-md-4 offset-md-4">
        <form action="page2.php" id="myForm1" class="needs-validation" novalidate>
          <div class="form-group">
            Field1<input type="text" class="form-control" pattern="^[a-z]{2,4}$" required autofocus>
            <div class="valid-feedback">Valid</div>
            <div class="invalid-feedback">a to z only (2 to 4 long)</div>
          </div>
          <div class="form-group">
            Password<input type="text" id="pwdId" class="form-control" pattern="^[a-z]{2,4}$" required>
            <div class="valid-feedback">Valid</div>
            <div class="invalid-feedback">a to z only (2 to 4 long)</div>
          </div>
          <div class="form-group">
            Confirm Password<input type="text" id="cPwdId" class="form-control" pattern="^[a-z]{2,4}$" required>
            <div id="cPwdValid" class="valid-feedback">Valid</div>
            <div id="cPwdInvalid" class="invalid-feedback">a to z only (2 to 4 long)</div>
          </div>
          <div class="form-group">
            <button id="submitBtn" type="submit" class="btn btn-primary submit-button" disabled>Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function(){
      // Check if passwords match
      $('#pwdId, #cPwdId').on('keyup', function () {
        if ($('#pwdId').val() != '' && $('#cPwdId').val() != '' && $('#pwdId').val() == $('#cPwdId').val()) {
          $("#submitBtn").attr("disabled",false);
          $('#cPwdValid').show();
          $('#cPwdInvalid').hide();
          $('#cPwdValid').html('Valid').css('color', 'green');
        } else {
          $("#submitBtn").attr("disabled",true);
          $('#cPwdValid').hide();
          $('#cPwdInvalid').show();
          $('#cPwdInvalid').html('Not Matching').css('color', 'red');
          }
        });
      let currForm1 = document.getElementById('myForm1');
        // Validate on submit:
        currForm1.addEventListener('submit', function(event) {
          if (currForm1.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          currForm1.classList.add('was-validated');
        }, false);
        // Validate on input:
        currForm1.querySelectorAll('.form-control').forEach(input => {
          input.addEventListener(('input'), () => {
            if (input.checkValidity()) {
              input.classList.remove('is-invalid')
              input.classList.add('is-valid');
            } else {
              input.classList.remove('is-valid')
              input.classList.add('is-invalid');
            }
            var is_valid = $('.form-control').length === $('.form-control.is-valid').length;
            $("#submitBtn").attr("disabled", !is_valid);
          });
        });
      });
    </script>

Thank you!

Leave an answer

Your email address will not be published. Required fields are marked *