jQuery验证插件 - 复选框 [英] jQuery Validation Plugin - Checkboxes

问题描述

我自动生成一个具有单选题，多选题和用户输入问题类型的测验页面。为了确保所有问题都得到解答，我使用jQuery验证插件。

I am auto generating a quiz page with single choice, multi choice and user input types of questions. In order to ensure all questions have been answered, I am using the jQuery Validation Plugin.

这对Radiobuttons和Textboxes很有效，但遇到复选框时失败。我的表单（通过从MySQL的问题和选择动态生成）代码生成如下：

This is working well for Radiobuttons and Textboxes, but fails when encountering checkboxes. My form (dynamically generated by taking questions and choices from MySQL) code is generated as below :

<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 AND 4选项，它仍然给我一个错误，我需要检查第一个框。

As of now, This only works if I select the very first option in each checkbox. (Even if I select option 2,3 AND 4, it still gives me an error saying I need to check the first box.

我错过了HTML

（注意：每个组名称对应于问题编号，每个ID元素基于问题表中的question_ID）

(Note : Each group name corresponds to the question number, and each ID element is based on the question_ID in the questions table)

编辑：添加了Sparky建议的更改！

EDIT : Added the changes Sparky suggested!

推荐答案

您的命名如下...

name="0"

根据您的 doctype ，这可能无效HTML。至少它是糟糕的做法，因为并非所有浏览器或JavaScript框架都会处理它。请参阅： http：// stackoverflow .com / a / 79022/594235

Depending on your doctype, this could be invalid HTML. At the very least it's bad practice, since not all browsers or JavaScript frameworks will handle it the same. See: http://stackoverflow.com/a/79022/594235

但是，这样的情况是，您的代码在我的Firefox版本中工作（ 2，3或4，但我没有收到确认讯息，要求我检查第一个方框）： http ：//jsfiddle.net/bAUDs/

However, it so happens that your code is working in my version of Firefox (I can check box 2, 3, or 4 and I do not get a validation message requiring that I check the first box): http://jsfiddle.net/bAUDs/

我建议您更改名称以匹配

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

---

b $ b

您的弹出式窗口正在通过HTML5验证创建。但是，由于HTML5验证应该由jQuery Validate插件自动禁用，所以似乎该插件没有正确实现。请显示问题的jsFiddle演示。

---

Your popups are being created by HTML5 validation. However, since HTML5 validation is supposed to be automatically disabled by the jQuery Validate plugin, it seems like the plugin is not being properly implemented. Please show a jsFiddle demo of the problem.

这篇关于jQuery验证插件 - 复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！