複数の入力タイプのグループにHTML5必須の属性

Question

複数のタイプの入力タイプを含む1つのdivがあります。つまり、テキスト、ラジオ、チェックボックス... divを必須にしたいです。つまり、ラジオやチェックボックスをチェックするか、テキストフィールドに値を入力すると、必須条件が満たされます。すなわち、いずれか1つを選択することにより条件が満たされる。すべてが値なしで残っている場合は、divの下に角度メッセージ（ng-messages）を表示する必要があります。 このコードはJavascriptから動的に生成されます。したがって、フォームを提出する際に検証を行う必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 

 
<div id="div1"><!--This div is mandatory--> 
 

 

 
<input type="checkbox" name="div1" value="SomeValue" ng-model="vm.check1">Some<br/> 
 

 
<input type="checkbox" name="div1" value="SomeValue2" ng-model="vm.check2">Some2<br/> 
 

 
<input type="radio" name="div1" value="Male">Male<br/> 
 
<input type="radio" name="div1" value="Female">Female<br/> 
 
<input type="text" name="div1" ng-model="text1"><br/> 
 
</div> 
 

 
<div></div><!--Should display ng-messages here if none of the above selected.--> 
 
<br/><br/> 
 
<div id="div2"><!--This div is mandatory--> 
 
<input type="checkbox" name="div2" value="SomeValue" ng-model="vm.check3">Some<br/> 
 

 
<input type="checkbox" name="div2" value="SomeValue2" ng-model="vm.check4">Some2<br/> 
 
</div> 
 
<div></div><!--Should display ng-messages here if none of the above selected.-->

これを達成するための任意の可能性はありますか？

Answer 1

はい、入力フィールドのすべてのグループをfieldsetにラップし、次にrequired属性をそのfieldsetに適用することで、これを行うことができます。

各フィールドを異なるものと見なすには、各フィールドの名前属性が異なる必要があることを確認してください。性別ラジオボタンと同じ名前にすることができます。

<!--Below field input fields are mandatory now--> 
<fieldset id="div1" required=""> 
    <input type="checkbox" name="check1" value="SomeValue" ng-model="vm.check1">Some<br/> 
    <input type="checkbox" name="check2" value="SomeValue2" ng-model="vm.check2">Some2<br/> 
    <input type="radio" name="gender" value="Male">Male<br/> 
    <input type="radio" name="gender" value="Female">Female<br/> 
    <input type="text" name="text1" ng-model="text1"><br/> 
</fieldset>