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

问题描述 投票：0回答：2

以一种简单的形式，每个字段都有3个带有正则表达式模式的输入字段。其中两个（“密码”和“确认密码”）必须匹配。如果不是，则显示消息“不匹配”。如果这样做，则显示“有效”。

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

在“密码”字段中输入“ aa”（它与正则表达式匹配，因此匹配有效的绿色边框和V图标）。在“确认密码”字段中输入“ aa”（它与正则表达式匹配，因此为有效的绿色边框和V图标）。现在，我在“确认密码”中添加了另一个字符，它立即显示“ Not Matching”，但是根据正则表达式，它没问题-它仍然是带有“ V”图标的绿色。

enter image description here

我需要在出现这种情况时强行使用红色边框和'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>

谢谢！

javascript validation bootstrap-4 compare registration
2个回答
0
投票

您是否无法根据需要在两个密码输入上切换is-invalid类？

 $('#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

0
投票

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

以下是完整注册表格的代码，其中包含两个密码的比较。

注意，仅当表单中的所有元素均有效时，才启用“提交”按钮！

注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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.