bootstrap 4验证禁用提交按钮，直到表单验证答案

【问题标题】：bootstrap 4 validation disable submit button until form validatedbootstrap 4验证禁用提交按钮，直到表单验证
【发布时间】：2019-11-07 16:50:39
【问题描述】：

在我的问题的以下示例中，我有 2 个字段需要验证。
在验证所有（本例中为 2 个）字段之前，应禁用提交按钮。
如果两者都经过验证，则应启用它。

我的问题：验证第一个字段的那一刻 - 启用按钮，这为时过早。
我知道（我认为我知道）这是因为我放置 $("#submitBtn").attr("disabled",false);

任何有关如何使其工作的提示将不胜感激。

编辑：有关仅在验证所有表单元素后启用提交按钮的完整注册表单的示例，请参阅this。

<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">
            <input type="text" class="form-control" pattern="^[a-z]{3,6}$" required autofocus>
            <div class="valid-feedback">Valid</div>
            <div class="invalid-feedback">a to z only (3 to 6 long)</div>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" pattern="^[a-z]{3,6}$" required>
            <div class="valid-feedback">Valid</div>
            <div class="invalid-feedback">a to z only (3 to 6 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>
    window.addEventListener('load', function() {
      let currForm1 = document.getElementById('myForm1');
      // 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');
            $("#submitBtn").attr("disabled",false);           <<<<======== ??????
          } else {
            input.classList.remove('is-valid')
            input.classList.add('is-invalid');
          }
        });
      });
      // Validate on submit:
      currForm1.addEventListener('submit', function(event) {
        if (currForm1.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        currForm1.classList.add('was-validated');
      }, false);
    });
  </script>

【问题讨论】：

在input.addEventListener[...] 内添加另一个验证。检查所有输入是否都有is-valid 类。如果是这样，请在此处使用$("#submitBtn").attr("disabled",false);。
@JM-AGMS 谢谢。这就说得通了。由于我是 JS 和 BS 的新手，能否请您节省我的时间并告诉我检查所有输入是否具有 is-valid 类的语法？我已经追了好几个小时了……
var is_valid = $('.form-control').length === $('.form-control.is-valid').length，所以if (is_valid) { [yourcodehere]...}。
@JM-AGMS 谢谢！！！这对我来说很好。如果你把它作为并回答 - 我会接受它。（我现在看到已经有 2 个答案，我现在要查看）

标签： javascript validation bootstrap-4 submit-button disable

【解决方案1】：

在您的输入事件侦听器中检查所有输入是否都有is-valid 类。如果您的所有输入都有 is-valid 类，请关闭禁用按钮。

currForm1.querySelectorAll('.form-control').forEach(input => {
  input.addEventListener(('input'), () => {
    if (input.checkValidity()) {
      input.classList.remove('is-invalid')
      input.classList.add('is-valid');
      // $("#submitBtn").attr("disabled",false);           <<<<======== ??????
    } 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);
  });
});

【讨论】：

我注意到您的解决方案并非 100% 完美：只有在所有字段中输入有效输入后，才会启用按钮。太好了！但是，如果在点击按钮之前，我返回任何字段并使其无效（例如，通过删除字符使其低于所需的最小值 - 按钮保持启用状态。我认为这对我的项目来说已经足够了，但它会是如果这个小问题也能得到解决，那就更优雅了。有什么想法......？
更新了我的答案。
哇！当我长大后，我想成为 JM-AGMS……非常感谢！这对我来说是 100% 的解决方案。

【解决方案2】：

我不知道这是否是好方法，它是否满足您的需求也取决于您的要求，所以没关系..

这里我删除一些行并添加一些行

从第一个条件中删除禁用按钮代码并在最后添加

if(input.checkValidity() && index ===1) {
    $("#submitBtn").attr("disabled", false); 
}

<!DOCTYPE html>
<html lang="en">
<head>
  <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">
              <input type="text" class="form-control" pattern="^[a-z]{3,6}$" required autofocus>
              <div class="valid-feedback">Valid</div>
              <div class="invalid-feedback">a to z only (3 to 6 long)</div>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" pattern="^[a-z]{3,6}$" required>
              <div class="valid-feedback">Valid</div>
              <div class="invalid-feedback">a to z only (3 to 6 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>
      window.addEventListener('load', function() {
        let currForm1 = document.getElementById('myForm1');
        // Validate on input:
        currForm1.querySelectorAll('.form-control').forEach((input, index) => {
          input.addEventListener(('input'), () => {
            if (input.checkValidity()) {
              console.log(input.checkValidity());
              input.classList.remove('is-invalid')
              input.classList.add('is-valid');      
            } else {
              input.classList.remove('is-valid')
              input.classList.add('is-invalid');
            }
            if(input.checkValidity() && index ===1) {
              $("#submitBtn").attr("disabled", false); 
            }
          });
        });
        // Validate on submit:
        currForm1.addEventListener('submit', function(event) {
          if (currForm1.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          currForm1.classList.add('was-validated');
        }, false);
      });
    </script>
  </body>
</html>

【讨论】：

谢谢。我发现@JM-AGMS 的解决方案非常适合我。再次感谢。

【解决方案3】：

在假设我们可以启用它之前，我们需要检查所有其他输入是否也有效

let currForm1 = document.getElementById('myForm1');
      // Validate on input:
      currForm1.querySelectorAll('.form-control').forEach(input => {
        input.addEventListener(('input'), () => {
          if (input.checkValidity()) {
            /* IF IT PASSES WE NEED TO CHECK THE OTHER INPUTS */

            /* STORE ALL THE INPUTS THAT PASS THE CHECKVALIDITY */
            let allValid = currForm1.querySelectorAll('.form-control').filter(input => 
              { return input.checkValidity() })

            /* WE CAN NOW UPDATE THE SUBMIT BASED ON THE NUMBER OF VALID 
               INPUTS WE HAVE */
            $("#submitBtn").attr("disabled", allValid.length === currForm1.querySelectorAll('.form-control').length); 

            input.classList.remove('is-invalid')
            input.classList.add('is-valid');   
          } else {

            /* IF IT FAILS WE DONT NEED TO CHECK WE WANT THE VALIDATOR AS FALSE */
            $("#submitBtn").attr("disabled", true); 
            input.classList.remove('is-valid')
            input.classList.add('is-invalid');
          }
        });
      });

      /* FINALLY WE CAN UPDATE THE SUBMIT, BASED ON OUR VARIABLE */
      $("#submitBtn").attr("disabled", validatorForSubmit );

【讨论】：

谢谢。我发现@JM-AGMS 的解决方案非常适合我。再次感谢。