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

另請參閱