如何实现多步骤表单的下一步按钮在输入项完成前保持禁用？

问题原因分析 #

你的代码存在3个核心问题导致逻辑与需求完全相反：

1. 初始化错误：第一个Next按钮被默认设置为启用状态，违背了「默认禁用」的要求。
2. 单选框验证逻辑错误：使用every()方法检查所有单选框是否被选中，但单选框组同一时间仅能选中一个，这会导致allInputsValid始终为false，进而让Next按钮在选中选项后反而被禁用。
3. 事件监听不完整：文本输入框仅监听change事件（失去焦点才触发），无法实时响应输入内容变化，用户体验差。

修正后的完整代码 #

配套HTML结构示例 #

<div class="form-section">
  <h3>Do you like fruits?</h3>
  <label><input type="radio" name="likeFruit" value="yes"> Yes</label>
  <label><input type="radio" name="likeFruit" value="no"> No</label>
  <button class="form-next-btn" disabled>Next</button>
</div>

<div class="form-section" style="display: none;">
  <h3>Which fruit do you like?</h3>
  <label><input type="radio" name="favoriteFruit" value="apple"> Apple</label>
  <label><input type="radio" name="favoriteFruit" value="grape"> Grape</label>
  <button class="form-prev-btn">Prev</button>
  <button class="form-next-btn" disabled>Next</button>
</div>

<div class="form-section" style="display: none;">
  <h3>Why don't you like fruit?</h3>
  <input type="text" placeholder="Enter Reason">
  <button class="form-prev-btn">Prev</button>
  <button class="form-next-btn" disabled>Next</button>
</div>

修正后的JavaScript代码 #

// 获取所有输入元素
const inputFields = document.querySelectorAll('input');
// 获取所有Next按钮
const nextButtons = document.querySelectorAll('.form-next-btn');

// 初始化：所有Next按钮默认禁用
nextButtons.forEach(button => button.disabled = true);

// 为不同类型输入绑定对应事件：单选框用change，文本框用input实时响应
inputFields.forEach(input => {
  const eventType = input.type === 'text' ? 'input' : 'change';
  input.addEventListener(eventType, validateInput);
});

function validateInput(event) {
  const currentStep = event.target.closest('.form-section');
  const nextButton = currentStep.querySelector('.form-next-btn');
  
  let isStepValid = false;

  // 验证单选框组：检查同组内是否有选中项
  const radioGroups = new Set([...currentStep.querySelectorAll('input[type="radio"]')].map(radio => radio.name));
  if (radioGroups.size > 0) {
    isStepValid = [...radioGroups].some(groupName => {
      return currentStep.querySelector(`input[type="radio"][name="${groupName}"]:checked`) !== null;
    });
  }

  // 验证文本输入框：检查是否有非空内容
  const textInput = currentStep.querySelector('input[type="text"]');
  if (textInput) {
    isStepValid = textInput.value.trim() !== '';
  }

  // 根据验证结果切换按钮状态
  nextButton.disabled = !isStepValid;
}

// 可选：添加步骤切换逻辑（Prev/Next按钮的显示隐藏）
const prevButtons = document.querySelectorAll('.form-prev-btn');
prevButtons.forEach(button => {
  button.addEventListener('click', () => {
    const currentStep = button.closest('.form-section');
    currentStep.style.display = 'none';
    currentStep.previousElementSibling.style.display = 'block';
  });
});

nextButtons.forEach(button => {
  button.addEventListener('click', () => {
    const currentStep = button.closest('.form-section');
    currentStep.style.display = 'none';
    if (currentStep.nextElementSibling) {
      currentStep.nextElementSibling.style.display = 'block';
    }
  });
});

关键修正点说明 #

1. 初始化逻辑：统一设置所有Next按钮默认禁用，符合需求。
2. 单选框验证：通过Set提取单选框分组，用some()检查每组是否有选中项，彻底解决原代码的逻辑错误。
3. 事件监听优化：文本输入框使用input事件，用户输入时实时更新按钮状态。
4. 步骤切换逻辑：补充了基础的前后步骤切换功能，让表单流程完整。

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