The Web has been built on the fundamental principle that people need to converse to stay connected and it acts as a bridge to eliminate the distance.  As Swedish Author, Annika Thor says “A conversation is so much more than words: a conversation is eyes, smiles, the silences between the words.” Web forms are not considered to be great conversationalists as many consider them to be a clerical and mundane in nature. Turns out that with inline validation developers can actually make sure that users are guided at each stage and also improve form completion rate. Implementing Inline Validation means that your form can have a conversation with the user.

“A conversation is so much more than words: a conversation is eyes, smiles, the silences between the words.”

Luke Wroblewksi, Usability Expert, and author of acclaimed book ‘Web Form Design’ conducted a research to check the effectiveness of real-time validation. The research gathered the below insights on the effects of real-time validation in an e-commerce setting. Smoother check-out process means more conversions for e-commerce brands.

Inline-Validation-Completion-Rate

Let’s take a hypothetical example to prove the point. With real-time inline validation, the user gets instant feedback as and when he is in the data entry phase and doesn’t have to wait to click the submit button to understand where he has gone wrong. In the below example the user gets a feedback at every step which reduces the time to fill-up the form and also improves the chances of the visitor converting.

Implementing Inline Validation

Implementing Inline Validation

Every field in the form has to be validated both on the client (in the browser) side as well as server side (using your preferred server-side language). It’s ideal to get the form validated both ways. Client-side validation can be completed using either JavaScript or HTML5. If you chose to use javascript based validation there are a host of inline validation libraries you can use to simplify the task like Parsley, VerifyJS, ValidateJS or you can choose from the library on GitHub. Client-side validation is a lot simpler using HTML5 as developers don’t have to write complex JavaScript validation code as HTML5 includes a fairly solid form validation mechanism powered by the following <input /> attributes: type, pattern, and require. If you want more details on implementing client-side validation using HTML5 site-point has great tips here.

If the user’s browser has JavaScript disabled or they use a browser which doesn’t support HTML5 then client-side validation won’t work as desired hence its important to validate from server-side as well. For server-side validation, you have to validate fields once a user has finished their input for a specific field post which they have to be moved to the next field. Developers also refer to this action a ‘blurring’ a field. For server-side validation, you can use AJAX to send the field data to the server to check for accuracy. If the data has been filled as per excepted standards you can return a response in line with the field. If not then return an error message to the user.

Implementing Inline validation makes the whole mundane process of filling out the form more enjoyable for the user, in turn, improving the user experience. Better user experience translates into better conversions and higher retention rates for the brands.