入力必須のラジオボタンでエラーが表示されない

概要

カスタマイズしたラジオボタンに required や aria-required="true" を設定しても未入力で先に進もうとした時のエラー「これらのオプションから1つ選択してください」が表示されない問題。

結論

先に答えを言っちゃうと、直接スタイル編集できないラジオボタン等は display: none; にして <label> か <div> でボタンもどきを作るでしょう。その display: none; が原因。
opacity: 0; にするなど非表示でなく透明化すれば済む。

構造と解説

ラジオボタンのカスタマイズは inputタグを非表示にし、その代わり label タグでラベリングした div などの部品をクリックさせる仕組みを取る。

これはラジオボタン自体がスタイルシートによる変形に対応していない仕様のため。代わりに div などに画像や背景色などのデザインを施し、クリックした時には checked の属性が付加されることを利用して、checked が有効の時のスタイルを記述することで擬似的なボタンとなる。

HTML

<input class="btn1" type="radio" name="btn" value="1" id="btn1" aria-required="true" required>
<label for="btn1">
  <div>選択肢1</div>
</label>
<label for="btn2">
  <div>選択肢2</div>
</label>

CSS

.btn1, .btn2 {
  display: none;
}

.btn1 + label, .btn2 + label {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  cursor: pointer;
  z-index: 1;
  border: solid 2px #ccc;
  background-color: #fff;
}

.btn1 + label:hover, .btn2 + label:hover {
  border: solid 2px #fcc;
}

.btn1:checked + label, .btn2:checked + label {
  border: solid 2px #fcc;
  background-color: #fee;
}

ざっくりこう書けば擬似ラジオボタンの動きを持つオリジナルボタンができる……が、先述の未入力エラーは表示されなくなる。

原因

inputタグに display:none; が設定されているから。
当然エラーメッセージも非表示となる。

対処方法

これを

.btn1, .btn2 {
  display: none;
}

こうする

.btn1, .btn2 {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

非表示にさせないで透明化すればエラーメッセージが表示されるようになります。