有人能指出这个表单验证有啥问题吗?

Posted

技术标签:

【中文标题】有人能指出这个表单验证有啥问题吗?【英文标题】: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页面。一旦您确定数据正在发送,您就可以尝试验证。 【参考方案1】:

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

【讨论】:

以上是关于有人能指出这个表单验证有啥问题吗?的主要内容,如果未能解决你的问题,请参考以下文章

带有子组件和验证的 Angular 2 嵌套表单

Django 表单验证、clean() 和文件上传

邮件表单提交,即使验证失败

有啥区别:Windows 身份验证、护照身份验证和表单身份验证?

验证输入字段后如何提交表单

vue-element的表单验证能调用methods里的方法吗?