https://github.com/ozgrozer/recassfov
React client and server side form validation
https://github.com/ozgrozer/recassfov
form-validation react
Last synced: 6 months ago
JSON representation
React client and server side form validation
- Host: GitHub
- URL: https://github.com/ozgrozer/recassfov
- Owner: ozgrozer
- License: mit
- Created: 2018-04-28T14:23:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-20T18:59:28.000Z (about 7 years ago)
- Last Synced: 2025-07-10T20:59:32.689Z (6 months ago)
- Topics: form-validation, react
- Language: JavaScript
- Homepage: https://z3j2o35pjm.codesandbox.io/
- Size: 145 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# recassfov
[](https://www.npmjs.com/package/recassfov)
[](https://github.com/ozgrozer/recassfov/blob/master/license)
**Re**act **C**lient **a**nd **S**erver **S**ide **Fo**rm **V**alidation
[Demo](https://codesandbox.io/s/z3j2o35pjm)
## Usage
Install library.
```sh
# with yarn
$ yarn add recassfov
# or with npm
$ npm i recassfov
```
Import library.
```jsx
import { Form, Input } from 'recassfov'
```
Create validation rules. ([Validator.js](https://github.com/chriso/validator.js#validators))
```jsx
const validations = {
username: [
{
rule: 'isLength',
args: { min: 4, max: 32 },
invalidFeedback: 'please provide a username (min: 4, max: 32)'
}
],
email: [
{
rule: 'isEmail',
invalidFeedback: 'please provide a valid email'
}
],
message: [
{
rule: 'isLength',
args: { min: 1 },
invalidFeedback: 'please provide a message'
}
]
}
```
Build your form.
```jsx
```
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('/signup', (req, res) => {
const result = {
validations: {}
}
if (req.body.username === 'john') {
result.validations.username = 'john is already registered'
}
res.send(result)
})
```
## Props & Callbacks
**``**
Props
```jsx
```
Callbacks
```jsx
{
console.log('onSubmit')
}}
validFormBeforePost={(res) => {
console.log(res.formItems)
}}
invalidFormBeforePost={(res) => {
console.log(res.formItems)
}}
validFormAfterPost={(res) => {
console.log(res.formItems)
console.log(res.ajaxResult)
res.cleanFormItems()
}}
invalidFormAfterPost={(res) => {
console.log(res.formItems)
console.log(res.ajaxResult)
}}
>
```
## Contribution
Feel free to contribute. Open a new [issue](https://github.com/ozgrozer/recassfov/issues), or make a [pull request](https://github.com/ozgrozer/recassfov/pulls).
## License
[MIT](https://github.com/ozgrozer/recassfov/blob/master/license)