DEV Community

eitanwaxman
eitanwaxman

Posted on

A Unique Approach to Form Validation πŸ™ƒ

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)

Collapse
 
harithzainudin profile image
Muhammad Harith Zainudin

hahah, this is genius! πŸ˜‚πŸ˜‚πŸ˜‚

Collapse
 
eitanwaxman profile image
eitanwaxman

Thanks haha

Collapse
 
patricksaxton profile image
Patrick Saxton

This is really fun

I just wonder if it's accessible

Collapse
 
eitanwaxman profile image
eitanwaxman

good question, how would you go about checking that?

Collapse
 
koas profile image
Koas

This should become a standard! πŸ˜ƒπŸ‘πŸ»πŸ‘πŸ»πŸ‘πŸ»