online Editor
aria-invalid属性 | WAI-ARIA - HTMLリファレンス
aria-invalid属性 - HTML5のWAI-ARIA属性、aria-invalid属性のサンプルです。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>sample1</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> [aria-invalid=true]{ border-color:red; } </style> </head> <body> <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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $("#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; } }); </script> </body> </html>
HTMLを反映する >>
タグ:
HTML
WAI-ARIA
Web Creative Park