My Perfect Form | Helpfulz

My Perfect Form

May 19, 2019

So i’ve been trying to make my perfect form, but I keep running into little blockages and would like to document it a bit so I can keep track of the different options.

Basically you can do forms and form validation in a million different varieties. I ant to include debouncing and that too can be implemented in a number of ways.

Good thing is that I do have an idea of what perfect means to me, so I’m gonna search for that.

In the beginning I stuck to bootstrap 4’s form validation, it works just fine for the job. However it’s done basically off of a form submit, and I don’t want to wait until I hit submit to have my form validated and corrected. Just correct me as I make the mistake..

So some things that I want for my form:

  • I want it to be debounced, so give a little delay and then validate. If i’m putting an email for example, I want a soft message sent after pausing and it’s not quite full.
  • I definately want it to validate after I fill out a form. onBlur has been a method i used for htis before that was quite nice.
  • I want each input to validate independantly. This is something bootstrap fails on right now, it’s done on submit and it’s the whole entire form at once. I want it one at a time.
  • I would also like some practice with dates or other formated inputs that we are familiar with. for example, if you’re filling out a field that we know should be xx/xx/xxxx, and it’s three different inputs for example, just go ahead and move the cursor forward when it’s done.
  • How does this all look on mobile?
  • I’ve done soem playing around and here’s some more that i want
  • When you have entered text and you delete everything back to empty, remove the error message (unless onBlur, then show message)
  • if you are typing and your input debounces to invalid, once input goes to valid don’t wait to update message, also, don’t wait to show if it switches back to false.
  • so basically just debounce validation at first, then immediate feedback.

a little nit pick, if i have text and hten delete it all, it will for  split second shows “invalid” then it’s to blank as required. While this is working as designed, it does look a little janky that it works this way


Ok, I got this going good enough, I will come back to do some finishing touches at a later time, I want to get started on my cool floating navigation 🙂

Profile picture

Written by IzzleNizzle who can be found playing around in the mountains of Utah. ⛰️ You should follow Iz on Twitter

© 2022, Built with Gatsby and WordPress