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

and it looks like this:

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>

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);
		}
	}
});

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.

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.