docs(form): Fix grammar issues in the guides (TanStack#1965)

* docs(form): Fix grammar issues in the guides

* docs(form): Fix grammar issues in the guides

* ci: apply automated fixes and generate docs

* Update docs/framework/react/guides/devtools.md

Co-authored-by: LeCarbonator <18158911+LeCarbonator@users.noreply.github.com>

* Update docs/framework/react/guides/dynamic-validation.md

Co-authored-by: LeCarbonator <18158911+LeCarbonator@users.noreply.github.com>

* Removed duplicates from validation.md

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: LeCarbonator <18158911+LeCarbonator@users.noreply.github.com>

Author: 3 people

docs/framework/react/guides/custom-errors.md

@@ -5,7 +5,7 @@ title: Custom Errors
 
 TanStack Form provides complete flexibility in the types of error values you can return from validators. String errors are the most common and easy to work with, but the library allows you to return any type of value from your validators.
 
-As a general rule, any truthy value is considered as an error and will mark the form or field as invalid, while falsy values (`false`, `undefined`, `null`, etc..) mean there is no error, the form or field is valid.
+As a general rule, any truthy value is considered an error and will mark the form or field as invalid, while falsy values (`false`, `undefined`, `null`, etc.) mean there is no error, and the form or field is valid.
 
 ## Return String Values from Forms
 
@@ -133,7 +133,7 @@ Display in UI:
 }
 ```
 
-in the example above it depends on the event error you want to display.
+In the example above, the rendered message, code and styling depend on the event error you want to display.
 
 ### Arrays
 
@@ -171,7 +171,7 @@ Display in UI:
 
 ## The `disableErrorFlat` Prop on Fields
 
-By default, TanStack Form flattens errors from all validation sources (onChange, onBlur, onSubmit) into a single `errors` array. The `disableErrorFlat` prop preserves the error sources:
+By default, TanStack Form flattens errors from all validation sources (`onChange`, `onBlur`, `onSubmit`) into a single `errors` array. The `disableErrorFlat` prop preserves the error sources:
 
 ```tsx
 <form.Field

docs/framework/react/guides/devtools.md

@@ -3,18 +3,18 @@ id: devtools
 title: Devtools
 ---
 
-TanStack Form comes with a ready to go suit of devtools.
+TanStack Form comes with a ready-to-go suite of devtools.
 
 ## Setup
 
-Install the [TanStack Devtools](https://tanstack.com/devtools/latest/docs/quick-start) library and the [TanStack Form plugin](http://npmjs.com/package/@tanstack/react-form-devtools), from the framework adapter that your working in (in this case `@tanstack/react-devtools`, and `@tanstack/react-form-devtools`).
+Install the [TanStack Devtools](https://tanstack.com/devtools/latest/docs/quick-start) library and the [TanStack Form plugin](http://npmjs.com/package/@tanstack/react-form-devtools), from the framework adapter that you're working in (in this case `@tanstack/react-devtools` and `@tanstack/react-form-devtools`).
 
 ```bash
 npm i @tanstack/react-devtools
 npm i @tanstack/react-form-devtools
 ```
 
-Next in the root of your application import the `TanStackDevtools`.
+Next, in the root of your application, import the `TanStackDevtools`.
 
 ```tsx
 import { TanStackDevtools } from '@tanstack/react-devtools'
@@ -47,6 +47,6 @@ createRoot(document.getElementById('root')!).render(
 )
 ```
 
-Finally add any additional configuration you desire to the `TanStackDevtools` component, more information can be found under the [TanStack Devtools Configuration](https://tanstack.com/devtools/) section.
+Finally, add any additional configuration you desire to the `TanStackDevtools` component. More information can be found under the [TanStack Devtools Configuration](https://tanstack.com/devtools/) section.
 
 A complete working example can be found in our [examples section](https://tanstack.com/form/latest/docs/framework/react/examples/devtools).

docs/framework/react/guides/dynamic-validation.md

@@ -3,7 +3,7 @@ id: dynamic-validation
 title: Dynamic Validation
 ---
 
-In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular
+In many cases, you want to change the validation rules depending on the state of the form or other conditions. The most popular
 example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not.
 
 We support this through our `onDynamic` validation function.
@@ -18,7 +18,7 @@ const form = useForm({
     firstName: '',
     lastName: '',
   },
-  // If this is omitted, onDynamic will not be called
+  // If this is omitted, `onDynamic` will not be called
   validationLogic: revalidateLogic(),
   validators: {
     onDynamic: ({ value }) => {
@@ -31,11 +31,12 @@ const form = useForm({
 })
 ```
 
-> By default `onDynamic` is not called, so you need to pass `revalidateLogic()` to the `validationLogic` option of `useForm`.
+> [!IMPORTANT]
+> By default, `onDynamic` is not called; therefore you must pass `revalidateLogic()` to the `validationLogic` option of `useForm`.
 
 ## Revalidation Options
 
-`revalidateLogic` allows you to specify when validation should be run and change the validation rules dynamically based on the current submission state of the form.
+`revalidateLogic` allows you to specify when validation should be run and to change the validation rules dynamically based on the current submission state of the form.
 
 It takes two arguments:
 
@@ -64,7 +65,7 @@ const form = useForm({
 
 ## Accessing Errors
 
-Just as you might access errors from an `onChange` or `onBlur` validation, you can access the errors from the `onDynamic` validation function using the `form.state.errorMap` object.
+Just as you might access errors from an `onChange` or `onBlur` validation, you can access errors from the `onDynamic` validation function using the `form.state.errorMap` object.
 
 ```tsx
 function App() {
@@ -177,7 +178,7 @@ function App() {
 
 ### Async Validation
 
-Async validation can also be used with `onDynamic` just like with other validation logic. You can even debounce the async validation to avoid excessive calls.
+Async validation can also be used with `onDynamicAsync` just like with other validation logic. You can even debounce the async validation to avoid excessive calls.
 
 ```tsx
 const form = useForm({

docs/framework/react/guides/form-composition.md

@@ -3,7 +3,7 @@ id: form-composition
 title: Form Composition
 ---
 
-A common criticism of TanStack Form is its verbosity out-of-the-box. While this _can_ be useful for educational purposes - helping enforce understanding our APIs - it's not ideal in production use cases.
+A common criticism of TanStack Form is that it is verbose out-of-the-box. While this verbosity _can_ be useful for educational purposes - helping to enforce understanding of our APIs - it's not ideal in production use cases.
 
 As a result, while `form.Field` enables the most powerful and flexible usage of TanStack Form, we provide APIs that wrap it and make your application code less verbose.
 
@@ -103,7 +103,7 @@ function App() {
 }
 ```
 
-This not only allows you to reuse the UI of your shared component, but retains the type-safety you'd expect from TanStack Form: Typo `name` and get a TypeScript error.
+This not only allows you to reuse the UI of your shared component, but retains the type-safety you'd expect from TanStack Form: Mistyping `name` will result in a TypeScript error.
 
 #### A note on performance
 
@@ -162,7 +162,7 @@ function App() {
 
 ## Breaking big forms into smaller pieces
 
-Sometimes forms get very large; it's just how it goes sometimes. While TanStack Form supports large forms well, it's never fun to work with hundreds or thousands of lines of code long files.
+Sometimes forms get very large; it's just how it goes sometimes. While TanStack Form supports large forms well, it's never fun to work with hundreds or thousands of lines of code in single files.
 
 To solve this, we support breaking forms into smaller pieces using the `withForm` higher-order component.
 

docs/framework/react/guides/linked-fields.md

@@ -3,21 +3,19 @@ id: linked-fields
 title: Link Two Form Fields Together
 ---
 
-You may find yourself needing to link two fields together; when one is validated as another field's value has changed.
-One such usage is when you have both a `password` and `confirm_password` field,
-where you want to `confirm_password` to error out when `password`'s value does not match;
-regardless of which field triggered the value change.
+You may find yourself needing to link two fields together, such that one is validated when another's value has changed.
+One such use case is when you have both a `password` and a `confirm_password` field.
+Here, you want the `confirm_password` field to error out if its value doesn't match that of the `password` field, regardless of which field triggered the value change.
 
-Imagine the following userflow:
+Imagine the following user flow:
 
-- User updates confirm password field.
-- User updates the non-confirm password field.
+- User updates the `confirm_password` field.
+- User updates the `password` field.
 
-In this example, the form will still have errors present,
-as the "confirm password" field validation has not been re-ran to mark as accepted.
+In this example, the form will still have errors present because the `confirm_password` field's validation has not been re-run to mark the field as valid.
 
-To solve this, we need to make sure that the "confirm password" validation is re-run when the password field is updated.
-To do this, you can add a `onChangeListenTo` property to the `confirm_password` field.
+To solve this, you need to make sure that the `confirm_password` field's validation is re-run when the `password` field is updated.
+To do this, you can add an `onChangeListenTo` prop to the `confirm_password` field.
 
 ```tsx
 function App() {
@@ -74,4 +72,4 @@ function App() {
 }
 ```
 
-This similarly works with `onBlurListenTo` property, which will re-run the validation when the field is blurred.
+This is similar to the `onBlurListenTo` prop, which re-runs the validation when the linked field is blurred.

docs/framework/react/guides/listeners.md

@@ -11,7 +11,7 @@ Imagine the following user flow:
 - User then selects a province from another drop-down.
 - User changes the selected country to a different one.
 
-In this example, when the user changes the country, the selected province needs to be reset as it's no longer valid. With the listener API, we can subscribe to the onChange event and dispatch a reset to the field "province" when the listener is fired.
+In this example, when the user changes the country, the selected province needs to be reset as it's no longer valid. With the listener API, we can subscribe to the `onChange` event and dispatch a reset to the "province" field when the listener is fired.
 
 Events that can be "listened" to are:
 
@@ -94,7 +94,7 @@ We enable an easy method for debouncing your listeners by adding a `onChangeDebo
 
 At a higher level, listeners are also available at the form level, allowing you access to the `onMount` and `onSubmit` events, and having `onChange` and `onBlur` propagated to all the form's children. Form-level listeners can also be debounced in the same way as previously discussed.
 
-`onMount` and `onSubmit` listeners have to following props:
+`onMount` and `onSubmit` listeners have the following parameters:
 
 - `formApi`
 

docs/framework/react/guides/reactivity.md

@@ -3,7 +3,7 @@ id: reactivity
 title: Reactivity
 ---
 
-Tanstack Form doesn't cause re-renders when interacting with the form. So you might find yourself trying to use a form or field state value without success.
+Tanstack Form doesn't cause re-renders when interacting with the form. So, you might find yourself trying to use a form or field state value without success.
 
 If you would like to access reactive values, you will need to subscribe to them using one of two methods: `useStore` or the `form.Subscribe` component.
 
@@ -13,7 +13,7 @@ Some uses for these subscriptions are rendering up-to-date field values, determi
 
 ## useStore
 
-The `useStore` hook is perfect when you need to access form values within the logic of your component. `useStore` takes two parameters. First, the form store. Second a selector to fine tune the piece of the form you wish to subscribe to.
+The `useStore` hook is perfect when you need to access form values within the logic of your component. `useStore` takes two parameters. First, the form store. Second, a selector to specify the piece of the form you wish to subscribe to.
 
 ```tsx
 const firstName = useStore(form.store, (state) => state.values.firstName)
@@ -28,7 +28,7 @@ While it IS possible to omit the selector, resist the urge as omitting it would
 
 ## form.Subscribe
 
-The `form.Subscribe` component is best suited when you need to react to something within the UI of your component. For example, showing or hiding ui based on the value of a form field.
+The `form.Subscribe` component is best suited when you need to react to something within the UI of your component. For example, showing or hiding UI based on the value of a form field.
 
 ```tsx
 <form.Subscribe
@@ -49,4 +49,4 @@ The `form.Subscribe` component is best suited when you need to react to somethin
 
 > The `form.Subscribe` component doesn't trigger component-level re-renders. Anytime the value subscribed to changes, only the `form.Subscribe` component re-renders.
 
-The choice between whether to use `useStore` or `form.Subscribe` mainly boils down to that if it's rendered in the ui, reach for `form.Subscribe` for its optimizations perks, and if you need the reactivity within the logic, then `useStore` is the choice to make.
+The choice between whether to use `useStore` or `form.Subscribe` mainly boils down to your use case. If you're aiming for direct UI updates based on form state, use `form.Subscribe` for its optimization perks. And if you need the reactivity within the logic, then `useStore` is the better choice.

docs/framework/react/guides/submission-handling.md

@@ -5,7 +5,7 @@ title: Submission handling
 
 ## Passing additional data to submission handling
 
-You may have multiple types of submission behaviour, for example, going back to another page or staying on the form.
+You may have multiple types of submission behaviour, for example, going back to the previous page or staying on the form.
 You can accomplish this by specifying the `onSubmitMeta` property. This meta data will be passed to the `onSubmit` function.
 
 > Note: if `form.handleSubmit()` is called without metadata, it will use the provided default.