有人能指出这个表单验证有什么问题吗？答案

【问题标题】：Can someone point out what is wrong with this form validation?有人能指出这个表单验证有什么问题吗？
【发布时间】：2021-07-23 10:07:27
【问题描述】：

我是第一次整理联系表格。当我点击提交按钮时，我的网站没有显示我的 PHP 页面。我的“需要验证”框也没有出现。我从 W3 学校网站上提取了示例，并且该表格在那里可以正常工作，但当我这样做时却不行。我尝试从 Bootstrap 的网站和 W3 学校添加和删除随机行。由于这是我第一次出现问题，我不知道该寻找什么。

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>
  <!-- Right column -->
  <div class="col-md-9 mb-md-0 mb-5">

    <form action="/action_page.php" method="post" class="needs-validation" novalidate>
      <div class="form-group">
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-6">
            <div class="md-form mb-0">
              <input type="text" id="contact-name" class="form-control" required>
              <div class="valid-feedback">Loooks good!</div>
              <div class="invalid-feedback">Please fill out your name.</div>
              <label for="contact-name" class="">Your Name</label>
            </div>
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-md-6">
            <div class="md-form mb-0">
              <input type="text" id="contact-email" class="form-control" required>
              <div class="valid-feedback">Looks good!</div>
              <div class="invalid-feedback">Please fill out your email.</div>
              <label for="contact-email" class="">Your Email</label>
            </div>
          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-12">
            <div class="md-form mb-0">
              <input type="text" id="contact-Subject" class="form-control">
              <div class="valid-feedback">Looks good!</div>
              <div class="invalid-feedback">Please fill out this area.</div>
              <label for="contact-Subject" class="">Subject</label>
            </div>
          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-12">
            <div class="md-form">
              <textarea id="contact-message" class="form-control md-textarea" rows="3"></textarea>
              <div class="valid-feedback">Looks good!</div>
              <div class="invalid-feedback">Please fill out this area.</div>
              <label for="contact-message">Your Message</label>
            </div>
          </div>
          <!-- Grid column -->
        </div>
      </div>
      <!-- Send Button -->
      <div class="text-center text-md-left">
        <a class="btn btn-primary btn-md">Send</a>
      </div>
    </form>

  </div>

  <!-- Grid column -->

  </div>
  <!-- Grid row -->

  </section>
  <!-- Section: Contact v.2 -->
  </div>
  <!-- Footer -->
  <div class="row">
    <div class="text-center col-lg-6 offset-lg-3">


    </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js" integrity="sha512-BmM0/BQlqh02wuK5Gz9yrbe7VyIVwOzD1o40yi1IsTjriX/NGF37NyXHfmFzIlMmoSIBXgqDiG1VNU6kB5dBbA==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha512-XKa9Hemdy1Ui3KSGgJdgMyYlUg1gM+QhL6cnlyTe2qzMCYm4nAZ1PsVerQzTTXzonUR+dmswHqgJPuwCq1MaAg==" crossorigin="anonymous"></script>
</body>

</html>

我删除了一些部分以保护我正在从事的项目的身份。

【问题讨论】：

我没有给你答案，但我建议你从一个简单的输入表单开始。并查看提交时是否加载了php页面。一旦您确定数据正在发送，您就可以尝试验证。

标签： javascript html forms validation bootstrap-4

【解决方案1】：

大家，经过仔细阅读，我已经弄清楚了。我的“提交”按钮的代码类型错误。它需要是输入类型 html 而不是“类”按钮。

【讨论】：