How would you implement Adobe CQ client side validation for form fields?

I have implemented custom server side validation for form fields, so when the user specifies a constraint, the field will be validated on form submit. I would like to have client side validation as well, if possible at constraint level so that all that it needs to be configured on a field is the constraint. Example: show an error bellow the field on blur event if the field is invalid. I know i can also provide the script clientvalidation.jsp, but i don't understand how this is working because adding the script seems to have no effect.

Best How To:
Since you are dealing with the rendered page, I recommend you add client side validation using a standard validation library, such as the jQuery validation plugin:

jQuery Validation Plugin

It does what you are looking for, such as this sort of thing:


I've used this in CQ pages. Check out the video on that page--it gives a good demo of how to do just what you are looking for. And check out the demos page:
Demos

This isn't the only validation option, so you could also consider others. I think the key is to just approach this problem as a typical HTML/JavaScript need rather than a CQ need.

Also see Best JavaScript solution for client-side form validation and interaction?