coryhouse / coryhouse/reactjsconsulting
Built-in form validation / web native form validation
- 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.