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

Question

如果没有填写名字、电子邮件和评论，我想让他禁用表单上的提交按钮。我在 HTML（提交）中禁用了该按钮。这是一个sn-p。

即使列已填写，该按钮仍处于禁用状态，我不知道还能做什么...我尝试了许多不同的方法，但尚未找到解决方案。

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

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

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

Answer 2

您好，您必须为此编写一些 JS 代码。

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

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

Answer 3

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

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

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

为了让它按照你的方式工作，有必要创建一些事件、函数……有些工作没有充分的理由。这是一个示例，基于您的 (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>