Я автоматически создаю страницу викторины с одним выбором, несколькими вариантами выбора и пользовательскими типами вопросов. Чтобы ответить на все вопросы, я использую плагин проверки jQuery.
Это хорошо работает для Radiobuttons и Textboxes, но не работает при встрече с флажками. Моя форма (динамически созданная с учетом вопросов и выбора из MySQL) генерируется следующим образом:
<script>
$(document).ready(function () {
$("#form1").validate({
invalidHandler: function() {
alert('FAILED validation');
},
submitHandler: function() {
alert('PASSED validation');
}
});
});
</script>
<style>
form.form1 label.error { display: none; }
</style>
<form id="form1" name="form1" method="post" action="survsubmit.php">
<fieldset>
1 . Question One
<br/>
<fieldset>
<label for="check[0]">
<input type="checkbox" class="checkbox" id="check[0]" name="check[0]" value="Opt One" required="required" minlength="2">Opt One
</label>
<br />
<label for="check[1]"><input type="checkbox" class="checkbox" id="check[1]" name="check[0]" value="Opt Two">Opt Two
</label>
<br />
<label for="check[2]"><input type="checkbox" class="checkbox" id="check[2]" name="check[0]" value="Opt Three">Opt Three
</label>
<br />
<label for="check[3]"><input type="checkbox" class="checkbox" id="check[3]" name="check[0]" value="Opt Four">Opt Four
</label>
<br />
<label for="0" class="error" style="display:none"> Please select at least one option. </label>
<br/>
</fieldset>
2 . Question Two
<br/>
<fieldset>
<label for="check[4]">
<input type="checkbox" class="checkbox" id="check[4]" name="check[1]" value="aaaa" required="required" minlength="2">aaaa
</label>
<br />
<label for="check[5]"><input type="checkbox" class="checkbox" id="check[5]" name="check[1]" value="bbbb">bbbb
</label>
<br />
<label for="check[6]"><input type="checkbox" class="checkbox" id="check[6]" name="check[1]" value="cccc">cccc
</label>
<br />
<label for="check[7]"><input type="checkbox" class="checkbox" id="check[7]" name="check[1]" value="dddd">dddd
</label>
<br />
<label for="1" class="error" style="display:none"> Please select at least one option. </label>
<br/>
</fieldset>
3 . Question Three
<br/>
<input type="radio" name="radio[2]" id="radio[8]" value="Yes" required/>Yes
<br />
<input type="radio" name="radio[2]" id="radio[9]" value="No" required/>No
<br />
<label for="2" class="error" style="display:none"> Please select at least one option. </label>
<br/>
<br/>
<br/>
<input type="submit" value="Submit!" />
</fieldset>
</form>
На данный момент это работает, только если я выбираю самый первый вариант в каждом флажке. (Даже если я выбираю вариант 2,3 и 4, он все равно дает мне ошибку, говоря, что мне нужно проверить первый квадрат.
Я пропустил что-то в HTML, который я сгенерировал? Любая помощь приветствуется. Если вам нужно больше узнать о моем коде, пожалуйста, дайте мне знать.
(Примечание. Каждое имя группы соответствует номеру вопроса, и каждый элемент ID основан на вопросе_ID в таблице вопросов)
EDIT: Добавлены изменения, которые предложил Спарки!
Ваше имя выглядит следующим образом...
name="0"
В зависимости от вашего doctype
это может быть недействительным HTML. По крайней мере, это плохая практика, поскольку не все браузеры или фреймворки JavaScript будут обрабатывать ее одинаково. См. qaru.site/questions/693/...
Тем не менее, так бывает, что ваш код работает в моей версии Firefox (я могу установить флажок 2, 3 или 4, и я не получаю сообщение проверки, требующее проверки первого поля): http://jsfiddle.net/бод/
Я предлагаю вам изменить свое name
в соответствии с вашим id
, что также является обычной практикой при создании форм.
name="check[0]" id="check[0]"
Ваши всплывающие окна создаются с помощью проверки HTML5. Однако, поскольку проверка HTML5 должна быть автоматически отключена плагином jQuery Validate, похоже, что плагин не выполняется должным образом. Пожалуйста, покажите демонстрационную версию jsFiddle.