HTML表单提交按钮异常：填完字段仍保持禁用状态

你的代码存在几个核心问题，导致提交按钮始终处于禁用状态：

1. 仅检查单个输入框：document.querySelector('.input')只会选中页面中第一个带.input类的元素，无法覆盖所有需要验证的必填字段。
2. 未绑定输入事件：clickedButton函数从未被触发，输入框内容变化时不会执行按钮状态更新逻辑。
3. 验证逻辑不完整：没有检查所有必填项的填写状态，导致即使填完部分字段，按钮也不会解锁。

修正后的代码 #

JavaScript 部分

const subButton = document.querySelector('.sbutton');
// 获取所有带required属性的输入/文本域元素
const requiredInputs = document.querySelectorAll('input[required], textarea[required]');

// 页面加载时初始化按钮状态
updateButtonState();

// 定义按钮状态更新函数
function updateButtonState() {
  // 检查所有必填字段是否都有非空内容
  const allFieldsFilled = Array.from(requiredInputs).every(input => input.value.trim() !== '');
  subButton.disabled = !allFieldsFilled;
}

// 给每个必填输入框绑定输入事件，实时更新按钮状态
requiredInputs.forEach(input => {
  input.addEventListener('input', updateButtonState);
});

HTML 部分（确保必填项正确标记required属性）

<div class="form">
  <section>
    <form action="[你的实际提交链接]" method="POST">
      <fieldset>
        <legend>Your Contact Info!</legend>
        <label class="firstname" for="firstname">First Name</label>
        <input class="input" type="text" id="firstname" name="name" placeholder="Your first name" required>

        <label class="lastname" for="lastname">Last Name</label>
        <input type="text" id="lastname" name="lname" placeholder="Your last name">
        
        <label class="email" for="email">E-mail</label>
        <input class="input" type="email" id="email" name="email" placeholder="Your e-mail" required>
        
        <label class="comments" for="comments">Additional Comments</label>
        <textarea class="input" placeholder="Anything else we should know!" id="comments" name="comments" required></textarea>
        
        <label for="timeofday">When is the best time of day to contact you?</label>
        <select id="timeofday" name="timeofday">
          <option value='Morning'>Morning</option>
          <option selected value="afternoon">Afternoon</option>
          <option value="evening">Evening</option>
        </select>
      </fieldset>
      <button class="sbutton" type="submit">Submit</button>
    </form>
  </section>
</div>

关键改进说明 #

• 用querySelectorAll批量获取所有必填元素，通过every方法统一验证是否全部填写
• 绑定input事件，让输入框内容变化时实时触发状态检查
• 页面加载时立即执行状态初始化，确保按钮初始状态正确

内容的提问来源于stack exchange，提问作者Or Ayash