0

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

这适用于单选按钮和文本框，但在遇到复选框时会失败。我的表单（通过从 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 建议的更改！

4

1 回答 1

0

您的命名如下...

name="0"

根据您的doctype，这可能是无效的 HTML。至少这是不好的做法，因为并非所有浏览器或 JavaScript 框架都会以相同的方式处理它。请参阅： https ://stackoverflow.com/a/79022/594235

但是，碰巧您的代码在我的 Firefox 版本中运行（我可以选中框 2、3 或 4，但我没有收到要求我选中第一个框的验证消息）：http: //jsfiddle.net /b澳元/

我建议您更改 yourname以匹配您的id，这也是构建表单时的常见做法。

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

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

于 2013-09-23T15:35:08.853 回答