前端之家

  1. 首页
  2. 问答

在用户输入时进行引导4表单验证

• 问答

我在带有2个输入和1个按钮的简单index.php中重新创建了问题，该按钮重定向到page2.php。
我有BS-4格式验证，输入标签有一个正则表达式模式。

问题1：仅在单击按钮后才进行验证。不是我随便输入的。
问题2：：刷新后不输入任何内容时，该按钮会将我重定向到page2.php。

我认为罪魁祸首是：addEventListener('load')，但是我不确定，因为我是PHP，JS，Bootstrap和一般生活的新手...

对于任何想法都会非常感谢！

这是代码：

<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="page1.php" id="myForm1" class="was-validation" novalidate>
          <div class="form-group">
            <input type="text" class="form-control" pattern="^[a-z]{3,6}$" 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}$" 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">
            <button type="submit" class="btn btn-primary">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>
    (function() {
      window.addEventListener('load',function() {
        let currForm1 = document.getElementById('myForm1');
        currForm1.addEventListener('submit',function(event) {
          if (currForm1.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          currForm1.classList.add('was-validated');
        },false);
      });
    })();
  </script>

yangyaolei 回答：在用户输入时进行引导4表单验证

如果您不想在任何输入为空时提交表单，则需要向其中添加required属性，下面是一个示例：

window.addEventListener('load',function() {
  let currForm1 = document.getElementById('myForm1');
  currForm1.addEventListener('submit',function(event) {
    if (currForm1.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    currForm1.classList.add('was-validated');
  },false);
  // Validate on input:
  currForm1.querySelectorAll('input').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');
      }
    });
  });
});
<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="page1.php" id="myForm1" class="was-validation" novalidate="z">
          <div class="form-group">
            <input type="text" class="form-control" pattern="^[a-z]{3,6}$" autofocus 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">
            <input type="text" class="form-control" pattern="^[a-z]{3,6}$" autofocus 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 type="submit" class="btn btn-primary">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>

addeventlistenerbootstrap-4javascriptvalidation
本文链接：https://www.f2er.com/3165106.html

大家都在问