There are many common practices for throwing a validation error - red outlines, error messages, disabled buttons, etc. Today I want to explore an (extremely) innovative approach...
But first please fill out the form >
If you didn't, you may have noticed the "submit" button is a slippery little fella.
This idea was originally just going to be a UX parody with an unclickable button. Then the idea struck me to make it a form validation feature giving it a semi-plausible implementation.
At first I thought it would be a 5 minute project, a simple form, some styling and a few event listeners. Then things got a bit complicated - first I had to think of how to randomize the movement in four directions and then on top of that I had to contain the movement within the viewport.
As an afterthought I added a return to original state when the user shows intent of filling out the form (focus or input).
All in all it was fun to code (which is what really counts) and who knows maybe one day this will become the golden standard 🤪.
Top comments (5)
hahah, this is genius! 😂😂😂
Thanks haha
This is really fun
I just wonder if it's accessible
good question, how would you go about checking that?
This should become a standard! 😃👏🏻👏🏻👏🏻