• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 855
  • Last Modified:

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
0
promediagrp
Asked:
promediagrp
  • 4
  • 3
1 Solution
 
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
[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now