Question

我自动生成一个测验页面，其中包含单选，多选和用户输入类型的问题。为了确保所有问题都得到解答，我使用的是jQuery Validation Plugin。

这适用于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元素都基于问题表中的question_ID）

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

Answer 1

您的命名如下......

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验证创建的。但是，由于jQuery Validate插件会自动禁用HTML5验证，因此插件似乎没有正确实现。请展示问题的jsFiddle演示。

jQuery Validation插件 - 复选框

1 个答案: