私は次のHTMLを持っています:
<div class="large-4 columns genderSection">
{# <div class="left label"><h3>{{ 'PEOPLE'|trans }}</h3><sub class="asterisk">*</sub></div> #}
<div class="row">
<div class="large-4 columns selection">
<p>Total number of:</p>
</div>
<div class="large-4 columns maleDropDown">
<label>{{ 'MALE'|trans }}</label>
<select class="sel-box" required>
<option value="" selected="selected"></option>
<option value="01">01</option>
<option value="02">02</option>
</select>
<input class="hide" data-highlight-code="2090" id="males" name="numberOfMales" tabindex="17" type="text" value="0" autocomplete="off" />
</div>
<div class="large-4 columns femaleDropDown">
<label>{{ 'FEMALE'|trans }}</label>
<select class="sel-box" required>
<option value="" selected="selected"></option>
<option value="01">01</option>
<option value="02">02</option>
</select>
<input class="hide" data-highlight-code="2090" id="females" name="numberOfFemales" tabindex="17" type="text" value="0" autocomplete="off" />
</div>
</div>
</div>
それは正常に動作しますが、フォームの送信をクリックすると、2つの選択は検証されず、それらに焦点を合わせてから検証がトリガーされます。
私の知る限り、「require」属性は、各入力または選択の検証をトリガーするのに十分なはずです。
2つの選択がある場合、それらを何らかの方法で区別する必要がありますか?