From 91196f3577450e02fc0eb1eeb9e62b6dd8a357c7 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 31 Aug 2020 07:41:58 -0400 Subject: [PATCH] Update docs --- CONTRIBUTING.md | 10 +++++----- docs/components/form.md | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 15bd5af2..775b9af6 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -191,9 +191,9 @@ See the source of card, dialog, or drawer for examples. ### Form Controls -All form controls that can be validated should: +Form controls should support validation through the following conventions: -- Have an `invalid` prop that reflects its validity -- Have a `setCustomValidity()` method so the user can set a custom validation message -- Have a `reportValidity()` method that reports its validity for form submission -- Adhere to native attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. when it makes sense +- All form controls must an `invalid` prop that reflects its validity +- All form controls must have a `setCustomValidity()` method so the user can set a custom validation message +- All form controls must have a `reportValidity()` method that reports its validity during form submission +- All form controls should mirror their native validation attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. when possible diff --git a/docs/components/form.md b/docs/components/form.md index 9ce45613..eeeb7057 100644 --- a/docs/components/form.md +++ b/docs/components/form.md @@ -73,7 +73,7 @@ Client-side validation can be enabled through the browser's [constraint validati When a form control is invalid, the containing form will not be submitted. Instead, the browser will show the user a relevant error message. If you don't want to use cilent-side validation, you can suppress this behavior by adding `novalidate` to the `` element. -Form controls that support validation include [`sl-input`](/components/input), [`sl-textarea`](/components/textarea), [`sl-select`](/components/select), and [`sl-checkbox`](/components/checkbox). Not all validation props are available for every component. Refer to each component's documentation to see which validation props it supports. +All form controls support validation, but not all validation props are available for every component. Refer to a component's documentation to see which validation props it supports. Note that validity is not checked until the user interacts with the control or its containing form is submitted. This prevents required controls from being rendered as invalid right away, which can result in a poor user experience. If you need this behavior, set the `invalid` attribute initially.