Inline validation in forms — designing the experience
Mihael Konjević
67316

Hi Mihael,

This is really a big question and there is no 100% solution. I also have been thinking about it many times. The most general solution which will work in any case is:

  1. The best approach to solve any problem is to solve it before, not after. In this case — presence of clear labels and help texts, whenever possible, help user during input by automatically adding some characters or disabling further input.
  2. Validating all form on submit because those jumping errors can be sometimes confusing.
  3. Separate large forms into smaller sections of < 4 inputs, validate each section.

I like your hybrid idea and my 2nd option is — validating input after ~300ms.

You asked for links, here is my plain (vanilla) JavaScript HTML5 validation — https://bunnyjs.com (src/bunny.validate.js) It also supports file validation and much more. It is one of my oldest components and I am going to update it at 1.0 release, adding a lot of new functions and using Promises. I would like to hear any feedback about it and would be very respectful if you will put link to BunnyJS itself in the article.

Like what you read? Give Mev-Rael a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.