Skip to content

Commit 7f49940

Browse files
committed
chore: Update Documentation for the FormValidityObserver
Note: We technically have not yet updated the types for the JS framework integrations, so we aren't 100% sure that our docs in that area are correct yet. But we're pretty confident that the documentation should be correct. After reviewing these docs on GitHub and verifying that we didn't break any links, we'll follow up with the integration TypeScript changes (and any docs updates that should be done as a result).
1 parent 94de58f commit 7f49940

File tree

12 files changed

+166
-129
lines changed

12 files changed

+166
-129
lines changed

docs/extras/philosophy.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,7 @@ The next natural step is to provide a way to validate an _entire form_. For that
318318

319319
If the developer opts out of accessible error messaging, the `setFieldError` and `clearFieldError` methods will fallback to `field.setCustomValidity()`, and `validateField({ focus: true })`/`validateFields({ focus: true })` will fallback to `field.reportValidity()`/`form.reportValidity()`.
320320

321-
As an added bonus, the `FormValidityObserver` exposes a [`configure`](../form-validity-observer/README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-void) method that enables developers to configure the error messages that should be displayed when a field fails validation. (Any unconfigured error messages will fallback to the `validationMessage` that the browser provides.) It also allows a custom validation function to be configured for the field.
321+
As an added bonus, the `FormValidityObserver` exposes a [`configure`](../form-validity-observer/README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-r-void) method that enables developers to configure the error messages that should be displayed when a field fails validation. (Any unconfigured error messages will fallback to the `validationMessage` that the browser provides.) It also allows a custom validation function to be configured for the field.
322322

323323
Seeing the big picture here? The `FormValidityObserver` is basically a wrapper for the browser's native features when accessible error messages aren't being used. When accessible error messages are needed, it functions as an _enhancement_ (not a replacement) of the browser's features to satisfy that need. As a bonus, it includes configurable scrolling/rendering functionality as well.
324324

docs/form-validity-observer/README.md

+26-14
Large diffs are not rendered by default.

docs/form-validity-observer/integrations/README.md

+59-43
Large diffs are not rendered by default.

docs/form-validity-observer/integrations/preact.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ A _convenience_ API for reducing code repetition in a [Preact](https://preactjs.
66

77
Creates an enhanced version of the `FormValidityObserver`, known as the `PreactFormValidityObserver`. It accepts the exact same arguments as the [`FormValidityObserver`'s constructor](../README.md#constructor-formvalidityobservertypes-options).
88

9-
### Return Type: `PreactFormValidityObserver<M>`
9+
### Return Type: `PreactFormValidityObserver<M, R>`
1010

11-
An enhanced version of the `FormValidityObserver`, designed specifically for Preact applications. It has the same Type Parameters as the `FormValidityObserver`. As with the `FormValidityObserver`, the type of `M` is derived from the [`renderer`](../README.md#form-validity-observer-options-renderer) option.
11+
An enhanced version of the `FormValidityObserver`, designed specifically for Preact applications. It has the same Type Parameters as the `FormValidityObserver`. As with the `FormValidityObserver`, the type of `M` is derived from the [`renderer`](../README.md#form-validity-observer-options-renderer) option, and the type of `R` is derived from the [`renderByDefault`](../README.md#form-validity-observer-options-render-by-default) option.
1212

1313
#### Copied Methods
1414

@@ -77,13 +77,13 @@ class MyFormClass extends Component {
7777

7878
Remember that `autoObserve` is simply a convenience utility for calling `observe` and `unobserve` automatically. You're free to setup and teardown the `FormValidityObserver` manually if you prefer.
7979

80-
#### Function: `configure<E>(name: string, errorMessages: PreactValidationErrors<M, E>): PreactFieldProps`
80+
#### Function: `configure<E>(name: string, errorMessages: PreactValidationErrors<M, E, R>): PreactFieldProps`
8181

82-
An enhanced version of [`FormValidityObserver.configure`](../README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-void) for `Preact`. In addition to configuring a field's error messages, it generates the props that should be applied to the field based on the provided arguments.
82+
An enhanced version of [`FormValidityObserver.configure`](../README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-r-void) for `Preact`. In addition to configuring a field's error messages, it generates the props that should be applied to the field based on the provided arguments.
8383

8484
> Note: If the field is _only_ using the configured [`defaultErrors`](../README.md#form-validity-observer-options-default-errors) and/or the browser's default error messages, it _does not_ need to be `configure`d.
8585
86-
The `PreactValidationErrors<M, E>` type is an enhanced version of the core [`ValidationErrors<M, E>`](../types.md#validationerrorsm-e) type. Here is how `PreactValidationErrors` compares to `ValidationErrors`.
86+
The `PreactValidationErrors<M, E, R>` type is an enhanced version of the core [`ValidationErrors<M, E, R>`](../types.md#validationerrorsm-e-r) type. Here is how `PreactValidationErrors` compares to `ValidationErrors`.
8787

8888
##### Properties That Mimic the `ValidationErrors` Properties
8989

@@ -139,7 +139,7 @@ All the other properties on the `PreactValidationErrors` type are enhancements o
139139

140140
The rules are as follows:
141141

142-
1&rpar; When a constraint is configured with an [`ErrorDetails`](../types.md#errordetailsm-e) object, the object must include a `value` property specifying the value of the constraint. In this scenario, both the field's constraint value _and_ its error message are configured.
142+
1&rpar; When a constraint is configured with an [`ErrorDetails`](../types.md#errordetailsm-e-r) object, the object must include a `value` property specifying the value of the constraint. In this scenario, both the field's constraint value _and_ its error message are configured.
143143

144144
```tsx
145145
import { createFormValidityObserver } from "@form-observer/preact";

docs/form-validity-observer/integrations/react.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ Creates an enhanced version of the `FormValidityObserver`, known as the `ReactFo
1717

1818
This function acts as the foundation for the [`useFormValidityObserver`](#custom-hook-useformvalidityobservertypes-options) hook. For those using class components, you can use `createFormValidityObserver` directly.
1919

20-
### Return Type: `ReactFormValidityObserver<M>`
20+
### Return Type: `ReactFormValidityObserver<M, R>`
2121

22-
An enhanced version of the `FormValidityObserver`, designed specifically for React applications. It has the same Type Parameters as the `FormValidityObserver`. As with the `FormValidityObserver`, the type of `M` is derived from the [`renderer`](../README.md#form-validity-observer-options-renderer) option.
22+
An enhanced version of the `FormValidityObserver`, designed specifically for React applications. It has the same Type Parameters as the `FormValidityObserver`. As with the `FormValidityObserver`, the type of `M` is derived from the [`renderer`](../README.md#form-validity-observer-options-renderer) option, and the type of `R` is derived from the [`renderByDefault`](../README.md#form-validity-observer-options-render-by-default) option.
2323

2424
#### Copied Methods
2525

@@ -63,7 +63,7 @@ class MyFormClass extends Component {
6363
}
6464
```
6565

66-
Due to React's unique re-rendering system, if you're using the `autoObserve` utility in a component that is expected to re-render, then you might need to memoize its returned `ref` callback to have consistent results. In functional components, you can memoize the callback with `useMemo` (or `useCallback`). In class components, you can effectively "memoize" the callback by assigning it to the class instance during its instantiation.
66+
Due to React's unique re-rendering model, if you're using the `autoObserve` utility in a component that is expected to re-render, then you might need to memoize its returned `ref` callback to have consistent results. In functional components, you can memoize the callback with `useMemo` (or `useCallback`). In class components, you can effectively "memoize" the callback by assigning it to the class instance during its instantiation.
6767

6868
```tsx
6969
import { useMemo, Component } from "react";
@@ -87,13 +87,13 @@ class MyFormClass extends Component {
8787

8888
Remember that `autoObserve` is simply a convenience utility for calling `observe` and `unobserve` automatically. You're free to setup and teardown the `FormValidityObserver` manually if you prefer.
8989

90-
#### Function: `configure<E>(name: string, errorMessages: ReactValidationErrors<M, E>): ReactFieldProps`
90+
#### Function: `configure<E>(name: string, errorMessages: ReactValidationErrors<M, E, R>): ReactFieldProps`
9191

92-
An enhanced version of [`FormValidityObserver.configure`](../README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-void) for `React`. In addition to configuring a field's error messages, it generates the props that should be applied to the field based on the provided arguments.
92+
An enhanced version of [`FormValidityObserver.configure`](../README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-r-void) for `React`. In addition to configuring a field's error messages, it generates the props that should be applied to the field based on the provided arguments.
9393

9494
> Note: If the field is _only_ using the configured [`defaultErrors`](../README.md#form-validity-observer-options-default-errors) and/or the browser's default error messages, it _does not_ need to be `configure`d.
9595
96-
The `ReactValidationErrors<M, E>` type is an enhanced version of the core [`ValidationErrors<M, E>`](../types.md#validationerrorsm-e) type. Here is how `ReactValidationErrors` compares to `ValidationErrors`.
96+
The `ReactValidationErrors<M, E, R>` type is an enhanced version of the core [`ValidationErrors<M, E, R>`](../types.md#validationerrorsm-e-r) type. Here is how `ReactValidationErrors` compares to `ValidationErrors`.
9797

9898
##### Properties That Mimic the `ValidationErrors` Properties
9999

@@ -149,7 +149,7 @@ All the other properties on the `ReactValidationErrors` type are enhancements of
149149

150150
The rules are as follows:
151151

152-
1&rpar; When a constraint is configured with an [`ErrorDetails`](../types.md#errordetailsm-e) object, the object must include a `value` property specifying the value of the constraint. In this scenario, both the field's constraint value _and_ its error message are configured.
152+
1&rpar; When a constraint is configured with an [`ErrorDetails`](../types.md#errordetailsm-e-r) object, the object must include a `value` property specifying the value of the constraint. In this scenario, both the field's constraint value _and_ its error message are configured.
153153

154154
```tsx
155155
import { createFormValidityObserver } from "@form-observer/react";

docs/form-validity-observer/integrations/solid.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ A _convenience_ API for reducing code repetition in a [Solid](https://www.solidj
66

77
Creates an enhanced version of the `FormValidityObserver`, known as the `SolidFormValidityObserver`. It accepts the exact same arguments as the [`FormValidityObserver`'s constructor](../README.md#constructor-formvalidityobservertypes-options).
88

9-
### Return Type: `SolidFormValidityObserver<M>`
9+
### Return Type: `SolidFormValidityObserver<M, R>`
1010

11-
An enhanced version of the `FormValidityObserver`, designed specifically for Solid applications. It has the same Type Parameters as the `FormValidityObserver`. As with the `FormValidityObserver`, the type of `M` is derived from the [`renderer`](../README.md#form-validity-observer-options-renderer) option.
11+
An enhanced version of the `FormValidityObserver`, designed specifically for Solid applications. It has the same Type Parameters as the `FormValidityObserver`. As with the `FormValidityObserver`, the type of `M` is derived from the [`renderer`](../README.md#form-validity-observer-options-renderer) option, and the type of `R` is derived from the [`renderByDefault`](../README.md#form-validity-observer-options-render-by-default) option.
1212

1313
#### Copied Methods
1414

@@ -45,13 +45,13 @@ function MyForm() {
4545

4646
Remember that `autoObserve` is simply a convenience utility for calling `observe` and `unobserve` automatically. You're free to setup and teardown the `FormValidityObserver` manually if you prefer.
4747

48-
#### Function: `configure<E>(name: string, errorMessages: SolidValidationErrors<M, E>): SolidFieldProps`
48+
#### Function: `configure<E>(name: string, errorMessages: SolidValidationErrors<M, E, R>): SolidFieldProps`
4949

50-
An enhanced version of [`FormValidityObserver.configure`](../README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-void) for `Solid`. In addition to configuring a field's error messages, it generates the props that should be applied to the field based on the provided arguments.
50+
An enhanced version of [`FormValidityObserver.configure`](../README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-r-void) for `Solid`. In addition to configuring a field's error messages, it generates the props that should be applied to the field based on the provided arguments.
5151

5252
> Note: If the field is _only_ using the configured [`defaultErrors`](../README.md#form-validity-observer-options-default-errors) and/or the browser's default error messages, it _does not_ need to be `configure`d.
5353
54-
The `SolidValidationErrors<M, E>` type is an enhanced version of the core [`ValidationErrors<M, E>`](../types.md#validationerrorsm-e) type. Here is how `SolidValidationErrors` compares to `ValidationErrors`.
54+
The `SolidValidationErrors<M, E, R>` type is an enhanced version of the core [`ValidationErrors<M, E, R>`](../types.md#validationerrorsm-e-r) type. Here is how `SolidValidationErrors` compares to `ValidationErrors`.
5555

5656
##### Properties That Mimic the `ValidationErrors` Properties
5757

@@ -107,7 +107,7 @@ All the other properties on the `SolidValidationErrors` type are enhancements of
107107

108108
The rules are as follows:
109109

110-
1&rpar; When a constraint is configured with an [`ErrorDetails`](../types.md#errordetailsm-e) object, the object must include a `value` property specifying the value of the constraint. In this scenario, both the field's constraint value _and_ its error message are configured.
110+
1&rpar; When a constraint is configured with an [`ErrorDetails`](../types.md#errordetailsm-e-r) object, the object must include a `value` property specifying the value of the constraint. In this scenario, both the field's constraint value _and_ its error message are configured.
111111

112112
```tsx
113113
import { createFormValidityObserver } from "@form-observer/solid";

docs/form-validity-observer/integrations/svelte.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ A _convenience_ API for reducing code repetition in a [Svelte](https://svelte.de
66

77
Creates an enhanced version of the `FormValidityObserver`, known as the `SvelteFormValidityObserver`. It accepts the exact same arguments as the [`FormValidityObserver`'s constructor](../README.md#constructor-formvalidityobservertypes-options).
88

9-
### Return Type: `SvelteFormValidityObserver<M>`
9+
### Return Type: `SvelteFormValidityObserver<M, R>`
1010

11-
An enhanced version of the `FormValidityObserver`, designed specifically for Svelte applications. It has the same Type Parameters as the `FormValidityObserver`. As with the `FormValidityObserver`, the type of `M` is derived from the [`renderer`](../README.md#form-validity-observer-options-renderer) option.
11+
An enhanced version of the `FormValidityObserver`, designed specifically for Svelte applications. It has the same Type Parameters as the `FormValidityObserver`. As with the `FormValidityObserver`, the type of `M` is derived from the [`renderer`](../README.md#form-validity-observer-options-renderer) option, and the type of `R` is derived from the [`renderByDefault`](../README.md#form-validity-observer-options-render-by-default) option.
1212

1313
#### Copied Methods
1414

@@ -45,13 +45,13 @@ The `novalidate` parameter indicates that the [novalidate](https://developer.moz
4545

4646
Remember that `autoObserve` is simply a convenience utility for calling `observe` and `unobserve` automatically. You're free to setup and teardown the `FormValidityObserver` manually if you prefer.
4747

48-
#### Function: `configure<E>(name: string, errorMessages: SvelteValidationErrors<M, E>): SvelteFieldProps`
48+
#### Function: `configure<E>(name: string, errorMessages: SvelteValidationErrors<M, E, R>): SvelteFieldProps`
4949

50-
An enhanced version of [`FormValidityObserver.configure`](../README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-void) for `Svelte`. In addition to configuring a field's error messages, it generates the props that should be applied to the field based on the provided arguments.
50+
An enhanced version of [`FormValidityObserver.configure`](../README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-r-void) for `Svelte`. In addition to configuring a field's error messages, it generates the props that should be applied to the field based on the provided arguments.
5151

5252
> Note: If the field is _only_ using the configured [`defaultErrors`](../README.md#form-validity-observer-options-default-errors) and/or the browser's default error messages, it _does not_ need to be `configure`d.
5353
54-
The `SvelteValidationErrors<M, E>` type is an enhanced version of the core [`ValidationErrors<M, E>`](../types.md#validationerrorsm-e) type. Here is how `SvelteValidationErrors` compares to `ValidationErrors`.
54+
The `SvelteValidationErrors<M, E, R>` type is an enhanced version of the core [`ValidationErrors<M, E, R>`](../types.md#validationerrorsm-e-r) type. Here is how `SvelteValidationErrors` compares to `ValidationErrors`.
5555

5656
##### Properties That Mimic the `ValidationErrors` Properties
5757

@@ -105,7 +105,7 @@ All the other properties on the `SvelteValidationErrors` type are enhancements o
105105

106106
The rules are as follows:
107107

108-
1&rpar; When a constraint is configured with an [`ErrorDetails`](../types.md#errordetailsm-e) object, the object must include a `value` property specifying the value of the constraint. In this scenario, both the field's constraint value _and_ its error message are configured.
108+
1&rpar; When a constraint is configured with an [`ErrorDetails`](../types.md#errordetailsm-e-r) object, the object must include a `value` property specifying the value of the constraint. In this scenario, both the field's constraint value _and_ its error message are configured.
109109

110110
```svelte
111111
<form use:autoObserve>

0 commit comments

Comments
 (0)