Imagine spending your time filling out a long form, submitting it, and then receiving an error message. It is incredibly frustrating. This is where inline validation comes in. Inline validation checks user inputs for errors and informs them immediately.

How do you implement inline validation properly?

Proper error message placement – Show the error message right next to or below the field it relates to. This gives sufficient context for any errors a user might have made and makes it easy for them to correct it.
Preserve input errors – If a user makes an error, do not clear the field as this eases the correction process. Take the example of someone who types in their email address as blahblah.blah.com instead of [email protected]. Since only the ‘@’ symbol is omitted, preserving the original entry allows a shopper to quickly correct their mistake by inserting it instead of having to retype their whole email address again.
Update error messages the moment a correction is made – Once a user corrects their input error(s), the error messages should be immediately updated to reflect the same. A delay would leave a user feeling the error hasn’t been corrected or anger them if they know they’ve corrected their mistake while you still insist they’ve made an error.
Acknowledge proper inputs – Don’t just show error messages. If a user makes a valid form entry, you acknowledge it with either a checkmark or by changing the text box color to either green or blue. This gives users a sense of accomplishment and indicates progress.
Avoid premature validation– Telling a shopper they’ve made an error typing their email address after they’ve only typed in two letters is incredibly annoying. You should only validate after they are done typing and moved on to the next text field.

Side note

Credit card numbers can be validated using the Luhn algorithm, which finds out whether the card number sequence has been correctly typed. It does not validate whether the number is valid or whether the card has sufficient funds.