From 486521cf77b263f1efe8f53a995bb3289f7aee8c Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Sat, 29 Aug 2020 10:39:53 -0400 Subject: [PATCH] Update docs/changelog --- CHANGELOG.md | 1 + docs/components/form.md | 13 +++++++------ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19769fa03..80d0f44ab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ - Added `required` to `sl-checkbox`, `sl-select`, and `sl-switch` - Added `reportValidity()` and `setCustomValidity()` methods to all form controls - Added validation checking for custom and native form controls to `sl-form` +- Added `novalidate` prop to `sl-form` to disable validation - Removed the `valid` prop from all form controls - Removed valid and invalid design tokens and related styles (you can use your own custom styles to achieve this) diff --git a/docs/components/form.md b/docs/components/form.md index 1442e21e9..7dc3bbbb6 100644 --- a/docs/components/form.md +++ b/docs/components/form.md @@ -4,9 +4,11 @@ Forms collect data that can easily be processed and sent to a server. -All of Shoelace's components make use of the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `
` elements don't recognize Shoelace form controls. +All Shoelace's components make use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `` elements will not recognize Shoelace form controls. -This component solves that problem by serializing _both_ Shoelace form controls and native form controls. The resulting form data is exposed in the `slSubmit` event in a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object. +This component solves that problem by serializing _both_ Shoelace form controls and native form controls when the form is submitted. The resulting form data is exposed in the `slSubmit` event as a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object. + +Shoelace forms don't make use of `action` and `method` attributes and they don't submit the same was as native forms. To handle submission, you need to listen for the `slSubmit` event as shown in the example below and make an XHR request with the resulting form data. ```html preview @@ -28,6 +30,7 @@ This component solves that problem by serializing _both_ Shoelace form controls ``` -?> Shoelace forms don't make use of `action` and `method` attributes and they don't submit like native forms. To handle submission, you need to listen for the `slSubmit` event as shown in the example above and make an XHR request with the resulting form data. - ## Form Control Validation -Client-side validation can be enabled through the browser's [constraint validations API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for many form controls. You can enable it using props such as `required`, `pattern`, `minlength`, `maxlength`, and `customValidity`. As the user interacts with the form control, the `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined. +Client-side validation can be enabled through the browser's [constraint validations API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for many form controls. You can enable it using props such as `required`, `pattern`, `minlength`, and `maxlength`. As the user interacts with the form control, the `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined. -When a form control is invalid, the containing form will not be submitted. Instead, the browser will show the user a relevant error message. +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.