问题
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.
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>
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.
Did I miss something in the HTML I generated? Any help is appreciated. If you need to see more of my code, please do let me know.
(Note : Each group name corresponds to the question number, and each ID element is based on the question_ID in the questions table)
EDIT : Added the changes Sparky suggested!
回答1:
Your naming is as follows...
name="0"
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: https://stackoverflow.com/a/79022/594235
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/
I suggest that you change your name to match your id, which is also a common practice when constructing forms.
name="check[0]" id="check[0]"
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.
来源：https://stackoverflow.com/questions/18961368/jquery-validation-plugin-checkboxes