|
14 | 14 | - [Validate Email](#validate-email) |
15 | 15 | - [Validate Pattern](#validate-pattern) |
16 | 16 | - [Validate Phone Number](#validate-phone-number) |
| 17 | +- [Validate Number](#validate-number-input) |
17 | 18 | - [Example Reactjs Code](#example-reactjs-code) |
18 | 19 | - [Licence](#license) |
19 | 20 | ## Installation |
@@ -272,6 +273,55 @@ ValidatePhone: { |
272 | 273 | #### `isLandlineNumber`: a function that receives a boolean value indicating if the input is a landline number. |
273 | 274 | #### `isMobileNumber`: a function that receives a boolean value indicating if the input is a mobile number. |
274 | 275 |
|
| 276 | +# |
| 277 | +# Validate Number Input |
| 278 | + |
| 279 | +#### This is a function to validate numbers input. This function can validate a number within a specified range, with a specified number of decimal places, and check whether it's an integer. This function also supports negative numbers and numbers in a specific base. |
| 280 | + |
| 281 | +```javascript |
| 282 | +ValidateNumber: { |
| 283 | + |
| 284 | + input: "my-number-input", // required |
| 285 | + when: "typing", // required |
| 286 | + |
| 287 | + min: 0, |
| 288 | + max: 100, |
| 289 | + decimalPlaces: 2, |
| 290 | + allowNegative: false, |
| 291 | + integersOnly: false, |
| 292 | + base: 10, |
| 293 | + customErrorMessages: { |
| 294 | + invalidNumber: "Invalid number", |
| 295 | + range: "Number must be between 0 and 100", |
| 296 | + decimalPlaces: "Number must have no more than 2 decimal places", |
| 297 | + negative: "Negative numbers are not allowed", |
| 298 | + integersOnly: "Only integers are allowed", |
| 299 | + base: "Number must be in base 10", |
| 300 | + }, |
| 301 | + onsuccess: () => { |
| 302 | + console.log("Validation succeeded!"); |
| 303 | + }, |
| 304 | + invalid: () => { |
| 305 | + console.log("Validation failed!"); |
| 306 | + |
| 307 | +}, |
| 308 | +``` |
| 309 | +
|
| 310 | +```html |
| 311 | +<input type="number" name="my-number-input" /> |
| 312 | +``` |
| 313 | +
|
| 314 | + #### `min` (optional): The minimum value of the number. |
| 315 | + #### `max` (optional): The maximum value of the number. |
| 316 | + #### `input`: The name of the input field to validate. |
| 317 | + #### `when`: The timing of the validation. Valid values are "onblur" and "typing". |
| 318 | + #### `decimalPlaces` (optional): The number of decimal places |
| 319 | + #### `allowNegative` (optional): A boolean value indicating whether negative numbers are allowed. Defaults to true. |
| 320 | + #### `integersOnly` (optional): A boolean value indicating whether the number must be an integer. Defaults to false. |
| 321 | + #### `base` (optional): The base of the number. |
| 322 | + #### `customErrorMessages` (optional): An object containing custom error messages. Valid properties are invalidNumber, range, decimalPlaces, negative, integersOnly, and base. |
| 323 | + #### `onsuccess` (optional): A callback function to execute when validation succeeds. |
| 324 | + #### `invalid` (optional): A callback function to execute when validation fails. |
275 | 325 |
|
276 | 326 | # |
277 | 327 | # Example Reactjs Code |
|
0 commit comments