html - リストの HTML5 検証

Question

チェックボックスのグループで HTML5 必須の検証を行うにはどうすればよいですか? 基本的に、ul 内にいくつかのチェックボックスを使用して、「次の 1 つ以上を選択する」などのオプションがあります。ul レベルで必須属性を設定しても、何も起こりません。入力レベルで設定すると、すべての値をチェックして検証する必要があります。ユーザーに少なくとも1つの値を選択させるようにしたい. これは Radio タイプでは問題なく動作するようですが、チェックボックス (複数の選択肢がある場合) では動作しません。

HTMLは次のとおりです。

  <form> 
   <!-- in this case, I set required at the ul level !-->
   <ul required="required" validationMessage="You must enter a gender">
      <li>
        <input id="male" name="mf" type="checkbox" value="Male" />
        <label  for="male">Male</label>
      </li>
      <li>
        <input id="female" name="mf"  type="checkbox" value="Female" />
        <label for="female">Female</label>
      </li>
    </ul>
   <!-- in this case, I set it at the input level -->
   <ul required="required" validationMessage="You must enter a gender2">
      <li>
        <input id="male2" name="mf2" type="checkbox" value="Male2" required />
        <label  for="male">Male2</label>
      </li>
      <li>
        <input id="female2" name="mf2" type="checkbox" value="Female2" required />
        <label for="female">Female2</label>
      </li>
    </ul>
   <input type="submit" value="submit">
  </form>

注意すべきこと: 私は Kendo を使用して、ブラウザー間で検証を機能させています (この問題に対する Kendo 化されたソリューションがある場合)。