bootstrap 4 验证密码确认并提交禁用，直到表单验证（注册表）

Question

在一个简单的表单中，有 3 个输入字段，每个字段都带有正则表达式模式。
其中两个（'Password' 和 'Confirm Password'）必须匹配。如果不这样做，将显示消息 "Not Matching"。如果是，则显示 "Valid"。

如何（通过 javascript）在以下情况下强制显示 Bootstrap 4 验证的红色边框和 'X' 图标：

在 'Password' 字段中输入 'aa'（它与正则表达式匹配，因此具有有效的绿色边框和 V 图标）。
在 'Confirm Password' 字段中输入 'aa'（它与正则表达式匹配，因此具有有效的绿色边框和 V 图标）。
现在我将另一个字符添加到 'Confirm Password'，它会立即显示 "Not Matching"，但是根据正则表达式它没问题 - 它仍然是绿色的并带有 'V' 图标。

发生这种情况时，我需要强制使用红色边框和 'X' 图标。

我的代码：

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

谢谢！

Answer 1

您不能根据需要在两个密码输入上切换 is-invalid class 吗？

 $('#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');
          $('.pwds').removeClass('is-invalid')
        } else {
          $("#submitBtn").attr("disabled",true);
          $('#cPwdValid').hide();
          $('#cPwdInvalid').show();
          $('#cPwdInvalid').html('Not Matching').css('color', 'red');
          $('.pwds').addClass('is-invalid')
        }
 });

 <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 pwds" 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 pwds" 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>

演示：https://www.codeply.com/p/AQBzIBAsZl

Answer 2

在@Zim 的帮助下，我开始并设法解决了它。

以下是完整注册表的代码，其中比较了 2 个密码。

请注意，只有当表单中的所有元素都有效时，提交按钮才会启用！

注意 1 ：我对其进行了广泛的测试，但它可能存在错误或设计缺陷（如果发现，请告知我们）。

注2 : 说到Javascript和JQuery，我刚出生2周，所以我想我的解决办法不是尽可能优雅（再次，让我们知道您是否可以改进它）。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><title>Registration</title>
  <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" style="background-color: lightblue;">
        <form action="page2.php" id="myForm1" class="needs-validation" novalidate>
          <h1 class="text-center">Registration</h1><hr>
          <div class="form-group">
            First Name<input name="myInput" id="fisrtNameId" type="text" class="form-control" pattern="^[a-z]{2,15}$" required autofocus>
            <div class="valid-feedback">Valid</div>
            <div class="invalid-feedback">a to z only (2 to 15 long)</div>
          </div>
          <div class="form-group">
            Last Name<input name="myInput" id="lastNameId" type="text" class="form-control" pattern="^[a-z]{2,15}$" required>
            <div class="valid-feedback">Valid</div>
            <div class="invalid-feedback">a to z only (2 to 15 long)</div>
          </div>
          <div class="form-group">
            E-mail<input type="email" name="myInput" id="emailId" class="form-control" pattern="^[a-zA-Z0–9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0–9](?:[a-zA-Z0–9-]{0,61} [a-zA-Z0–9])?(?:\.[a-zA-Z0–9](?:[a-zA-Z0–9-]{0,61}[a-zA-Z0–9])?)*$" required>
            <div class="valid-feedback">Valid</div>
            <div class="invalid-feedback">Not a valid email address</div>
          </div>
          <div class="form-group">
            Password<input type="text" id="pwdId" class="form-control" pattern="^[a-z]{2,6}$" required>
            <div class="valid-feedback">Valid</div>
            <div class="invalid-feedback">a to z only (2 to 6 long)</div>
          </div>
          <div class="form-group">
            Confirm Password<input type="text" id="cPwdId" class="form-control myCpwdClass" pattern="^[a-z]{2,6}$" required>
            <div id="cPwdValid" class="valid-feedback">Passwords Match</div>
            <div id="cPwdInvalid" class="invalid-feedback">a to z only (2 to 6 long)</div>
          </div>
          <div class="form-group">
            Description<textarea form="myForm1" name="myInput" id="descId" type="text" class="form-control" required></textarea>
            <div class="valid-feedback">Valid</div>
            <div class="invalid-feedback">Required</div>
          </div>
          <div class="form-group">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" id="agreeId" class="custom-control-input form-control" required>
              <label for="agreeId" id="agreeLabelId" class="custom-control-label">Agree to terms <a href="https://www.youtube.com/watch?v=5_nWGG_TFDM" target="_blank"> (terms & conditions)</a></label>
              <div id="agreeValid" class="valid-feedback">Valid</div>
              <div id="agreeInvalid" class="invalid-feedback">Needs to be checked</div>
            </div>
          </div>
          <div class="form-group">
            <button id="submitBtn" type="submit" class="btn btn-secondary" disabled>Register</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(){
      // ----------- Set all elements as INVALID --------------
      var myInputElements = document.querySelectorAll(".form-control");
      var i;
      for (i = 0; i < myInputElements.length; i++) {
        myInputElements[i].classList.add('is-invalid');
        myInputElements[i].classList.remove('is-valid');
      }
      // ------------ Check passwords similarity --------------
      $('#pwdId, #cPwdId').on('keyup', function () {
        if ($('#pwdId').val() != '' && $('#cPwdId').val() != '' && $('#pwdId').val() == $('#cPwdId').val() ) {
          $('#cPwdValid').show();
          $('#cPwdInvalid').hide();
          $('#cPwdInvalid').html('Passwords Match').css('color', 'green');
          $('.myCpwdClass').addClass('is-valid');
          $('.myCpwdClass').removeClass('is-invalid');
          $("#submitBtn").attr("disabled",false);
          $('#submitBtn').addClass('btn-primary').removeClass('btn-secondary');
          for (i = 0; i < myInputElements.length; i++) {
            var myElement = document.getElementById(myInputElements[i].id);
            if (myElement.classList.contains('is-invalid')) {
              $("#submitBtn").attr("disabled",true);
              $('#submitBtn').addClass('btn-secondary').removeClass('btn-primary');
              break;
            }
          }
        } else {
          $('#cPwdValid').hide();
          $('#cPwdInvalid').show();
          $('#cPwdInvalid').html('Not Matching').css('color', 'red');
          $('.myCpwdClass').removeClass('is-valid');
          $('.myCpwdClass').addClass('is-invalid');
          $("#submitBtn").attr("disabled",true);
          $('#submitBtn').addClass('btn-secondary').removeClass('btn-primary');
        }
      });
      // ----------------- Validate on submit -----------------
      let currForm1 = document.getElementById('myForm1');
      currForm1.addEventListener('submit', function(event) {
        if (currForm1.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        else {
          $("#submitBtn").attr("disabled",false);
          $('#submitBtn').addClass('btn-primary').removeClass('btn-secondary');
          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);
          if (is_valid) {
            $("#submitBtn").attr("disabled",false);
            $('#submitBtn').addClass('btn-primary').removeClass('btn-secondary');
          } else {
            $("#submitBtn").attr("disabled",true);
            $('#submitBtn').addClass('btn-secondary').removeClass('btn-primary');
          }
        });
      });
      // ------------------------------------------------------
    });
  </script>
</body>
</html>

bootstrap 4 验证密码确认并提交禁用，直到表单验证（注册表）

bootstrap 4 validation with password confirmation and submit disabled until form validated (Registration form)

javascript

validation

bootstrap-4

compare

registration