有人能指出这个表单验证有啥问题吗？
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 而不是“类”按钮。
【讨论】：
以上是关于有人能指出这个表单验证有啥问题吗？的主要内容，如果未能解决你的问题，请参考以下文章