Show field validation message above field

Get Help
1

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.

Thanks.

2

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;
}
3 Likes
3

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.

4

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

1 Like