|
36 | 36 | - [Form field](#form-field) |
37 | 37 | - [Form field types](#form-field-types) |
38 | 38 | - [Accessing the wizard data](#accessing-the-wizard-data) |
| 39 | +- [Custom validation messages](#custom-validation-messages) |
39 | 40 | - [🎨 Theme](#-theme) |
40 | 41 | - [CodeSandbox examples](#codesandbox-examples) |
41 | 42 | - [⛏️ Built With](#️-built-with) |
@@ -89,14 +90,14 @@ The example shows a simple wizard with two pages. |
89 | 90 |
|
90 | 91 | ## ⚙️ Properties |
91 | 92 |
|
92 | | -| Name | Description | Default | |
93 | | -| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | |
94 | | -| `strict` | Enables validation rules for all input types on all pages. The component prevents the user from progressing until the errors in the current step have been corrected | false | |
95 | | -| `theme` | [Theme](#🎨-theme) object for customized styling | | |
96 | | -| `highlightFieldsOnValidation` | Highlights the fields when the validation fails or succeeds | false | |
97 | | -| `pages` | Collection of [Page](#Page) object | | |
98 | | -| `onFinish` | Callback executed on final step | | |
99 | | -| `RTL` | Enables right to left mode | false | |
| 93 | +| Name | Description | Default | |
| 94 | +| :---------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | |
| 95 | +| `strict` | Validation rules are applied to all inputs that have been marked for validation or that are required. The component prevents the user from moving on until the current step's errors have been fixed. | false | |
| 96 | +| `theme` | [Theme](#🎨-theme) object for customized styling | | |
| 97 | +| `highlightFieldsOnValidation` | Highlights the fields when the validation fails or succeeds | false | |
| 98 | +| `pages` | Collection of [Page](#Page) object | | |
| 99 | +| `onFinish` | Callback executed on final step | | |
| 100 | +| `RTL` | Enables right to left mode | false | |
100 | 101 |
|
101 | 102 | ## Page |
102 | 103 |
|
@@ -160,14 +161,15 @@ Here is an examples how to define pages in the wizard. We are defining two pages |
160 | 161 |
|
161 | 162 | Form field represents an input field in the wizard. Form field is used to define the label, type, validation rules, and other properties. |
162 | 163 |
|
163 | | -| Name | Description | Type | |
164 | | -| :------------ | :---------------------------------- | :-------- | |
165 | | -| isRequired | Marks the field as required | boolean | |
166 | | -| label | Label for the field | string | |
167 | | -| name | Name of the Field | string | |
168 | | -| selectOptions | Use this prop when type is "select" | Array | |
169 | | -| type | Type of Field | InputType | |
170 | | -| validate | Enables validation for the field | boolean | |
| 164 | +| Name | Description | Type | |
| 165 | +| :---------------- | :---------------------------------------------------------- | :-------- | |
| 166 | +| isRequired | Marks the field as required | boolean | |
| 167 | +| label | Label for the field | string | |
| 168 | +| name | Name of the Field | string | |
| 169 | +| selectOptions | Use this prop when type is "select" | Array | |
| 170 | +| type | Type of Field | InputType | |
| 171 | +| validate | Enables validation for the field | boolean | |
| 172 | +| validationMessage | Custom validation message to be shown on validation failure | boolean | |
171 | 173 |
|
172 | 174 | > Fields marked as required are automatically validated. If you set `isRequired` to `false` and `validate` to `true`, the wizard will validate and flag the errors, but the step itself will not be marked as invalid. |
173 | 175 |
|
@@ -235,6 +237,28 @@ For the getting started example, the `onFinish` callback will receive an object |
235 | 237 | } |
236 | 238 | ``` |
237 | 239 |
|
| 240 | +## Custom validation messages |
| 241 | + |
| 242 | +Validation messages are enabled by default for all fields. However, the `validationMessage` property allows you to customize the message for each field. |
| 243 | + |
| 244 | +```jsx |
| 245 | +<Wizard |
| 246 | + pages={[ |
| 247 | + { |
| 248 | + title: "Introduction", |
| 249 | + fields: [ |
| 250 | + { |
| 251 | + label: "First Name", |
| 252 | + name: "firstName", |
| 253 | + type: "text", |
| 254 | + isRequired: true, |
| 255 | + validationMessage: "Please enter your first name", |
| 256 | + }, |
| 257 | + ], |
| 258 | + }, |
| 259 | +]} |
| 260 | +``` |
| 261 | + |
238 | 262 | ## 🎨 Theme |
239 | 263 |
|
240 | 264 | Customize the look and feel of the Wizard through the `theme` object. |
|
0 commit comments