Derek Reynolds

Inline Email Validation

  • Save
Inline Email Validation inline email validation error invalid form input

Another collab w/ @Hartley Miller for DIY.

Been spending a lot of time iterating on inline validation and feel I have a set of solid rules down, but it still doesn't feel 100% right.

* If input is initially empty and no other fields in the form have been changed do not bother the person and render an invalid message. Wait for some valid input to toggle validation on so if there is bad data after that we can let the user know.

* If other fields have changed assume that all fields should be validated immediately as to prevent submitting invalid data.

* If input changes, but then reverts back to the original value then render the default state for the field.

In this particular instance we're validating email which has a few validation steps. If we detect invalid input w/ no suggestion we render a generic Your email doesn't look right! message. I'd like to improve this message by explaining what exactly is wrong like Missing a period or Invalid character right there ->`. If that initial validation is ok then we check to see if the domain they used is correct and suggest alternatives if we think they made a typo. Clicking on the suggestion will populate the input and revalidate which should trigger the valid state.

Using this awesome module for checking valid email domains https://github.com/mailcheck/mailcheck.

That's about it for now!

keyboard shortcuts: L or F like