Inline validation on smaller forms

1. What is inline form validation?
2. How to do inline validation in JavaScript?
3. What is the potential problem of overly specific form validation?

What is inline form validation?

In short, inline validation is an effort on behalf of the form to help users correct information as they go, ideally so that when the point comes to submit the form, they are more likely to submit it on the first attempt. The more failed attempts a user makes to submit the form, the more likely they are to give up.

How to do inline validation in JavaScript?

In order to validate the input, we have to test it against a set of rules that define a pass or fail. For example, you don't want your users to enter & or @ or % into your name field because these characters don't belong there. In order to create a set of rules we use a Regular Expression (Regex).

What is the potential problem of overly specific form validation?

The problem with form validators is that they effectively block the user from proceeding. This, of course, is their purpose, but unless the validation rules can be and are implemented 100% flawlessly (i.e. zero false negatives), users will eventually run into unintended roadblocks.