aria-invalid属性
aria-invalid属性は不正な値を入力された入力フォームに対して指定を行うWAI-ARIA属性です。
以下は入力必須項目が未入力時にjQueryでaria-invalid属性をセットするサンプルです。(JavaScriptによるバリデーションを行うため、required属性に対するフォームのバリデーションはnovalidate属性で抑制しています。)
CSS
[aria-invalid=true]{
border-color:red;
}
HTML
<form action="#" id="submit_form" novalidate>
<label for="email">Email:<input type="email" id="email" aria-required="true" required></label>
<input type="submit" value="送信">
</form>
JavaScript
$("#submit_form").submit(function(){
//フォームのバリデーション
$(this).find("[aria-required]").each(function(){
$(this).attr("aria-invalid",$(this).val()?false:true);
});
//インバリッドの場合は送信を抑制
if($(this).find("[aria-invalid]").length>0){
return false;
}
});
参考URL
登録日 : 2015年10月11日 最終更新日 : 2015年10月12日
同じカテゴリー(WAI-ARIA)のエントリー
- aria-required属性
- aria-current属性
- aria-orientation属性
- aria-multiselectable属性
- aria-multiline属性
- aria-live属性
- aria-level属性
- aria-labelledby属性
- aria-label属性
- aria-invalid属性
- aria-hidden属性
- aria-haspopup属性
- aria-grabbed属性
- aria-flowto属性
- aria-expanded属性
- aria-dropeffect属性
- aria-disabled属性
- aria-describedby属性
- aria-checked属性
- aria-controls属性
- aria-busy属性
- aria-autocomplete属性
- aria-atomic属性
- aria-activedescendant属性
- role属性