I am hoping to use error classes for both text inputs (show message, add border and background colour change) and also for checkboxes/radios (show message, add class to grand parent divs for background colour change).

I have got the grandparent change happening - if the form is submitted without ticking a checkbox, the class is successfully applied using this code...

1. highlight: function (element,errorClass,validClass) { $(element).parents(".row.options") .addClass("options-error") .removeClass("valid"); }, unhighlight: function (element, errorClass, validClass) { $(element).parents(".row.options") .addClass("valid") .removeClass("options-error"); },

For some reason though, when the "highlight/unhighlight" code is active, the error class is no longer applied to text inputs / textareas (no border or background change occurs). Fiddle 1: https://jsfiddle.net/sunnyb0y/37au0nov/

With the "highlight/unhighlight" code commented out, the error class is applied correctly to text inputs / textareas (border and background change occurs). Fiddle 2: https://jsfiddle.net/sunnyb0y/d6odqfuq/

Is there a way to handle both scenarios, so error classes are applied to text inputs / textareas and the grandparent highlight works as well?

Any ideas?

Thanks for any help.