I was searching around on how to do this and appreciated what others had posted. I like the button approach but hidden elements do worry me a bit from a maintenance perspective so I thought I’d try to take an approach that is directly on the elements themselves.
Essentially you add Conditionals on messages within groups associated with the fields that need to be checked. I put the messages in a Group since groups can have heights collapsed when hidden so that they’ll appear only when an error occurs. Make sure the groups are not visible on page load.
Here are some screenshots of the approach.
I think it’s also important to make sure that the message doesn’t show if the value is empty since it’s annoying to see an error when you’re in the process of correcting the problem or decide to not fill out a non-required field after all.
The password field is a bit trickier because it can be “validated while typing” and the error can appear before the person has had a chance to complete the password. This is why it’s important to use “isn’t focused” in this situation as well.
To keep things neat, you might want to enclose both the error group and the input in a group of their own as well so the spacing between form elements can easily be distributed.
You could also display multiple errors on submit but I think it’s nicer to let people know something is wrong right after they enter info as opposed to waiting until the end to let them know something needs correction.
I hope that helps some bubblers.
It’s also a good idea to add html form labels that can be hidden from screen readers but that’s something I’ve addressed in another thread on accessibility. Bubble Websites and Accessibility