如何在点击禁用状态的Next按钮时添加错误提示文本

先修正原代码里的一个小错误：输入框绑定的input事件用了displayButton，但实际定义的函数是showButton，这会导致输入时按钮状态不更新，先把这个改过来。

接下来要实现点击禁用按钮时显示错误提示，具体修改方案如下：

完整代码 #

HTML #

<input type="text" id="name" placeholder="NAME">
<input type="text" id="last_name" placeholder="LAST NAME">
<button id="button" disabled>Next</button>
<span id="error_msg" style="color: red; display: none;">请填写所有必填字段</span>

给错误提示元素加了默认隐藏和红色样式，直观醒目。

JavaScript #

const b = document.getElementById('button');
const inputs = document.querySelectorAll('input');
const errorMsg = document.getElementById('error_msg');

// 输入框输入时更新按钮状态，同时隐藏错误提示
inputs.forEach(input => {
  input.addEventListener("input", () => {
    showButton();
    errorMsg.style.display = 'none';
  });
})

// 按钮点击事件：如果按钮处于禁用状态，就显示错误提示
b.addEventListener('click', () => {
  if (b.disabled) {
    errorMsg.style.display = 'inline';
  }
})

function showButton() {
  const name = document.getElementById('name').value.trim();
  const last_name = document.getElementById('last_name').value.trim();

  // 用trim()过滤首尾空格，避免只输空格就通过校验
  b.disabled = !(name.length > 0 && last_name.length > 0);
}

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

关键改动说明 #

1. 修正函数名错误：把输入事件监听里的displayButton改成showButton，确保输入时按钮状态能正常更新。
2. 添加错误提示逻辑：给error_msg设置默认隐藏样式，点击禁用按钮时触发显示。
3. 优化用户体验：用户在输入框填写内容时，自动隐藏错误提示，避免干扰填写流程。
4. 完善校验规则：用trim()去除输入内容的首尾空格，防止用户只输入空格就被判定为已填写。

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