如何在JavaScript中显示/隐藏表单验证错误？小费计算器开发疑问

我正在完成Frontend Mentor的小费计算器开发挑战，输入组件已经搭建完成，但表单验证功能无法正常工作。有人建议用ARIA标签实现错误提示的显示与隐藏，但参考的教程示例用了提交按钮，而我的场景里并没有提交按钮。想请教如何通过JavaScript实现自定义错误提示信息的显示与隐藏。

相关代码 #

HTML代码

<label for="amount">账单金额</label>
<p class="hint hidden" id="amountHint">无效输入：请输入有效的金额</p>
<div class="amount_input">
  <img src="./images/icon-dollar.svg" alt="美元图标">
  <input type="text" id="amount" value="0" 
         pattern="(?=.*?\d)^\$?(([1-9]\d{0,2}(,\d{3})*)|\d+)?(\.\d{1,2})?$"
         aria-describedby="amountHint message" />
  <div aria-live="assertive" id="message"></div>
</div>

初始JavaScript代码

const money = document.getElementById("amount");
money.addEventListener('blur', (e) => {
  let checked = money.checkValidity();
  console.log(checked);
});

输入示例与期望输出 #

• 无效输入示例：

a

期望输出：显示「无效输入：请输入有效的金额」

• 有效输入示例：

1.00

期望输出：隐藏错误提示

解决方案 #

直接修改JS逻辑，结合ARIA属性实现无障碍的错误提示控制，同时处理实时输入和失焦验证：

修改后的JavaScript代码

const money = document.getElementById("amount");
const errorHint = document.getElementById("amountHint");
const liveRegion = document.getElementById("message");

// 验证函数
function validateInput(input) {
  const isValid = input.checkValidity();
  
  if (!isValid) {
    // 设置自定义错误信息
    input.setCustomValidity("请输入有效的金额");
    // 显示错误提示
    errorHint.classList.remove("hidden");
    // 更新live区域内容，供屏幕阅读器播报
    liveRegion.textContent = errorHint.textContent;
  } else {
    // 清除错误状态
    input.setCustomValidity("");
    // 隐藏错误提示
    errorHint.classList.add("hidden");
    liveRegion.textContent = "";
  }
}

// 失焦时验证
money.addEventListener('blur', () => {
  validateInput(money);
});

// 输入时实时更新验证状态
money.addEventListener('input', () => {
  validateInput(money);
});

配套CSS（用于隐藏提示）

.hidden {
  display: none;
}

关键说明 #

1. 修正pattern属性：HTML的pattern不需要正则表达式的斜杠，直接写正则内容即可生效。
2. ARIA关联：给input添加aria-describedby，关联错误提示和live区域，确保屏幕阅读器能读取错误信息。
3. aria-live区域：aria-live="assertive"会自动播报内容变化，适合紧急的错误提示。
4. 双事件处理：失焦时做完整验证，输入时实时更新状态，兼顾验证准确性和用户体验。
5. setCustomValidity：配合checkValidity使用，自定义错误信息，同时触发浏览器原生验证状态。

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