SimpleDevelopment


My Little Development Blog
  • R
   SimpleDevelopment
  • Home
  • Blog
  • Portfolio
  • Contact Me

Type keywords and hit enter


jQuery Validation Checkboxes – Place Error Message below all Checkboxes

Back

jQueryjQuery PluginjQuery Validation
Leave a comment

Hi this is a quick post about using jQuery Validation to place error message below all checkboxes. The version of jQuery Validation was 1.13.1 by the time when I wrote this blog.

By Default, jQuery Validation place error message in span tag after element.

 

error.insertAfter(element);

error.insertAfter(element);

and it looks like this:
checkbox_1

As you can see, the above error message comes right after check box element. And in order to have error message goes to the bottom of the checkbox list, we need to add little code to play the magic.

Assuming, we need to have validation rule for checkbox group to be something like “At least one checkbox is checked”. So I add a class to such checkbox group, namely “one_required”. And we can also wrap up each checkbox with label tag. So the HTML code will look something like below.

 

<label class="label_checkbox" for="rrtg-program-plan-staff-needed-49"><input type="checkbox" id="rrtg-program-plan-staff-needed-49" class="one_required" name="rrtg-program-plan-staff-needed[]" value="49" autocomplete="off">&nbsp;Community Partners</label>
<label class="label_checkbox" for="rrtg-program-plan-staff-needed-52"><input type="checkbox" id="rrtg-program-plan-staff-needed-52" class="one_required" name="rrtg-program-plan-staff-needed[]" value="52" autocomplete="off">&nbsp;LIFE Facilitators</label>
<label class="label_checkbox" for="rrtg-program-plan-staff-needed-51"><input type="checkbox" id="rrtg-program-plan-staff-needed-51" class="one_required" name="rrtg-program-plan-staff-needed[]" value="51" autocomplete="off">&nbsp;Mentors</label>
<label class="label_checkbox" for="rrtg-program-plan-staff-needed-48"><input type="checkbox" id="rrtg-program-plan-staff-needed-48" class="one_required" name="rrtg-program-plan-staff-needed[]" value="48" autocomplete="off">&nbsp;Program Coordinator</label>
<label class="label_checkbox" for="rrtg-program-plan-staff-needed-50"><input type="checkbox" id="rrtg-program-plan-staff-needed-50" class="one_required" name="rrtg-program-plan-staff-needed[]" value="50" autocomplete="off">&nbsp;RRTG Students</label>

<label class="label_checkbox" for="rrtg-program-plan-staff-needed-49"><input type="checkbox" id="rrtg-program-plan-staff-needed-49" class="one_required" name="rrtg-program-plan-staff-needed[]" value="49" autocomplete="off">&nbsp;Community Partners</label> <label class="label_checkbox" for="rrtg-program-plan-staff-needed-52"><input type="checkbox" id="rrtg-program-plan-staff-needed-52" class="one_required" name="rrtg-program-plan-staff-needed[]" value="52" autocomplete="off">&nbsp;LIFE Facilitators</label> <label class="label_checkbox" for="rrtg-program-plan-staff-needed-51"><input type="checkbox" id="rrtg-program-plan-staff-needed-51" class="one_required" name="rrtg-program-plan-staff-needed[]" value="51" autocomplete="off">&nbsp;Mentors</label> <label class="label_checkbox" for="rrtg-program-plan-staff-needed-48"><input type="checkbox" id="rrtg-program-plan-staff-needed-48" class="one_required" name="rrtg-program-plan-staff-needed[]" value="48" autocomplete="off">&nbsp;Program Coordinator</label> <label class="label_checkbox" for="rrtg-program-plan-staff-needed-50"><input type="checkbox" id="rrtg-program-plan-staff-needed-50" class="one_required" name="rrtg-program-plan-staff-needed[]" value="50" autocomplete="off">&nbsp;RRTG Students</label>

After wrapping up HTML, we can now update jquery validation method to override default errorPlacement with conditonal check for “one_required” class. Here is the Javascript code update.

$("#rrtg-pp-new-form").validate({
        rules: {
               "rrtg-program-plan-staff-needed[]":{
			required: true
		}
	},
	onsubmit: false,
	errorElement: "span",
	errorPlacement: function(error, element) {
		if ($(element).hasClass("one_required")) {
			var lastCheckBox = $('[name="'+element.attr("name")+'"]:last');
			error.insertAfter(lastCheckBox.closest('label'));
		} else {
			error.insertAfter(element);
		}
	}
});

$("#rrtg-pp-new-form").validate({ rules: { "rrtg-program-plan-staff-needed[]":{ required: true } }, onsubmit: false, errorElement: "span", errorPlacement: function(error, element) { if ($(element).hasClass("one_required")) { var lastCheckBox = $('[name="'+element.attr("name")+'"]:last'); error.insertAfter(lastCheckBox.closest('label')); } else { error.insertAfter(element); } } });

In above code, the important change is to update default errorPlacement handling with conditional check. If class “one_required” is found, then we can target the last checkbox element of this checkbox group. And insert HTML error message after this last checkbox element’s label tag. In this case, error message will be appended after last checkbox label element. So this is why I put label tag to wrap each checkbox element. and all other form elements can follow the default error placement handling by appending message right after element.

Now it is something like this as following screenshot showing error message below checkbox group.
checkbox_2

jQuery Validation is very powerful tool to validate the form. And it is also some fun work to play the code around for different validation outputs or custom results.

Cheers.




Previous Post - WordPress Clean Theme Implementation – New Blog Theme Deployed 2015

Next Post - WordPress – Use Grunt to Develop Site



Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *



Calendar

April 2018
S M T W T F S
« Jan    
1234567
891011121314
15161718192021
22232425262728
2930  

Blog Categories

  • Discovery (60)
  • Framework / Platform (48)
  • Neat Coding (88)
  • News (1)
  • Resource (18)

Archives History

  • January 2015 (9)
  • May 2014 (1)
  • January 2014 (15)
  • December 2013 (2)
  • May 2013 (4)
  • April 2013 (9)
  • March 2013 (11)
  • February 2013 (9)
  • October 2012 (4)
  • September 2012 (1)
  • August 2012 (7)
  • July 2012 (11)
  • June 2012 (11)
  • May 2012 (7)
  • April 2012 (7)
  • March 2012 (6)
  • October 2011 (1)
  • August 2011 (1)
  • July 2011 (2)
  • May 2011 (2)
  • April 2011 (1)
  • March 2011 (2)
  • February 2011 (1)
  • January 2011 (3)

HostGator Rocks!

  • Home
  • Blog
  • Portfolio
  • Contact Me

© Simple2kx 2018

  • Home
  • Blog
  • Portfolio
  • Contact Me
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • RSS
  • Find Me in Radii