Флажки и HTML5 «требуется»

Question

Вот моя ссылка: http://vkacademy.in/medvanndemo/normal.html

выберите объект имеет три галочки. Я включил атрибут required в первый флажок для проверки HTML5 для этих флажков.

Проблема, с которой я столкнулась, - это не группировка всех флажков, так что один из них выбирается при отправке.

<form name="vk" action="" method="post"/> 

Name:<input type="name" name="username" value="" required/><br/><br/> 
password:<input type="password" name="password" value="" required/><br/><br/> 
Please select subject: 
<input name="subject[]" type="checkbox" value="all" required>All Subject 
<input name="subject[]" type="checkbox" value="science" >Science 
<input name="subject[]" type="checkbox" value="maths">Maths<br/><br/><br/> 

Please select Subject for class twelve<br/> 

<input type="checkbox" name="classfivesubject[]" id="mat" value="BScTuition (Physics)" required >BScTuition (Physics)<br/> 
<input type="checkbox" name="classfivesubject[]" id="mat" value="BSc Tuition (Chemistry)">BSc Tuition (Chemistry)<br/> 
<input type="checkbox" name="classfivesubject[]" id="mat" value="BCA Tuition (Computer)">BCA Tuition (Computer)<br/> 
<input type="checkbox" name="classfivesubject[]" id="mat" value="BCA Tuition (IT)">BCA Tuition (IT)<br/> 
<input type="checkbox" name="classfivesubject[]" id="mat" value="BSc Tuition (Biology)">BSc Tuition (Biology)<br/> 
<input type="checkbox" name="classfivesubject[]" id="mat" value="BSc Tuition (MicroBiology)">BSc Tuition (MicroBiology)<br/> 
<input type="checkbox" name="BSc Tuition (MicroBiology)" id="mat" value="BSc Tuition (MicroBiology)">BSc Tuition (MicroBiology) 
<input type="checkbox" name="BSc Tuition (Zoology)" id="mat" value="BSc Tuition (Zoology)">BSc Tuition (MicroBiology)<br/> 
<input type="submit" name="submit" value="Submit"/> 
</form> 

Answer 1

Нет стандартного способа HTML5 для этого. вы можете использовать Jquery для такой проверки.

Answer 2

С кодом возникает ряд проблем;

1) Вы закрыли тег формы самостоятельно. В то время как многие браузеры будут игнорировать это, избавьтесь от закрытого пользователя />.

2) Если вы хотите, чтобы пользователь выбирал один из вариантов из списка, например поле вашего объекта, вы должны использовать переключатели;

<input name="subject" type="radio" value="all" selected>All Subject 
<input name="subject" type="radio" value="science">Science 
<input name="subject" type="radio" value="maths">Maths 

В дополнение к этому, вы не можете использовать required аргумент для флажков (в массиве флажков *) или радио-кнопки. Для переключателей вы можете принудительно выбрать параметр, используя аргумент selected по одному из вариантов (как правило, первый), как я это сделал выше.

3) Вы не указали то же самое name всем Класс 5 Предмет checkboxes. Я предполагаю, что это всего лишь ошибка. Используйте classfivesubject[] для всех из них или просто classfivesubject, если вы используете переключатели.

4) Вы даете то же самое id нескольким элементам. Это плохое кодирование. id должен отображаться один раз на странице и один раз. Чтобы использовать стили или другие функции для нескольких элементов, используйте class.

<input id="mat"> <!-- use once --> 
<input class="mat"> <!-- can use multiple times --> 

Надеюсь, это поможет.

* Вы можете использовать его только на одной флажке, например, чтобы подтвердить, что пользователь принял условия.