chore: supplement validation behavior

apps/docs/content/blog/v2.4.0.mdx

@@ -230,7 +230,7 @@ The disabled option(s) will be displayed in the bottom of the list.
 
 ### Doctor Command add peerDependencies check
 
-The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies, relation: [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954).
+The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies. (See [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954) for more).
 
 <Spacer y={4} />
 
@@ -266,8 +266,20 @@ you need to update the import as follows:
 + import {cn} from "@nextui-org/theme"
 ```
 
-<Spacer y={4} />
+### Validation Behavior
+
+Since v2.4.0, we've changed the default validation behavior to `aria` which means no native validation is applied. If you wish to use the native validation, you can set `validationBehavior` to `native` to the input components or set it to the Provider as stated above.
+
+For those who use `validationBehavior="aria"`, `validate` will be no longer applied since it is only for native validation. Therefore, you need to switch to use `isInvalid` prop instead.
+
+```tsx
+<form onSubmit={onSubmit}>
+  <Input errorMessage={formErrors?.field1} isInvalid={!!formErrors?.field1} name="field1" />
+  <Button type="submit">Submit</Button>
+</form>
+```
 
+<Spacer y={4} />
 
 ## Other Changes
 
@@ -307,6 +319,7 @@ you need to update the import as follows:
 - Refactored the useScrollPosition hook to improve performance and stability by using useCallback for the handler function and useRef for throttleTimeout. [PR](https://github.com/nextui-org/nextui/pull/3049) - [@Gaic4o](https://github.com/Gaic4o)
 
 **Documentation**:
+
 - Updated documentation to reflect the new features and changes in the components, API references, and CLI.
 
 Special thanks to NextUI Team members [@kuri-sun](https://github.com/kuri-sun), [@ryo-manba](https://github.com/ryo-manba), 

apps/docs/content/docs/components/input.mdx

@@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput`
 | placeholder        | `string`                                                                                                                                                               | The placeholder of the input.                                                                                                                                 | -         |
 | description        | `ReactNode`                                                                                                                                                            | A description for the input. Provides a hint such as specific requirements for what to choose.                                                                | -         |
 | errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                  | An error message for the input. It is only shown when `isInvalid` is set to `true`                                                                            | -         |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -         |
+| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| -         |
 | validationBehavior | `native` \| `aria`                                                                                                                                                     | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
 | startContent       | `ReactNode`                                                                                                                                                            | Element to be rendered in the left side of the input.                                                                                                         | -         |
 | endContent         | `ReactNode`                                                                                                                                                            | Element to be rendered in the right side of the input.                                                                                                        | -         |

packages/components/input/stories/input.stories.tsx

@@ -527,6 +527,7 @@ export const Required = {
   args: {
     ...defaultProps,
     isRequired: true,
+    validationBehavior: "native",
   },
 };
 
@@ -665,6 +666,7 @@ export const WithErrorMessageFunction = {
         return "Value is required";
       }
     },
+    validationBehavior: "native",
   },
 };
 
@@ -682,6 +684,7 @@ export const WithValidation = {
     isRequired: true,
     label: "Number",
     placeholder: "Enter a number(0-100)",
+    validationBehavior: "native",
   },
 };