Every developer knows how complex and tricky form validation can be. Ideally, users fill in the form with necessary information and finish the job successfully. However, people often make mistakes. This is where form validation comes into play.

On this article I will share our approach on how to perform form validation. These requirements turned into the main characteristics of this solution:

  • Vanilla JavaScript solution
  • Uses HTML5 built-in constraint validation
  • Supports custom validation
  • Supports server-side validation
  • Displays translated error messages

Browser support

  • All modern browsers, and IE10+.

HTML5 Constraint Validation

HTML5 has introduced validation mechanisms for forms. In addition to semantic types for the <input> element (type=email, number, …), we also have constraint validation (required, maxlength, …) to ease the work of checking the form content on the client side. …

About

Ana Sampaio

Front-end developer. Podcaster. Hosts Girls Lean In meetups. Loves entrepreneurship, code, JavaScript, inspiring people & be inspired!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store