https://github.com/ozgrozer/rfv
React form validator
https://github.com/ozgrozer/rfv
form-validation form-validator react react-form-validation react-form-validator
Last synced: 4 months ago
JSON representation
React form validator
- Host: GitHub
- URL: https://github.com/ozgrozer/rfv
- Owner: ozgrozer
- License: mit
- Created: 2018-12-20T19:07:11.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-04-01T18:54:07.000Z (over 3 years ago)
- Last Synced: 2025-08-26T03:03:55.577Z (4 months ago)
- Topics: form-validation, form-validator, react, react-form-validation, react-form-validator
- Language: JavaScript
- Homepage: https://codesandbox.io/s/o572300y0y
- Size: 490 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# RFV (React Form Validator)
[](https://www.npmjs.com/package/rfv)
[](https://github.com/ozgrozer/rfv/blob/master/license)
React form validator and form handler.
RFV uses [Validator.js](https://github.com/chriso/validator.js) as a validator engine, and [Axios](https://github.com/axios/axios) for HTTP requests.
[Demo (Only form validator option)](https://codesandbox.io/s/5wq8o1nqzl)
[Demo (Form validator and form handler option)](https://codesandbox.io/s/o572300y0y)
## Installation
Install with Yarn.
```sh
$ yarn add rfv
```
Install with NPM.
```sh
$ npm i rfv
```
## Usage
Only form validator option.
```jsx
import React from 'react'
import ReactDOM from 'react-dom'
// Import package
import { Form, Input, Textarea } from 'rfv'
// Create validation rules (https://github.com/chriso/validator.js#validators)
const validations = {
email: [
{
rule: 'isEmail',
invalidFeedback: 'Please provide a valid email'
}
],
message: [
{
rule: 'isLength',
args: { min: 1 },
invalidFeedback: 'Please provide a message'
}
]
}
const App = () => {
// Learn the status of validation with `res.isFormValid` and get your form data as an object with `res.items` to make an AJAX request or something else
const onSubmit = res => {
if (res.isFormValid) {
post('url', res.items)
}
}
return (
// Build your form
Submit
)
}
ReactDOM.render(, document.getElementById('root'))
```
Form validator and form handler option.
```jsx
import React from 'react'
import ReactDOM from 'react-dom'
// Import package
import { Form, Input, Textarea } from 'rfv'
// Create validation rules (https://github.com/chriso/validator.js#validators)
const validations = {
email: [
{
rule: 'isEmail',
invalidFeedback: 'Please provide a valid email'
}
],
message: [
{
rule: 'isLength',
args: { min: 1 },
invalidFeedback: 'Please provide a message'
}
]
}
const App = () => {
// After an AJAX call, call the `res.data` to get the backend results
const postSubmit = res => {
console.log(res.data)
}
return (
// Build your form
Submit
)
}
ReactDOM.render(, document.getElementById('root'))
```
And add `.is-invalid` and `.invalid-feedback` classes into your CSS.
```css
.is-invalid {
border: 1px solid #dc3545;
}
.invalid-feedback {
display: none;
color: #dc3545;
}
.is-invalid ~ .invalid-feedback {
display: block;
}
```
Make sure you add the errors to the `validations` object in backend.
```js
app.post('/sign-up', (req, res) => {
const result = {
validations: {}
}
if (req.body.username === 'john') {
result.validations.username = 'john is already registered'
}
res.send(result)
})
```
## Props & Callbacks
``
Props
```jsx
// Since RFV uses Axios for HTTP requests, whatever you pass into postOptions prop except `data: {}`, directly goes into Axios
```
Callbacks
```jsx
{
// res.e
// res.items
// res.setItems({})
}}
onSubmit={res => {
// res.e
// res.items
// res.isFormValid
// res.setItems({})
}}
postSubmit={res => {
// res.e
// res.data
// res.error
// res.items
// res.isFormValid
// res.setItems({})
// res.isPostSubmitFormValid
}}
>
```
``, ``, ``
Props
```jsx
// You can pass more than one validation
```
Callbacks
```jsx
{
// res.e
// res.validated
}}
/>
```
## Contribution
Feel free to contribute. Open a new [issue](https://github.com/ozgrozer/rfv/issues), or make a [pull request](https://github.com/ozgrozer/rfv/pulls).
## License
[MIT](https://github.com/ozgrozer/rfv/blob/master/license)