Skip to content

Commit 91f2e32

Browse files
committed
validate phone number added
1 parent 89cccfd commit 91f2e32

5 files changed

Lines changed: 591 additions & 143 deletions

File tree

README.md

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/K3K0J5VAD)
21

3-
![hero](https://i.postimg.cc/DfpgcC7D/Screenshot-2023-03-02-at-10-56-55-PM.png)
2+
![hero](https://i.postimg.cc/rwWKV7X7/Twitter-header-1-page-0001.jpg)
43

5-
# Form-Validation-React
64

75
### 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.
86

@@ -15,6 +13,7 @@
1513
- [Validate Min & Max](#validate-min-and-max)
1614
- [Validate Email](#validate-email)
1715
- [Validate Pattern](#validate-pattern)
16+
- [Validate Phone Number](#validate-phone-number)
1817
- [Example Reactjs Code](#example-reactjs-code)
1918
- [Licence](#license)
2019
## Installation
@@ -239,6 +238,41 @@ We provide two different patterns - a regular expression pattern and a wildcard
239238

240239
We also use the `allowEmpty` option to allow the input to be empty, which can be useful for optional fields.
241240

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+
242276
#
243277
# Example Reactjs Code
244278

src/index.js

Lines changed: 220 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)