2013-09-23 9 views
0

Я автоматически создаю страницу викторины с одним выбором, несколькими вариантами выбора и пользовательскими типами вопросов. Чтобы ответить на все вопросы, я использую плагин проверки jQuery.Плагин проверки jQuery - флажки

Это хорошо работает для радиолюбителей и текстовых ящиков, но при встречающихся флажках они не работают. Моя форма (динамически принимая вопросы и выбор из 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 элемента основан на question_ID в таблице вопросов).

EDIT: Добавлена изменения, предложенные Sparky!

ответ

0

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

name="0" 

В зависимости от вашего doctype это может быть недействительным HTML. По крайней мере, это плохая практика, поскольку не все браузеры или фреймворки JavaScript будут обрабатывать ее одинаково. См: https://stackoverflow.com/a/79022/594235

Однако бывает так, что ваш код работает в моей версии Firefox (я могу проверить коробку 2, 3 или 4, и я не получаю сообщение проверки, требующее, чтобы проверить первое поле): http://jsfiddle.net/bAUDs/

Предлагаю вам изменить свой name в соответствии с вашим id, что также является распространенной практикой при построении форм.

name="check[0]" id="check[0]" 

Ваши всплывающие окна создаются путем проверки HTML5. Однако, поскольку проверка HTML5 должна быть автоматически отключена плагином jQuery Validate, похоже, что плагин не выполняется должным образом. Пожалуйста, покажите демонстрационную версию jsFiddle.

+0

Спасибо за этот совет, я назвал их как Check [Q.No] и Radio [Q.No] сейчас! Кроме того, вы правы! Я сейчас в тупике, почему он не работает для меня, когда я выполняю свой код! Было бы хорошо, если бы я разделил основную часть моего кода с вами, чтобы копать глубже? –

+0

@SainathKrishnan, я бы предпочел, чтобы вы построили краткую демонстрацию jsFiddle и включили любой соответствующий код в ваш OP. Благодарю. – Sparky

+0

Как ни странно, скрипка, на которой я поставил этот код, кажется, работает нормально! Вот почему я начинаю сомневаться, что на моей странице есть что-то, что неожиданно мешает работе этого плагина. (Хотя я запутался, так как он отлично подходит для кнопок радио/текстовых полей). Будет ли версия jQuery иметь значение здесь? Если это помогает, я использую jquery-1.4.4.min.js. –

Смежные вопросы