Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nebo15/react-nebo15-validate
Validation module for React application by Nebo15
https://github.com/nebo15/react-nebo15-validate
javascript nebo15 react react-nebo15-validate redux redux-form validate validation validator webpack
Last synced: about 2 months ago
JSON representation
Validation module for React application by Nebo15
- Host: GitHub
- URL: https://github.com/nebo15/react-nebo15-validate
- Owner: Nebo15
- License: mit
- Created: 2017-04-10T10:54:10.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-11T10:09:41.000Z (about 6 years ago)
- Last Synced: 2024-10-29T05:07:35.595Z (2 months ago)
- Topics: javascript, nebo15, react, react-nebo15-validate, redux, redux-form, validate, validation, validator, webpack
- Language: JavaScript
- Homepage:
- Size: 85 KB
- Stars: 3
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Nebo15 Validate
[](https://travis-ci.org/Nebo15/react-nebo15-validate)
Validation module for React JS application.
### Installation
```
npm install react-nebo15-validate --save
```
### Usage
```
import React from 'react';
import validate from 'react-nebo15-validate';
const validationSchema = {
first_name: {
required: true,
minLength: 4,
},
last_name: {
require: true,
minLength: 4,
},
second_name: {
minLength: 2,
},
birthDate: {
required: true,
minDate: new Date(1930, 2, 12),
maxDate: new Date(),
},
};
const data = {
first_name: 'John',
last_name: '',
birthDate: new Date(1920, 3, 24),
};
const result = validate(data, schema);
```
#### React Components
```
import React from 'react';
import { reduxFormValidate, ErrorMessages, ErrorMessage } from 'react-nebo15-validate';
import { reduxForm, Field } from 'redux-form';
class Input extends React.Component {
render() {
const { input, meta, label, ...rest } = this.props;
return (
{ label }
Custom required message
);
}
}
@reduxForm({
form: 'profile',
validate: reduxValidation({
first_name: {
required: true,
minLength: 4,
},
last_name: {
required: true,
minLength: 4,
},
birth_date: {
required: true
maxDate: new Date(),
},
});
})
export default class ProfileForm extends React.Component {
render() {
const { handleSubmit } = this.props;
return (
Submit
);
}
}
```
### Validators
- array - value is array
- object - value is object
- integer - value is integer
- float - value is float number
- numeric - value is number
- boolean - value is boolean
- string - value is string
- required - value is required
- ipv4 - value is valid IPV4
- cardType - card provider (support visa, mastercard, accept array of types)
- greaterThan - value > param
- min - value >= param
- max - value <= param
- equals - value === param
- length - value length equals param
- minLength - value length greater or equal than param
- maxLength - value length less or equal than param
- minDate - value is after or the same as param
- maxDate - value is before or the same as param
- format - value should match regular expression in param
- cast - value has type in param (av. array, map, object, integer, float, boolean, string)
- inclusion - value is in array in param
- exclusion - value is not one of value in array in param
- subset - value is an array and it is a subset of array in param
- number - value is a number and it is more than `param.min` and less than `param.max`
- confirmation - value is equal the value by path in param. (eg. `passwordConfirmation: { confirmation: 'password' }`)
- acceptance - value is true
- email - value is a valid email
- phone_number - value is a valid phone number
- card_number - value is a valid card number
- unique - value is an array ant it has only unique values
- dependency - expect existing value by path in param
- alphanumeric - value is an alphanumeric string
- metadata - description http://docs.apimanifest.apiary.io/#introduction/interacting-with-api/errors
- json - value is a valid json object
### Add custom validation
`addValidation(name, validationFn)` - add custom validation function
`removeValidation(name)` - remove custom validation function by name
`getValidation(name)` - get custom validation function by name
### Redux Form
`reduxFormValidate` transforms error message for `redux-form` format.
### Collections and arrays
You can validate collections and arrays.
```
import { collectionOf, arrayOf } from 'redux-nebo15-validate';
/// collectionOf
const schema = {
contacts: collectionOf({
first_name: {
required: true,
minLength: 4,
},
last_name: {
required: true,
minLength: 4,
},
second_name: {
minLength: 4,
}
}),
}
const data = {
contacts: [
{
first_name: 'Ivan', // valid
last_name: 'Ivanov', // valid
second_name: 'S' // invalid
}
]
}
// arrayOf
const schema = {
tags: arrayOf({
required: true,
minLength: 4,
}),
}
const data = {
tags: ['new','news','tags'] // invalid, valid, valid
}
```