coryhouse/reactjsconsulting

Built-in form validation / web native form validation

coryhouse opened this issue · 0 comments

Overview

My take on why it should be avoided

Note: You can set novalidate to disable native validation and display your own custom validation messages by checking the status of the validity of each field. However, that only addresses my first point on the tweet above.

Other reasons to avoid, mentioned in the thread above:

  1. It's not accessible
  2. Doesn't support async validation
  3. Doesn't support validation based on the values of other fields in your forum

Three key pieces to built-in form validation:

  1. Use HTML validation attributes to enforce required fields
  2. Use the FormData API to read values out of the form rather than track their values in state.
  3. Optionally, customize error messages using the Constraint Validation API and the ElementInternals API (which isn't supported in Safari yet)

The tradeoff: Built-in validation isn't as customizable as JS validation. And, it looks different across browser, which cannot be resolved.