Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Marvinified/use-form-input-validator
React hooks library to validate your form inputs with ease.– blazing fast
https://github.com/Marvinified/use-form-input-validator
form-validation input-validation input-validator react-hooks-library
Last synced: about 1 month ago
JSON representation
React hooks library to validate your form inputs with ease.– blazing fast
- Host: GitHub
- URL: https://github.com/Marvinified/use-form-input-validator
- Owner: Marvinified
- Created: 2020-10-23T04:01:06.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-26T15:38:04.000Z (over 3 years ago)
- Last Synced: 2024-05-10T17:33:25.887Z (7 months ago)
- Topics: form-validation, input-validation, input-validator, react-hooks-library
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/use-form-input-validator
- Size: 580 KB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-blazingly-fast - use-form-input-validator - React hooks library to validate your form inputs with ease.– blazing fast (JavaScript)
README
# 🆗 use-form-input-validator
React hooks library to validate your form inputs with easily configurable checks and validators.
[](https://www.npmjs.com/package/use-form-input-validator) [](https://standardjs.com)
## Install
```bash
npm install --save use-form-input-validator
# or
yarn add use-form-input-validator
```
## Fork Demo on Codesandbox
[](https://codesandbox.io/s/funny-khayyam-l4cbn?fontsize=14&hidenavigation=1&theme=dark)
> **What's New**✨ You can now reference other values in the custom validator for scenerios like checking if `confirm password` field matchs password `field`
# Usage
## Simple Usage
```jsx
import React from 'react'
import useFormValidator from 'use-form-input-validator'
const App = () => {
const { values, errors, updateField, isAllFieldsValid } = useFormValidator({
email: {
value: '', // defuallt changes
checks: 'required|email' // checks to run on the field on change
}
})
const handleSubmit = (e) => {
// verify if all fields are valid before submitting
if (isAllFieldsValid()) {
// get values easily
const { email } = values
console.log(email)
}
}
return (
Email:
{errors.email}
Submit
)
}
export default App
```
## Using Checks
Check allow you to perform common validation easily by specifying a string of list validation rules.
For example to make an username field required and have a minimium of 5 characters and a maximium of 10 character, you'll have the following `required|min:5|max:10`
```jsx
...
useFormValidator({
username: {
value: '',
checks: 'required|min:5|max:10', // checks to run on the field on input change
}
})
...
```
## Using a custom validator with checks
You can add a custom validator in addition to `checks` to create more complex validation rules by using the `validate` as follows.
```jsx
...
const { values, errors, updateField, isAllFieldsValid } = useFormValidator({
username: {
value: '',
checks: 'required|min:5|max:10', // checks to run on the field on change
// Custom validator
validate: (value) => {
if (value.includes('kepler')) {
return 'The word "kepler" cannot be included in your username'
}
}
}
})
...
```
## Access other fields value
You can now access other fields values in the custom validator. This is useful in certain scenarios. For example, when you want to check if confirm password field matches the password field.
```jsx
...
const { values, errors, updateField, isAllFieldsValid } = useFormValidator({
password: {
value: '',
checks: 'required|min:8', // checks to run on the field on change
},
confirmPassword: {
value: '',
checks: 'required|min:8', // checks to run on the field on change
// Custom validator
validate: (value, values) => {
if(value !== values.comfirmPassword){
return "Confirm Password doesn't match passward"
}
}
}
})
...
```
## Check if a field is valid
You can check if a certain field value is valid
```jsx
import React from 'react'
import useFormValidator from 'use-form-input-validator'
const App = () => {
const { values, errors, updateField, isFieldValid } = useFormValidator({
email: {
value: '', // defuallt changes
checks: 'required|email' // checks to run on the field on change
}
})
const handleSubmit = (e) => {
// verify if email field is valid before submitting
if (isFieldValid('email')) console.log(email)
}
return (
Email:
{errors.email}
Submit
)
}
export default App
```
## Available Checks
- `alpha`
The field under validation must be entirely alphabetic characters.
- `alpha_num`
The field under validation must be entirely alpha-numeric characters.
- `date`
The field under validation must be a valid date.
- `email`
The field under validation must be a valid email address.
- `match:`_`regex`_
he field under validation must match the given regular expression.
- `min:`_`limit`_
The field under validation must have a minimium of _`limit`_ number of character.
- `max:`_`limit`_
The field under validation must have a maximium of _`limit`_ number of character.
- `num`
The field under validation must be a number
- `tel`
The field under validation must be a mobile phone number
## License
MIT © [Marvinified](https://github.com/Marvinified)