I have always found the Message formatting to look poorly.

This is typically what I see...



It is formatted in such a way that I find it difficult to adjust.

Does anyone have a quick CSS fix? What do you guys do?

Chef - can you fix this?

I know.

The form validator is furnished raw. That's why I don't like it either, I should do a poll to choose another one.

Do you know a good one to propose ? Because it seems to be the best to me.
And when I say the best, I mean also the most simple and the less intrusive (CSS / JS)
At least, this formValidator never causes compatibilities errors or collisions with bootstrap / jQuery...

The debate is open and I totally agree this is very ugly and not so easy to custom.

I propose this one : bmauser.github.io/bvalidator/
But I didn't looked properly at the code.
It is similar than the one implemented, it seems a fork of it, but the naming conventions are different if I remember.

I was doing a site on the Gantry Framwork the other day, and whereas the nasty green boxes also popped up, Gantry has also formatted its own pretty tool tips as well that appeared on rollover

It would be possible to put the fiel description in the field description, instead of the formValidator message.
This is possible and would avoid the green boxes.
Then the rendering framework recognize the Joomla native field description.

This is a mistake of Cook. And this become more priority.

My websites are actually written for Bootstrap 3 and I use 1000hz.github.io/bootstrap-validator/ - works a treat - but that is whole another story! (I would have mentioned a J-Cook BS3 optional feature - but you have enough work to do )

When I need to use a J-Cook component page, I use Protostar fluid template for that page and dumb it down so it looks much the same as the sand box. For the general public I usually write my own BS3 module to display the data in the way I like.

Before BS3 came out I just wrote my own simple validators and had all sorts of headaches.

So in short, for me, I don't really know what you should use - just as long as it looks good in Protostar. (Or whatever the sandbox template is).

For Validation, I would suggest to avoid hovering boxes as they usually get in the way of things. Better to write the validation error message in a line below. See how neat bootstrap-validator works. Maybe there is a BS2 version about?

For "Information Messages", perhaps use the HTML title Attribute (www.w3schools.com/tags/att_global_title.asp ). Hovering boxes for these is OK because they disappear when you move your mouse to input.

Bootstrap does tool tips this way... www.w3schools.com/bootstrap/bootstrap_tooltip.asp (but that might be BS3)

I'm not a fan of bvalidator for these reasons. It uses hovering boxes for validation - which looks ugly when there are a lot of errors.

Quick tip for others wanting to fix...

If using a Joomla 3 template like Protostar and you want to hide the JCook (3.1.10) green validator message boxes on a Joomla frontend page...

Create a new css file in components/com_mycomponent/fork/css/mycomponent.css

(replace "mycomponent" with your actual component name).

You will then get a hover over tooltip box in Protostar with the message - that looks OK.

Cheers