如果未填写表单，则禁用提交按钮

Question

我想让他在未填写名字、电子邮件和评论时禁用表单上的提交按钮。我在 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>

Answer 1

您好，您需要为此编写一些 JS 代码。

$(document).ready(function() {
$('#submit').attr('disabled', true);
    if ($('#html_variable1').val() != '' && $('#html_variable2').val() != '') {
        $('#submit').attr('disabled', false);
    }
});

在你的提交按钮中添加id提交，在你的输入中定义所有id并将它们添加到JS的if语句中，一旦所有输入都不为空提交按钮将删除禁用选项。

Answer 2

正如 CBroe 提到的，有一个纯粹的 HTML5 表单输入验证器：
More info here

但是如果你还想自己用JS做的话。您可以在上面的 link 中找到详细信息。

请记住，在大多数情况下使用内置解决方案比创建自己的解决方案更好。如果您使用 HTML5 验证器，您将对所有表单输入进行简单但高效的客户端检查，并且用户将对他们做错了什么进行本机回调。

要使其按照您的方式工作，有必要创建一些事件、函数...有些工作没有充分的理由。这是一个示例，基于您的（凌乱的；））代码：

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>

Answer 3

你的代码中的一个问题是，你已经声明了一个 sendText 函数三次而且你从来没有调用过这个函数，我不知道你把所有的 html 代码都放在了你的问题中或没有，但您的标记似乎有一些问题，但由于您的问题是为了更改提交按钮的禁用状态，我们忽略与标记相关的问题。我在下面的代码片段中复制了您的代码，并进行了一些更改以实现您想要的功能。请检查此代码段。

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 事件侦听器。

如果未填写表单，则禁用提交按钮

Disable submit button if form not filled out

html

javascript

function

button