単一選択、複数選択、およびユーザー入力タイプの質問を含むクイズページを自動生成しています。すべての質問に確実に回答するために、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が提案した変更を追加しました!