jQuery validation plugin checkbox validation

Question

I need to validate the form. I am using jQuery validation plugin but I cannot seem to get this working.

<form id="form1" name="form1" action=<?=$_SERVER['PHP_SELF'];?> method="POST">
<div>
        <h3>Cardio-Pulmonary System</h3>
        <div style="border: medium none;display: inline;padding: 0;text-align:left">
        <h4>1. Do you have, or have you had, or do you take medications for?</h4>
        <label><input class="checkbox" type="checkbox" value="none" name="q1[]" />no / or none of the below</label>
        <p><input class="checkbox" type="checkbox" value="q1-1" name="q1[]" />heart disease (please specify)
        <input class="checkbox" type="text" id="text" name="q1-1" value="" /></p>
        <p><input class="checkbox" type="checkbox" value="high blood pressure" name="q1[]" />high blood pressure</p>
        <p><input class="checkbox" type="checkbox" value="high cholesterol" name="q1[]" />high cholesterol</p>
        <p><input class="checkbox" type="checkbox" value="diabetes" name="q1[]" />diabetes</p>
        <p><input class="checkbox" type="checkbox" value="q1-2" name="q1[]" />lung disorder (eg asthma, emphysema)
        <input class="checkbox" type="text" id="text" name="q1-2" value="" /></p>
        <p><input class="checkbox" type="checkbox" value="other cardiac problem" name="q1[]" />other cardiac problem (include pacemaker)</p>

        <h4>2. Do you have a family history of?</h4>
        <p><input type="checkbox" value="none" name="q2[]" />no / or none of the below</p>
        <p><input type="checkbox" value="heart murmur" name="q2[]" />heart murmur</p>
        <p><input type="checkbox" value="valve defect" name="q2[]" />valve defect</p>
        <p><input type="checkbox" value="racing heart" name="q2[]" />racing heart</p>
        <p><input type="checkbox" value="irregular beats" name="q2[]" />irregular beats</p>
        <p><input type="checkbox" value="angina" name="q2[]" />angina</p>
        <p>other<br/><input type="text" id="text" value="" name="q2[]" /></p>

        <h4>3. Have you ever been told that you have heart problems? Eg</h4>
        <p><input type="checkbox" value="none" name="q3[]" />no / or none of the below</p>
        <p><input type="checkbox" value="heart disease" name="q3[]" />heart disease</p>
        <p><input type="checkbox" value="high blood pressure" name="q3[]" />high blood pressure</p>
        <p><input type="checkbox" value="high cholesterol" name="q3[]" />high cholesterol</p>
        <p><input type="checkbox" value="diabetes" name="q3[]" />diabetes</p>
        <p><input type="checkbox" value="stroke" name="q3[]" />stroke</p>

        <h4>4. Do you have, or have you experienced?</h4>
        <p><input type="checkbox" value="none" name="q4[]" />no / or none of the below</p>
        <p><input type="checkbox" value="epilepsy" name="q4[]" />epilepsy</p>
        <p><input type="checkbox" value="fainting" name="q4[]" />fainting</p>
        <p><input type="checkbox" value="seizures" name="q4[]" />seizures</p>
        <p><input type="checkbox" value="dizzy spells" name="q4[]" />dizzy spells</p>
        <p><input type="checkbox" value="convulsions" name="q4[]" />convulsions</p>

        <h4>5. Have you ever smoked cigarettes?</h4>
        <p><input type="checkbox" value="q5-1" name="q5[]" />Yes, still do approx <input type="text" name="q5-1" style="width:20px" maxlength="3" /> a day</p>
        <p><input type="checkbox" value="q5-2" name="q5[]" />Yes, but stopped <input type="text" name="q5-2" style="width:20px" maxlength="3" /> months / <input type="text" name="q5-3" style="width:20px" maxlength="3" /> years ago. </p>
        <p><input type="checkbox" value="never" name="q5[]" />Never</p>
    </div>
    </form>

How do you validate checkboxes so that they need to select at least one for each question?

This is my form...http://test9.favstay.com/form.php

Also I'm not sure why only one error message is popping up where it should be one for each input box validated... — Jae Choi
– Jae Choi, Commented Jul 3, 2011 at 7:54
Jae, I also advise you use CSS files to put your formatting in. Adding ID's(or class's) to your forms checkboxes also helps in validation — Brad
– Brad, Commented Jul 4, 2011 at 0:07

Brad · Accepted Answer · 2011-07-03 23:59:55Z

1

Use min and max length

<input type="checkbox" value="palin" name="upd" id="upd"/>
</p>
<p>
<label for="fox">Fox</label>
<input type="checkbox" value="fox" name="upd" id="upd" />
</p>
<p>
<label for="left">Left</label>
<input type="checkbox" value="left" name="upd" id="upd" />
</p>

Validate

$("#upd").rules("add", {
        required: true,
        minlength: 1,
        maxlength: 1,
    messages: {
        required: "Please pick a category",
        minlength: jQuery.format("Please, Check at least one box"),
        maxlength: jQuery.format("Please, You checked too many boxes"),
    }
});

Add an ID for each checkbox(q4, q5 etc), Substitute your q3, q4 etc where I have #upd. Just adapt this to your needs.

answered Jul 3, 2011 at 23:59

Brad

1,7011 gold badge27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

timbrown Over a year ago

-1 - you can't have multiple elements on the page with the same ID

Rakesh · Accepted Answer · 2011-07-03 07:37:32Z

0

You can use jquery validation plugin to validate an HTML form, and to validate the checkboxes, you can add "custom selectors" to the validate options. Check out the example here

answered Jul 3, 2011 at 7:37

Rakesh

4,3424 gold badges35 silver badges58 bronze badges

Collectives™ on Stack Overflow

jQuery validation plugin checkbox validation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related