如何禁用提交按钮，直到使用html和vanilla js填写完所有必填字段为止
要实现禁用提交按钮直到所有必填字段填写完毕的功能，可以使用HTML和Vanilla JavaScript来完成。以下是一个完整的示例：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br><br>
<button type="submit" id="submitButton" disabled>Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>JavaScript部分（script.js）
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('myForm');
const submitButton = document.getElementById('submitButton');
const inputs = form.querySelectorAll('input[required]');
function checkFormValidity() {
let allValid = true;
inputs.forEach(input => {
if (!input.checkValidity()) {
allValid = false;
}
});
submitButton.disabled = !allValid;
}
inputs.forEach(input => {
input.addEventListener('input', checkFormValidity);
});
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault();
alert('Please fill out all required fields.');
}
});
});解释
- HTML部分:
- 创建一个包含必填字段的表单。
- 添加一个提交按钮，并将其初始状态设置为禁用。
- JavaScript部分:
- 使用
DOMContentLoaded事件确保脚本在DOM完全加载后执行。 - 获取表单和提交按钮的引用。
- 获取所有带有
required属性的输入字段。 - 定义一个
checkFormValidity函数，用于检查所有必填字段是否已填写。如果所有字段都有效，则启用提交按钮，否则禁用它。 - 为每个输入字段添加
input事件监听器，以便在用户输入时实时检查表单的有效性。 - 为表单添加
submit事件监听器，以防止表单在未填写所有必填字段时提交，并显示提示信息。
- 使用
应用场景
这种技术常用于需要确保用户填写所有必填字段的表单，例如注册表单、登录表单、订单提交表单等。
参考链接
通过这种方式，可以有效地禁用提交按钮，直到用户填写完所有必填字段为止。
相关·内容
如何禁用提交按钮，直到用户输入所有字段，以及如何在提交表单上使用事件侦听器。 <form action='index.html' id="form-user" onsubmit="init()">
<input type="text" name="username" id=&q
浏览 31提问于2021-09-30得票数 1
回答已采纳
我有一个表单，在这个表单中，我禁用了submit按钮，直到用户输入了所有必填字段。我最初使用onkeyup是为了在必填字段上保留一个选项卡，并在填写完所有必填字段后启用该按钮。但我有用户抱怨说，他们使用谷歌工具栏上的AutoFill按钮填写了表单，但提交按钮仍然被禁用
浏览 2提问于2009-09-29得票数 5
我希望禁用submit按钮，直到我指定为必填的所有字段都填充了一个值。在它们全部填充后，如果用户删除了某个字段，我希望提交按钮再次变为禁用状态。
我如何使用jQuery来实现这一点？
浏览 0提问于2011-10-13得票数 1
回答已采纳
3回答
我有一些输入字段是必需的(不是HTML )，但是使用一个名为"requiredInput“的类将它们标识为必需，并在用户单击submit按钮时在服务器端进行评估。但是，当用户从该字段移开并禁用submit时，我想验证输入字段客户端，直到所有必需的字段都填写完毕。
为了完全处理这个客户端，而不是等待服务器端提交来执行验证，我应该如何处理这个场景？<i
浏览 5提问于2016-11-23得票数 1
我一直在寻找一种解决方案来禁用表单提交按钮，直到填写完必填字段为止。我在stackoverflow上找到了一些东西(由提供)，但它是针对标准jQuery的，不适用于jQuery移动设备。这背后的原因是，在移动页面上有一个表单，要求在提交之前填写所有字段。验证是通过php解决的，所以它不是必需的部分。
浏览 1提问于2011-11-06得票数 1
回答已采纳
我有一个非常简单的web应用程序，下面是沙箱的链接：
问题是如何禁用提交输入，直到所有请求的字段和复选框都填写完毕？抱歉，我只和js一起工作几天，所以我很感谢你的帮助
浏览 5提问于2021-08-09得票数 0
回答已采纳
我有一个属性组件和一个地址组件。每个属性都有一个物理地址和一个帐单地址。well</property>
属性中的保存按钮具有form.valid检查，以验证是否已输入所有必填字段。在上面的例子中，一旦输入了所有必需的属性字段，保存按钮</
浏览 2提问于2015-12-18得票数 1
首先，我想有一个提交按钮，这将被禁用，如果所有的必填字段没有填写。我发现了一些例子，如果所有的字段都填满了，但我有必填和非必填字段，所以我需要找出是否填写了必填字段。我现在对如何实现这个目标一无所知。为了以防万一，我在Scala中使用play框架2.1.x。
干杯，Ilgün
浏览 0提问于2013-10-01得票数 0
回答已采纳
我最近的任务是收集数据使用pdf格式的表格，在表格中的一些字段是必需的，但不是所有的字段，我已经创建了一个提交按钮和部门将收到表格填写，现在表格需要被重置时提交。所以我添加了一个按钮来提交表单，然后重置它。问题是，如果有人填写表单并点击提交，缺少一个必填字段，那么当他们点击ok时，所有的字段都会被重置，这个人需要重新开始。敬请指
浏览 1提问于2015-06-25得票数 0
我想禁用我的表单提交按钮，直到所有输入字段都填写完毕，并且没有错误。disabled.value = true; disabled.value = false; });})“禁用</em
浏览 11提问于2022-05-17得票数 0
回答已采纳
1回答
我想禁用提交按钮，直到我的输入字段填写完毕。我是rails的新手，对JS和Coffee了解不多，我一直在尝试运行这个功能，但它不能正常工作。我也试着在客户端验证，但没能让它工作，代码通过了，但按钮仍然没有启用，即使所有的字段都填好了。由于某些原因，该按钮继续处于禁用状态。Html.haml
= simple_form_for @post, <em
浏览 43提问于2017-01-05得票数 1
2回答
我正在使用Blueimp文件上传图像。我还为用户提供了一些输入字段来填充图片的元数据(即标题，作者等)。
这个想法是，一旦表单填写完毕并上传图片，用户就可以按下单独的提交按钮。但是，如果用户在上传图片之前按下按钮，则会导致错误。我想禁用表单提交按钮，直到图片上传和进度条完成。submit_main').attr('disabled', 'disabled&#x
浏览 3提问于2013-05-05得票数 4
回答已采纳
0回答
我想让所有的输入字段被填写之前，用户提交它。我尝试禁用提交按钮，直到我的输入字段填写完毕。我也试着在客户端验证，但没能让它工作，代码通过了，但按钮仍然没有启用，即使所有的字段都填好了。由于某些原因，该按钮仍处于禁用状态。%button.btn.btn-info{:type => "submit", :disabled =
浏览 4提问于2017-01-06得票数 0
回答已采纳
3回答
我正在为我的网站建立一个注册页面，我想禁用提交按钮，直到所有的字段已经使用jQuery和AJAX验证(我在找到了这样做的方法)…现在，我如何使用它来执行多个检查，并保持提交按钮禁用，直到所有检查都通过？
浏览 5提问于2011-07-14得票数 0
回答已采纳
我有一个查询表单，并且我已经在其中添加了recaptcha 2.0。现在，我需要将验证码添加到表单的验证文件中。问题是我不知道验证码到底应该是什么样子，也不知道我应该把它放到我的验证文件中的什么地方。$(document).ready(function(){
var yournameInfo = $("#span_
浏览 0提问于2015-04-28得票数 2
1回答
我已经修改了这个脚本以提交一个表单。目标是禁用submit按钮，直到所有表单字段都已验证为止。这在第一次很好，但是由于我的表单没有一个操作jquery也处理提交。因此，在我提交表单后，submit按钮不会被禁用。我必须刷新页面才能使它被禁用。这有可能吗？subm
浏览 4提问于2013-10-25得票数 0
回答已采纳
2回答
我正在尝试使用Yii在我的项目中实现一个“另存为草稿”功能。我有一个表单与2个按钮:-提交和保存。单击Submit按钮，验证所有字段(包括必填字段)后，表单数据将保存到数据库中。它工作得很完美。在单击Save按钮时，我需要将没有默认验证的表单数据保存到数据库中。如何在控制器操作中实现此验证禁用？谢谢
浏览 1提问于2013-01-07得票数 3
回答已采纳
当我单击“保存”按钮时，输入字段和保存按钮应该禁用，并将表单提交给message.jsp，如果我单击“编辑”按钮，则应该启用“输入字段”和“保存”按钮，对于编辑内容，应该重定向到message1.jsplibs/jquery/3.5.1/jquery.min.js"></script>
<script type=&qu
浏览 1提问于2020-07-11得票数 1
1回答
我有一个SPA，其中包含4个HTML页面(选项卡)。所有选项卡都有一些必填字段。我面临的问题是如何验证最终选项卡上的所有必填字段。假设我有如下选项卡：在那里用户可以填写任何选项卡，每当他将点击提交按钮，这是在Tab4上，我想验证所有的选项卡。
我想在一次点击中执行所有的HTML。PS :我正在使用
浏览 0提问于2016-11-10得票数 1
3回答
使用js进行验证
、、
我有一个有两个按钮的表单，第一个按钮确认输入的数据并显示验证码输入，另一个提交代码和表单，我想要的是将第一个按钮上的验证放到必填字段，这样他就无法确认，除非他已经填写了所有必填字段，我如何使用js实现这一点
浏览 31提问于2017-07-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
