jQuery validate a checkbox is ticked - Is there a way to get the error message to append the HTML rather than prepend?

Question

I am implementing jQuery validate onto a form I have, specifically the required method

The issue I am having is that the error message prepends the HTML value that the checkbox has, like so;

This is the checkbox before the validation error:

I've looked into errorContainer but can not currently get it to work within a 'rules' tag, like so:

rules : {
        agreeBranchRules: {
            required: true,
            errorContainer: "#putErrorMessageHereSoItDoesntSkew"
         }
    }

Is there a way to "catch" that validation error and place it below it, not causing it to skew the "I agree" value tag?

Answer 1

After a little more digging, using errorPlacement, you can append certain errors to the end of the HTML you prefer.

errorPlacement: function (error, element) {
                    if (element.attr("name") == "agreeBranchRules") {
                        error.appendTo("#tickAgree");
                    } else {
                        error.insertAfter(element);
                    }
                }

This now places the error message after the "I agree" text, not displacing it.

Help from this answer