Плагин проверки jQuery - флажки

0

Я автоматически создаю страницу викторины с одним выбором, несколькими вариантами выбора и пользовательскими типами вопросов. Чтобы ответить на все вопросы, я использую плагин проверки 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: Добавлены изменения, которые предложил Спарки!

Теги:
checkbox
jquery-validate

1 ответ

0

Ваше имя выглядит следующим образом...

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.

  • 0
    Спасибо за этот совет, я назвал их сейчас Check [Q.No] и Radio [Q.No]! Также ты прав! Теперь я озадачен тем, почему это не работает для меня, когда я выполняю свой код! Было бы хорошо, если бы я поделился с вами большей частью своего кода, чтобы копать глубже?
  • 0
    @SainathKrishnan, я бы предпочел, чтобы вы создали краткую демонстрацию jsFiddle и включили любой соответствующий код в ваш OP. Благодарю.
Показать ещё 19 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню