coryhouse / coryhouse/reactjsconsulting

Built-in form validation / web native form validation

Open
#127 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
374
Forks
33
PR merge metrics
No merged PRs in 30d

Description

[Overview](https://web.dev/more-capable-form-controls/)

[My take on why it should be avoided](https://twitter.com/housecor/status/1526552038947028994)

Note: You can [set `novalidate` to disable native validation and display your own custom validation messages](https://twitter.com/diegohaz/status/1526874008049811461) 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](https://adrianroselli.com/2019/02/avoid-default-field-validation.html)
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](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation) to enforce required fields
1. Use the [FormData API](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects) to read values out of the form rather than track their values in state.
1. Optionally, customize error messages using the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_forms_using_javascript) and the [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.