I have this so far, not really that styled but the basic layout.

Notice how the layout jars when there is an error message (and the error message might be longer than one line). I even tried forcing the layout to account for the height of the error even when it wasn't there, but (a) it only works for errors that are one line of text, and (b) it makes the inputs too far spread apart.

How do you better solve this so it doesn't jar the layout? Where should the errors be placed, how should you notify the user of the errors? I did it on blur which seems to be the recommended approach, but still there is this jarring behavior which is less than ideal. Any ideas how to improve?

Also wondering how this would best work on mobile / small portrait devices.


4 Answers 4


You are assuming that it's a problem (jarring) that the validation error message shifts the form vertically. The real question to me is: how does this affect the user in a negative sense? Does it break the user flow? Do they get lost due to it?

I think it's way less of a problem than you might assume. I even tend to think it's a non-issue with a slight benefit of the user noticing the change of content. (Which adds to discoverability). Of course, one can find it ascetically less pleasing, but that's a whole different issue.

You also ask:

Also wondering how this would best work on mobile / small portrait devices.

I think pushing the content down vertically is the correct way to go about it. There is no harm in a vertical shift in my opinion.


You should put the label inside the field and have the input replace the label text. It's a better design and it solves the resizing issue.

Material design does this. Here's an example of error messages from their site:

enter image description here

material design > components > text fields


If I understood your concern correctly, you are concerned about the jarring effect mainly. Here is how I would have tried to solve this:

  • Just like your suggested solution above, take the error height already into consideration in the input itself. In my opinion, adding 12px-16px of height won't make your design lengthy, it would only make the inputs display clearly when an error shows.
  • The error messages can be written which are quick and easy to understand so that in a majority of cases they don't break into 2 lines.
  • And even if there are some cases where you can't reduce the error message to fit in one line we should keep in mind that designing for a general use case shouldn't depend on an edge case scenario.

Hope this helps.


I had the same issue and had it solved by adding a label before the message tag.

That is, start by label tag, then write $nbsp; then span the error message tag as you desire it to be, it will work exactly as you requested.

here is an example in a login page where this message is directly below the password field and above the login button( this way, message is displayed without affecting the position of any other item ):

        <span th:if="${param.error}">
            <span class="alert">Invalid Username and/or Password</span>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.