Show field validation message above field

Is there a good way to have the field validation message shown above the field? If so, is there a hook I can use?

I haven’t been able to find a great way of doing this without some jQuery DOM trickery which is less than ideal.


I’d check out CSS grid-areas. I’ve found it very useful for reordering DOM elements w/o use of jQuery. It’d look something like this:

.gfield {
  display: grid;
  grid-template-areas: "label" "validation";
.gfield_label {
  grid-area: label;
.validation_message {
  grid-area: validation;

There is no hook to change where the message is output. I think your DOM manipulation is currently the best way to handle this. Thank you.

Thanks Joshua, I’d never even considered using grid.

1 Like