DON'T Do This with Validation Messages!! 

What I usually do is hide the error text by default so that its in the dom already and show it on error only.

Two other solutions are to have the default text be a single non-breaking space, or to use "opacity: 0" to hide it which makes it invisible but still consume space in the layout. This means you don't have to consider how the height might change in different layouts or if accessibility features change the size of elements.

That works only if you know before hand the message would take only one line of space and when you have pre-rendered. For non pre-render content and with unknown height your only choice is to position absolute it at the bottom of your label/field. That also has its caveats, for example it might end up covering part of the next field if your spacing is not enough or the message too long. Another safe choice is to show something like a tippyjs box. You can appear an icon indicating something is wrong and you can have the tippy open by default or trigger it on hover. Not very common but if your primary language is not simple as English or your messages are quite verbose you can do that. But then again if you have needs like that probably the jumpyness of the form is not your main issue.

This is an important point, but I think setting a specific height might lead to problems if font-size changes. visibility: hidden; feels like the most idiomatic way of doing this, as it still retains its space in the DOM, unlike display: none;.

i think this is still preserve the issue if we display the error message based on a condition (lets say based on a state). I think the better solutuion is to make wrapper for both the field and the error and set the wrapper to relatiove so that we can set the error style to absolute and set its position based on the relative parent. with this approach, the error element will never distract any element that sits near it. This is what exactly i do today in my office when i see the previous dev make the error message go wild from the field where it belongs.

Nice. Prefer to make them absolute though, they tend to make the form look meh when they *aren't* visible. Would rather the design was tight when they're there, rather than loose when they aren't :)

You can also show the default hint at first and update it with an error so it doesn't look weird space.

if viewport is too short and the line breaks you end with a truncated error, setting fixed heights brings always bugs.

Great content! Quick and well explained. Subscribed

There are bigger UX mistakes on the former than that. For one, you’re making your user guess what the requirements are before he gets an error message.

I think validation on blur is the worst thing

It's a pet hate of mine, too. I go out of my way to fix crap like this.

I use position absolute

what if validation message has different messages?

You don’t need to use hacks like this, there’s property made for this exact purpose: visibility:hidden

Fine. I’ll do it for you.

Lol, you do a video about that? Thanks, captain obvious.

Already beat you to it 😂 that annoys me too

Can someone explain to me how tailwind is any different from inlining styles? Seems like it’s a huge step backwards, adding clutter and repetition to the html again, instead of keeping it clean.