You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**Input Validator** is a plugin that adds user input validation to the [**React ChatBotify Core Library**](https://react-chatbotify.com). By default, the core library does not ship with user input validation. This plugin relies on chatbot events to intercept & validate messages, as well as chatbot hooks to provide visual feedback to users. The demo gif above should give you a pretty good idea of what this plugin is capable of doing.
28
+
**Input Validator** is a plugin that adds user input validation to the [**React ChatBotify Core Library**](https://react-chatbotify.com). By default, the core library does not ship with user input validation. This plugin relies on chatbot events to intercept & validate user inputs, as well as chatbot hooks to provide visual feedback to users. The demo gif above should give you a pretty good idea of what this plugin is capable of doing.
29
29
30
30
For support, join the plugin community on [**Discord**](https://discord.gg/J6pA4v3AMW) to connect with other developers and get help.
31
31
@@ -55,7 +55,7 @@ The plugin is incredibly straightforward to use and is [**available on npm**](ht
55
55
};
56
56
```
57
57
58
-
4. Add the `validateInput` attribute to the [**Block**](https://react-chatbotify.com/docs/concepts/conversations#block) that requires validation:
58
+
4. Add the `validateTextInput` and/or `validateFileInput` attribute to the [**Block**](https://react-chatbotify.com/docs/concepts/conversations#block) that requires validation:
@@ -64,7 +64,7 @@ The plugin is incredibly straightforward to use and is [**available on npm**](ht
64
64
constflow= {
65
65
start: {
66
66
message:"What is your age?"
67
-
validateInput: (userInput) => {
67
+
validateTextInput: (userInput) => {
68
68
if (isNaN(userInput)) {
69
69
return {success:false, promptContent:"Age must be a number!", promptDuration:3000}
70
70
}
@@ -83,7 +83,8 @@ The quickstart above shows how input validation can be done for **age input (e.g
83
83
### Features
84
84
85
85
**Input Validator** is a lightweight plugin that provides the following features to your chatbot:
86
-
- Validate user input submissions
86
+
- Validate user text input submissions
87
+
- Validate user file input (upload) submissions
87
88
- Notify users with toasts/highlights upon successful/failed validations
88
89
- Advanced styling options upon successful/failed validations
89
90
- Auto setups with necessary events enabled out-of-the-box (plug & play!)
@@ -143,7 +144,7 @@ As you may be able to tell from above, there are 5 configurable sections within
143
144
144
145
#### Validating User Input
145
146
146
-
To validate user input, add the `validateInput` attribute to any Block that requires validation. The `validateInput` attribute is a function that receives the user's input and returns an object indicating the validation result. An example can be seen below:
147
+
The plugin allows validating user text input and file input (upload). To do so, you may add the respective `validateTextInput` and `validateFileInput` attributes to any Block that requires validation. The `validateTextInput` attribute is a function that receives the user's input (string) and returns an object indicating the validation result. The `validateFileInput` attribute is a function that receives the user's uploaded files (FileList) and similarly returns an object indicating the validation result. An example can be seen below:
147
148
148
149
```javascript
149
150
importChatBotfrom"react-chatbotify";
@@ -175,7 +176,7 @@ const MyComponent = () => {
175
176
}
176
177
```
177
178
178
-
As you can see from the example above, `validateInput` takes in a `userInput` parameter and returns an object representing the validation result. The validation result contains a total of 5 properties described in the table below:
179
+
As you can see from the example above, `validateTextInput` takes in a `userInput` (string) parameter and returns an object representing the validation result. The validation result contains a total of 5 properties described in the table below:
@@ -185,7 +186,7 @@ As you can see from the example above, `validateInput` takes in a `userInput` pa
185
186
|`promptType`| string | "info" | Defines the type of prompt to display (e.g., "error", "warning", etc.), which influences styling and colors set in plugin configurations. |
186
187
|`highlightTextArea`| boolean | true | If set to `true`, highlights the input text area according to validation result, providing more visual feedback. |
187
188
188
-
Note that all above properties have default values assigned to them. This means that if the `validateInput` attribute does not return an expected object, validation fails by default since `success` would be `false`.
189
+
Note that all above properties have default values assigned to them. This means that if the `validateTextInput` attribute does not return an expected object, validation fails by default since `success` would be `false`.
0 commit comments