如果未填写表单，则禁用提交按钮
[英]Disable submit button if form not filled out
问题描述
如果名字 email 和评论未填写，我想让他在表单上禁用提交按钮。 我在 HTML 中禁用了按钮（提交）。 这是一个片段。
即使列已填写并且我不知道还能做什么，该按钮仍保持禁用状态...我尝试了许多不同的方法，但尚未找到解决方案。
const submitBtn = document.getElementById('submit'); const firstName = document.getElementById('first-name') const email = document.getElementById('email') const comment = document.getElementById('comment') function sendText() { if (firstName.value.length > 0) { submitBtn.disabled = false; } else { submitBtn.disabled = true; } } function sendText() { if (email.value.length > 0) { submitBtn.disabled = false; } else { submitBtn.disabled = true; } } function sendText() { if (comment.value.length > 0) { submitBtn.disabled = false; } else { submitBtn.disabled = true; } }
<tr> <fieldset div="contact"> <td>First Name* <input type="text" id="first-name" name="first-name" placeholder="Your name" required></td> <td>Last Name<input type="text" id="last-name" name="last-name" placeholder="Your last name"></td> <td>Email*<input type="email" id="email" name="email" placeholder="Your email" required> </td> </fieldset> <fieldset> <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..." required></textarea> </tr> <lable for="hour">Which one is the best hour to contact you?</lable> <select id="hour"> <option selected>Select an Option</option> <option value="8">08:00 AM</option> <option value="9">09:00 AM</option> <ption value="10">10:00 AM</option> <option value="11">11:00 AM</option> <option value="12">12:00 AM</option> <option value="13">13:00 PM</option> <option value="14">14:00 PM</option> <option value="15">15:00 PM</option> <option value="16">16:00 PM</option> <option value="17">17:00 PM</option> <option value="18">18:00 PM</option> <option value="19">19:00 PM</option> </select> </fieldset> <button disabled id="submit">Submit</button> </h3> </nav> </div> </form>> </form>
3 个解决方案
解决方案1
0 2021-12-07 07:50:34
嗨，您将不得不为此编写一些 JS 代码。
$(document).ready(function() {
$('#submit').attr('disabled', true);
if ($('#html_variable1').val() != '' && $('#html_variable2').val() != '') {
$('#submit').attr('disabled', false);
}
});
在您的提交按钮中添加 id 提交，在您的输入中定义所有 id 并将它们添加到 JS 的 if 语句中，一旦所有输入都不是空的，提交按钮将删除禁用选项。
解决方案2
0 2021-12-07 09:27:40
正如CBroe提到的，forms 输入有纯 HTML5 验证器：
更多信息在这里
但是如果你还想用 JS 自己做。 您可以在上面的同一链接中找到详细信息。
请记住，在大多数情况下使用内置解决方案比创建自己的解决方案要好。 如果您使用 HTML5 验证器，您将对所有表单输入进行简单但有效的客户端检查，并且用户将对他们做错的事情进行本机回调。
为了让它按照你的方式工作，有必要创建一些事件、函数......有些工作没有充分的理由。 这是一个基于 Your (messy;) ) 代码的示例：
const submitBtn = document.getElementById('submit'); const firstName = document.getElementById('first-name'); const emailAddress = document.getElementById('email'); const comment = document.getElementById('comment'); let validation = [0, 0, 0]; function checkForm (validation) { if (validation.reduce((a, b) => a + b, 0) > 2){ submitBtn.removeAttribute('disabled'); } } firstName.addEventListener('change', (event) => { if (firstName.value.length > 0 ){ validation[0] = 1; checkForm(validation); } else { validation[0] = 0; submitBtn.setAttribute('disabled', 'disabled'); } }); emailAddress.addEventListener('change', (event) => { if (emailAddress.value.length > 0 ){ validation[1] = 1; checkForm(validation); } else { validation[1] = 0; submitBtn.setAttribute('disabled', 'disabled'); } }); comment.addEventListener('change', (event) => { if (comment.value.length > 0 ){ validation[2] = 1; checkForm(validation); } else { validation[2] = 0; submitBtn.setAttribute('disabled', 'disabled'); } });
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <fieldset id="contact"> <div><label for="first-name">First Name* </label><input type="text" id="first-name" name="first-name" placeholder="Your name" required></div> <div><label for="last-name">Last Name</label><input type="text" id="last-name" name="last-name" placeholder="Your last name"></div> <div><label for="email">Email*</label><input type="email" id="email" name="email" placeholder="Your email" required></div> </fieldset> <fieldset> <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..?" required></textarea> <label for="hour">Which one is the best hour to contact you:</label> <select id="hour"> <option disabled selected hidden>Select an Option</option> <option value="8">08:00 AM</option> <option value="9">09:00 AM</option> <option value="10">10:00 AM</option> <option value="11">11:00 AM</option> <option value="12">12:00 AM</option> <option value="13">13:00 PM</option> <option value="14">14:00 PM</option> <option value="15">15:00 PM</option> <option value="16">16:00 PM</option> <option value="17">17:00 PM</option> <option value="18">18:00 PM</option> <option value="19">19:00 PM</option> </select> </fieldset> <button disabled id="submit">Submit</button> </form> </body> </html>
解决方案3
0 2021-12-07 10:11:27
您的代码中的一个问题是，您已经声明了sendText function 三次，而且您从未调用此 function，我不知道您将所有 ZFC35FDC70D5FC69D2698883A822C7A5用于更改提交按钮的禁用状态，我们忽略与标记相关的问题。 我在下面的代码片段中复制了您的代码，并进行了一些更改以实现您想要的功能。 请查看此代码段。
const submitBtn = document.getElementById('submit'); const firstName = document.getElementById('first-name') const email = document.getElementById('email') const comment = document.getElementById('comment') function updateSubmitBtn(){ const firstNameValue = firstName.value.trim(); const emailValue = email.value.trim(); const commentValue = comment.value.trim(); debugger; if(firstNameValue && emailValue && commentValue){ submitBtn.removeAttribute('disabled'); }else { submitBtn.setAttribute('disabled', 'disabled'); } } firstName.addEventListener('change', updateSubmitBtn); email.addEventListener('change', updateSubmitBtn); comment.addEventListener('change', updateSubmitBtn);
<tr> <fieldset div="contact"> <td>First Name* <input type="text" id="first-name" name="first-name" placeholder="Your name" required></td> <td>Last Name<input type="text" id="last-name" name="last-name" placeholder="Your last name"></td> <td>Email*<input type="email" id="email" name="email" placeholder="Your email" required> </td> </fieldset> <fieldset> <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..." required></textarea> </tr> <lable for="hour">Which one is the best hour to contact you?</lable> <select id="hour"> <option selected>Select an Option</option> <option value="8">08:00 AM</option> <option value="9">09:00 AM</option> <option value="10">10:00 AM</option> <option value="11">11:00 AM</option> <option value="12">12:00 AM</option> <option value="13">13:00 PM</option> <option value="14">14:00 PM</option> <option value="15">15:00 PM</option> <option value="16">16:00 PM</option> <option value="17">17:00 PM</option> <option value="18">18:00 PM</option> <option value="19">19:00 PM</option> </select> </fieldset> <button disabled id="submit">Submit</button>
请考虑这一点，当元素失去焦点时，输入会触发change事件。 如果您想在用户开始输入输入时更改提交按钮的禁用状态，您应该使用input事件而不是change事件侦听器。
使用Redux表单，如果未填写任何字段，如何禁用提交按钮？
[英]Using Redux Form, how can I disable the submit button if no fields have been filled out?
如何禁用提交按钮，直到表单在 javascript 中填写并有效？
[英]How to disable submit button until form is filled and valid in javascript?
在使用 jquery 填写表单之前，如何禁用提交表单按钮？
[英]How can I disable submit form button until form is filled using jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.