Help with checkbox and radio button validation
Hi,
Ive just started using jquery validation, and ive played around with the demo scripts provided. I am trying to apply it to a form, and i am able to do it with selects, and text inputs but no luck with checkbox and radio buttons. My code seem well, i'm not really sure what the problem is. This is the script
- <script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
- ......................
- $("#opap").validate({
- rules: {
- item1: {
- required: true,
- minlength: 2 },
- item2: {
- required: true,
- minlength: 1 }
- },
-
- messages: {
- item1: {
- required: "Please select",
- minlength: "Please select atleast two items" },
- item2: {
- required: "Please select ",
- minlength: "Please select atleast one item" },
-
- }
-
- }); // End validation rules/messages
The messages set above are not displayed in all the form inputs, i have to set it again in the input with class="required" minlength="2". However even that doesn't work with the checkbox and radio button inputs, i've even tried validate="required:true, minlength:2".
And this is the section of the form it should validate:
- <div id="item1>
- <input name="tech" id="biov" type="checkbox" value="" class="required" minlength="2" /> One <br />
- <input name="tech" id="ebio" type="checkbox" value="" /> Two <br />
- <input name="tech" id="mna" type="checkbox" value="" /> Three <br />
- <input name="tech" id="phyt" type="checkbox" value="" /> Four <br />
- <!--<label for="tech" title="Please select at least two remediation technologies. "></label> -->
- <label for="tech" class="error">Please select at least two remediation technologies.</label>
- </div> <!-- End tech -->
- <div id="subc> SELECT CRITERIA </div>
- <input name="sust" id="eco" type="checkbox" value="nco" /> Eco <br />
- <input name="sust" id="env" type="checkbox" value="env" /> Env <br />
- <input name="susti" id="soc" type="checkbox" value="soc" /> Soc <br /><br/>
- <label for="sust" class="required" minlength="2" > </label>
- </div> <!-- End sust -->
Any help will be appreciated. Thanks