aria-invalid

aria-invalid 状态指示输入的值不符合应用程序预期的格式。

描述

aria-invalid 属性用于指示输入到输入字段中的值是否不在应用程序将接受的格式或值范围内。这可能包括电子邮件地址或电话号码等格式。aria-invalid 还可以用于指示必填字段为空。

aria-invalid 属性可与任何典型的 HTML 表单元素一起使用，并且不限于分配了 ARIA 角色的元素。

该属性应在验证过程的结果中使用 JavaScript 设置。如果确定某个值无效或超出范围，则设置 aria-invalid="true" **以及**告诉用户存在错误。为了获得更好的用户体验，请提供有关如何更正错误的建议。在用户尝试提交表单之前，请勿在空的必填元素上设置 aria-invalid="true"。他们可能仍在填写表单。

注意：当 aria-invalid 与 aria-required 属性一起使用时，在表单提交之前不应将 aria-invalid 设置为 true - 仅在响应验证时设置。

目前有四个值：除了 true 和 false 之外，我们还有 grammar，它可以在检测到语法错误时使用，以及 spelling 用于拼写错误。如果属性不存在，或者其值为 false，或者其值为空字符串，则应用 false 的默认值。任何其他值都将被视为已设置 true。

原生 HTML 验证

HTML 具有原生表单验证。当用户提交包含错误的控件的表单时，第一个包含无效值的表单控件会本地显示错误消息。

如果未填写的表单控件上存在 required 属性，则表单将不会提交，并且会显示一条类似于“请填写此字段”的错误消息。原生验证的消息根据浏览器而异，并且无法设置样式。

html
<input type="number" step="2" min="0" max="100" required />

如果用户在上述输入示例中输入的值超过最大值、低于最小值或与步长值不匹配，则会出现错误消息。如果用户输入“3”，则原生错误消息将类似于“请输入有效值”。

如果您正在创建自己的表单验证脚本，请确保在无效的表单控件上包含 aria-invalid，以及样式（使用 [aria-invalid="true"] 属性选择器）和消息（使用 aria-errormessage）以帮助用户了解错误所在以及如何修复错误。

值

grammar

检测到语法错误。

false（默认）

值中没有检测到错误。

spelling

检测到拼写错误。

true

用户输入的值未通过验证。

此列表中不存在的任何值都将被视为 true。

示例

以下代码段显示了两个表单字段的简化版本，其中附加了验证函数到 blur 事件。请注意，由于 aria-invalid 的默认值为 false，因此严格来说没有必要将该属性添加到输入。

html
<ul>
  <li>
    <label for="name">Full Name</label>
    <input
      type="text"
      name="name"
      id="name"
      aria-required="true"
      aria-invalid="false"
      onblur="checkValidity('name', ' ', 'Invalid name entered (requires both first and last name)');" />
  </li>
  <li>
    <label for="email">Email Address</label>
    <input
      type="email"
      name="email"
      id="email"
      aria-required="true"
      aria-invalid="false"
      onblur="checkValidity('email', '@', 'Invalid email address');" />
  </li>
</ul>

请注意，没有必要在 blur 时立即验证字段；应用程序可以等到表单提交时再验证（尽管这并不一定推荐）。

以下代码段显示了一个非常简单的验证函数，它只检查是否存在特定字符（在现实世界中，验证可能会更加复杂）

js
function checkValidity(id, searchTerm, msg) {
  const elem = document.getElementById(id);
  if (elem.value.includes(searchTerm)) {
    elem.setAttribute("aria-invalid", "false");
    updateAlert();
  } else {
    elem.setAttribute("aria-invalid", "true");
    updateAlert(msg);
  }
}

以下代码段显示了 alert 函数，这些函数添加（或删除）错误消息

js
function updateAlert(msg) {
  const oldAlert = document.getElementById("alert");
  if (oldAlert) {
    oldAlert.remove();
  }

  if (msg) {
    const newAlert = document.createElement("div");
    newAlert.setAttribute("role", "alert");
    newAlert.setAttribute("id", "alert");
    const content = document.createTextNode(msg);
    newAlert.appendChild(content);
    document.body.appendChild(newAlert);
  }
}

请注意，alert 的 ARIA role 属性设置为 alert。

关联角色

用于角色

继承到角色

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# aria-invalid

另请参阅