Link to home
Start Free TrialLog in
Avatar of promediagrp
promediagrp

asked on

validating groups checkboxes with jquery validate plugin in a xhtml doc

Form is at http://www.districtadministration.com/layouts/subscriptions/2print_subscribe.html

I want to validate groups of check boxes in an xhtml page. Those questions are for 'Areas of Responsibility' and 'Subscription Choices'. When the form is submitted,  a message, not alert box, should instruct user to check off at least one option if not already done.

The form took its cues from a form at http://jquery.bassistance.de/validate/demo/radio-checkbox-select-demo.html. At this site, the code that checks that at least one check box is has been selected isn't considered valid xhtml when checked at the W3C. The problem is that 'validate="required:true, minlength:1' is in the <input type> tag.

I removed this code and thought that it should go in the existing code in the head of the doc
  <script type="text/javascript">
      $.metadata.setType("attr", "validate");  
 
   $(document).ready(function(){
$("#subscriptionForm").validate({
      rules: {
            cemail: "required email",
            cemail_again: {
                  equalTo: "#cemail"
            },
            cpassword: "required password",
            cpassword_again: {
                  equalTo: "#cpassword"
            },
            arearesponsibility: {
                              required: true,
                              minLength: 1},      

      }
});
});

 I also thought I needed to add something to the jquery.validate.js file in 2 places:
      classRuleSettings: {
            required: {required: true},
            arearesponsibility:{arearesponsibility:true},      
      
      },
and
messages: {
            required: "This field is required.",
            arearesponsibility:"Please select at least one area",
},

 Any help would be appreciated. Again, my form is at http://www.districtadministration.com/layouts/subscriptions/2print_subscribe.html

Thank you in advance,
Sharon
Avatar of hielo
hielo
Flag of Wallis and Futuna image

you might find it easier to understand/implement if you break/separate the rules and messages before passing them as options. Also,read the documentation:
http://docs.jquery.com/Plugins/Validation

<script type="text/javascript">
$.metadata.setType("attr", "validate");  
  
$(document).ready(function(){
	var R={
				cemail:{required:true,email:true}
				,cemail_again:{required:true
							,email:true
							,equalTo:'#cemail'
							}
				,'arearesponsibility[]':{required:true
								,minLength:1
								}
			};
	var M={
				cemail:{required:true,email:'Invalid Email address'}
				,cemail_again:{required:'Email is a required field'
							,email:'Invalid email address'
							,equalTo:'Emails do not match'
							}
				,'arearesponsibility[]':{required:'This is a required field'
								,minLength:'You must provide a value'
								}
			};

	var E=function(error, element){
						if(element.attr('name')=='arearesponsibility[]')
						{
							error.append('<br/>').insertBefore(  "#areaResp1"  );
						}
						else
						{
							error.insertAfter(element)
						}
			};
	$("#subscriptionForm").validate({'rules': R,'messages':M, 'errorPlacement':E});

});

  </script>

Open in new window

Avatar of promediagrp
promediagrp

ASKER

Hi Hielo,
Thank you for your reply and solution. Unfortunately it didn't solve my challenge.
Thanks,
Sharon
>>Unfortunately it didn't solve my challenge.
Unfortunately, it is not clear what is your "challenge".

>>At this site, the code that checks that at least one check box is has been selected isn't considered valid xhtml when checked at the W3C
Using the code I gave you, you do not have to put any validation markup in the html. Everything is specified in the javascript part. When you are done with your page, you can move all the javascript to an external file and from your page you simply "import" it:
<script type='text/javascript" src="http://www.yoursite.com/yourFile.js"></script>


I tested the code I posted above with your markup and it worked fine. I only validated the first group of checkboxes. I expected YOU to put/integrate the needed validation code for the other group of checkboxes. I want you to analyze what I did, and make an effort to integrate the validation for the other group of checkboxes. If you are still stuck then, then post back with whatever problems you are having and also include the code you attempted to use.

I am trying to help/teach you, not do it for you. If I do it for you, you won't learn it.

Regards,
Hielo
Hi Hielo,

Thanks. I am very interested in learning. I've done a lot of reading and troubleshooting prior to posting to this board. Sometimes, after trying to figure things out and failing it helps  if someone gives me the code with an explanation of what it does.

The problem that I am having with the code that you gave me is that that it seems to cancel out the validation requirements for the other fields, (i.e. (text fields and drop down menus) if select a check box.
Thanks,
Sharon



ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you very much Hielo.
>>Thank you very much Hielo.
You are welcome!

I hope you got it to work. I re-visited your page above, but I am still seeing the old markup.

Regards,
Hielo