|
1 | | -[](https://ko-fi.com/K3K0J5VAD) |
2 | 1 |
|
3 | | - |
| 2 | + |
4 | 3 |
|
5 | | -# Form-Validation-React |
6 | 4 |
|
7 | 5 | ### form-validation-react is an easy-to-use npm library that enables developers to add validation rules to form inputs in React. It supports required fields, email formats, and custom rules with various validation functions and options that can be tailored to specific needs. |
8 | 6 |
|
|
15 | 13 | - [Validate Min & Max](#validate-min-and-max) |
16 | 14 | - [Validate Email](#validate-email) |
17 | 15 | - [Validate Pattern](#validate-pattern) |
| 16 | +- [Validate Phone Number](#validate-phone-number) |
18 | 17 | - [Example Reactjs Code](#example-reactjs-code) |
19 | 18 | - [Licence](#license) |
20 | 19 | ## Installation |
@@ -239,6 +238,41 @@ We provide two different patterns - a regular expression pattern and a wildcard |
239 | 238 |
|
240 | 239 | We also use the `allowEmpty` option to allow the input to be empty, which can be useful for optional fields. |
241 | 240 |
|
| 241 | +# |
| 242 | +# Validate Phone Number |
| 243 | + |
| 244 | +#### A function that validates a phone number input field based on specified country. |
| 245 | + |
| 246 | +```javascript |
| 247 | +ValidatePhone: { |
| 248 | + |
| 249 | + phoneInput: 'phone_input', // required |
| 250 | + countryCode: 'US', // required |
| 251 | + when: 'onblur', // required |
| 252 | + |
| 253 | + onsuccess: (input) => console.log(`${input.value} is a valid phone number`), |
| 254 | + invalid: () => console.log('Invalid phone number'), |
| 255 | + message: 'Please enter a valid US phone number', |
| 256 | + isLandlineNumber: (isLandline) => console.log(`Is a landline: ${isLandline}`), |
| 257 | + isMobileNumber: (isMobile) => console.log(`Is a mobile: ${isMobile}`) |
| 258 | + |
| 259 | +} |
| 260 | +``` |
| 261 | + |
| 262 | +```html |
| 263 | +<input type="number" name="phone_input" /> |
| 264 | +``` |
| 265 | + |
| 266 | + #### `phoneInput`: the name of the input field to validate. |
| 267 | + #### `countryCode`: an optional country code to use in the validation process. |
| 268 | + #### `when`: the event to trigger the validation process. Can be set to either "onblur" or "typing". |
| 269 | + #### `onsuccess`: a function to execute when the validation is successful. |
| 270 | + #### `invalid`: a function to execute when the validation is unsuccessful. |
| 271 | + #### `message`: an error message to display when the validation is unsuccessful. |
| 272 | + #### `isLandlineNumber`: a function that receives a boolean value indicating if the input is a landline number. |
| 273 | + #### `isMobileNumber`: a function that receives a boolean value indicating if the input is a mobile number. |
| 274 | + |
| 275 | + |
242 | 276 | # |
243 | 277 | # Example Reactjs Code |
244 | 278 |
|
|
0 commit comments