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
promediagrpAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
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

0
promediagrpAuthor Commented:
Hi Hielo,
Thank you for your reply and solution. Unfortunately it didn't solve my challenge.
Thanks,
Sharon
0
hieloCommented:
>>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
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

promediagrpAuthor Commented:
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



0
hieloCommented:
>>Thanks. I am very interested in learning
Good. I don't mind teaching if you are willing to learn and most importantly, to make an effort.

>>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,
Make a copy of your form - name it hielo.html

then remove the HTML markup you have for purposes of validation. To clarify these:


<input id="zip" name="zip" type="text" class="required" value=""/>
<input id="phone" name="phone" type="text" class="required" value="" />

have class="required" because you want the plugin to treat them as required fields. What I am saying is get rid of it from your HTML markup:
<input id="zip" name="zip" type="text"  value=""/>
<input id="phone" name="phone" type="text" value="" />


and instead use javascript to make them required. Basically add them to the "R" and the "M" variables/object on the code I gave you above. The same goes for all the other fields you are validating through the HTML - move them to the javascript instead.

Regards,
Hielo

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
promediagrpAuthor Commented:
Thank you very much Hielo.
0
hieloCommented:
>>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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.