jQuery Validation Plugin - Checkboxes

Question

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!

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

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.

edited May 23 '17 at 10:31

Community

1
1

answered Sep 23 '13 at 15:35

Sparky

94,381
25
183
265

Thank you for that tip, I've named them as Check[Q.No] and Radio[Q.No] now! Also, you're right! I'm now stumped as to why it isn't working for me when I execute my code! Would it be ok if I shared a major portion of my code with you, in order to dig deeper? – Sainath Krishnan Sep 23 '13 at 16:05
@SainathKrishnan, I'd prefer that you construct a concise jsFiddle demo and include any relevant code in your OP. Thanks. – Sparky Sep 23 '13 at 16:07
Strangely enough the fiddle where I put up this code seems to work fine! Which is why I am starting to doubt there is something in my page which is unexpectedly interfering with the working of this plugin. (Although I'm confused as it works fine for Radio buttons/text boxes). Would the jQuery version matter here? If it helps I am using jquery-1.4.4.min.js. – Sainath Krishnan Sep 23 '13 at 16:16
Forgot to mention this, I am not getting a "FAILED Validation" Message at all. I am just getting a small popup that says "Please check this box to proceed" which points at my very first option. Would that mean the form1.validate function is not being called at all? – Sainath Krishnan Sep 23 '13 at 16:19
@SainathKrishnan, the jQuery Validate plugin does not create popups. Sounds like HTML5 browser validation is your popup, although the jQuery Validation plugin is supposed to disable HTML5 validation automatically. Why can't you update your jQuery version? – Sparky Sep 23 '13 at 16:26
Just never felt the need to so far! I'll get on that now. Would you recommend 1.9.1? – Sainath Krishnan Sep 23 '13 at 16:30
@SainathKrishnan, I'm still using 1.8.3 but the version would depend on what kinds of browsers you want to support. I suggest reading the jQuery blogs. – Sparky Sep 23 '13 at 16:34
Found the same advice based on IE support, in some blogs. Updated my version to 1.8.3! However, same issue still applies. Is there any way I can disable the HTML5 validation? – Sainath Krishnan Sep 23 '13 at 16:37
Looks like adding a "novalidate" tag to my form does the trick! Give me a moment let me test it and confirm that everything is working! – Sainath Krishnan Sep 23 '13 at 16:39
@SainathKrishnan, the jQuery Validate plugin dynamically and automatically adds a `novalidate="novalidate"` to the `form` tag... it doesn't sound like jQuery Validate is working at all. – Sparky Sep 23 '13 at 16:40
It seems that way! Because when I did some actual testing, I realised the form is not validating at all now! – Sainath Krishnan Sep 23 '13 at 16:43
@SainathKrishnan, Please create a jsFiddle that shows the broken code. – Sparky Sep 23 '13 at 16:50
Unable to replicate this issue in jsFiddle! Could you please look at this instead? This is the exact code of the page, when fully generated! http://pastebin.com/4LNcb23T – Sainath Krishnan Sep 23 '13 at 17:02
@SainathKrishnan, Looks you're including jQuery twice... this usually breaks things. The second time is immediately after jQuery Validate. You also still have the old naming in there, `name="0"`. – Sparky Sep 23 '13 at 17:11
Removed the second instance of it! Still does not validate anything at all! The novalidate tag does not have any effect on the jQuery validation, does it? – Sainath Krishnan Sep 23 '13 at 17:15
@SainathKrishnan, the `novalidate` tag is dynamically put there by the jQuery Validate plugin, so "no". You also still have the old naming in there, `name="0"`. – Sparky Sep 23 '13 at 17:19
Whoops, Missed that! Still does not validate after change (Page just submits). Is there anything else that I've messed up in that code? – Sainath Krishnan Sep 23 '13 at 17:30
@SainathKrishnan, nothing else jumps out at me. Look, it works in the jsFiddle. So just go through line-by-line and compare the _rendered_ code of the jsFiddle to your page's _rendered_ code. I'm sure you'll find something different. Use the full page version: http://jsfiddle.net/bAUDs/show/ – Sparky Sep 23 '13 at 17:33
I looked at it line by line, and even made a few changes to get them exactly similar, still no dice! This is the FULL code of my page, I only removed the header and footer (Which are pretty much just some links) after confirming that it does not work even without them! http://pastebin.com/LHL8y6HE – Sainath Krishnan Sep 23 '13 at 18:09
@SainathKrishnan, this is the code from your pastbin, working fine in a jsFiddle: http://jsfiddle.net/GsTes/ ~ Sorry, I cannot help you further other than to show you your code is working as expected. – Sparky Sep 23 '13 at 18:17
Thanks for all the help Sparky, I'll try and figure it out! – Sainath Krishnan Sep 23 '13 at 18:34

jQuery Validation Plugin - Checkboxes

1 Answers1

Linked