├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── README.md
├── examples
├── index.html
├── src
│ ├── app.js
│ ├── contact-form.js
│ ├── dynamic-validation.js
│ ├── index.js
│ └── redux
│ │ ├── index.js
│ │ └── root.reducer.js
└── style.css
├── package-lock.json
├── package.json
├── src
├── __tests__
│ ├── creditcard.spec.js
│ ├── digits.spec.js
│ ├── email.spec.js
│ ├── equalTo.spec.js
│ ├── matchField.spec.js
│ ├── max.spec.js
│ ├── maxLength.spec.js
│ ├── min.spec.js
│ ├── minLength.spec.js
│ ├── oneOf.spec.js
│ ├── pattern.spec.js
│ ├── promise.spec.js
│ ├── required.spec.js
│ └── setup.js
├── basic-validations.js
├── form-messages
│ └── index.js
├── index.js
└── validation.js
└── webpack
├── base.js
├── development.js
├── example.js
├── index.js
└── production.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 |
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 |
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 |
20 | [*.md]
21 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint"
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | *.iml
3 | node_modules
4 | dist
5 | lib
6 | npm-debug.log
7 | .DS_Store
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | examples
3 | test
4 | .babelrc
5 | .eslint*
6 | .idea
7 | .npmignore
8 | .travis.yml
9 | webpack
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "10"
4 | script:
5 | - npm run check:src
6 | - npm run build
7 | branches:
8 | only:
9 | - master
10 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # 0.0.6
2 | - **added** `allValues` and `allProps` params to validator.
3 | It can be used to create validations that requires other fields value and props like `matchField`.
4 | example:
5 | ```javascript
6 | import FormMessages from 'redux-form-validation';
7 |
8 | FormMessages.addValidation('matchField', function(field, value, prop, dispatch, allValues, allProps){
9 | return !value ? false : value != allValues[prop];
10 | })
11 | ```
12 |
13 | - **added** `matchField` validation.
14 | must give the matching field name as value.
15 |
16 | example:
17 | ```javascript
18 | var validations = {
19 | email: {
20 | required: true,
21 | email: true,
22 | validateOnBlur: true,
23 | },
24 | retryEmail: {
25 | validateOnBlur: true,
26 | matchField: 'email',
27 | },
28 | }
29 | ```
30 | - **added** example.
31 | To run the example run `npm i -d && npm start`
32 | - **fixed** `FormMessage` component.
33 | Render error when only has one child.
34 | - **added** tests
35 | credits for this one goes to @mcalthrop
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # redux-form-validation THIS LIBRARY NOT MENTAINED
2 |
3 | [](https://travis-ci.org/CosticaPuntaru/redux-form-validation)
4 | [](https://www.npmjs.com/package/redux-form-validation)
5 | [](https://www.npmjs.com/package/redux-form-validation)
6 | ## Installation
7 | ```npm install --save redux-form-validation```
8 |
9 | ## How to use
10 | adds a helper to display and validate fields for redux-form
11 |
12 | builtin validation can be found in /src/basic-validation.js
13 |
14 |
15 | ### How to add your validation:
16 | ```javascript
17 |
18 | import FormMessages from 'redux-form-validation';
19 |
20 | FormMessages.addValidation('required', function (field, value, prop, dispatch, allValues, allProps) {
21 | return prop ? !value : false
22 | })
23 | ```
24 | to make async validation you can return a promise in your validation function
25 |
26 | NOTE: all the validations are indexed by the key, if you add a `require` validation it will overwrite the validation used before
27 | The validation function can return a `message` or `true` if the field is invalid
28 | If the field is valid the validation function must return `false`
29 |
30 |
31 | ### How to display error messages in form
32 | #### Component Props:
33 |
34 | * `tagName`: Specify element type to render as message list container (default is `div`)
35 | * `errorCount` : Specify how many errors to be displayed at once (default `-1`= all)
36 | * `Meta` : The `redux-form` Meta (or for other uses a object with {touch, error})
37 |
38 |
39 | example for how to use validator:
40 |
41 | ```javascript
42 | import React, {Component} from 'react';
43 | import {reduxForm, Field} from 'redux-form';
44 | import {connect} from 'react-redux';
45 | import FormMessages from 'redux-form-validation';
46 | import {generateValidation} from 'redux-form-validation';
47 |
48 | const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
49 |
50 |
51 | const validations = {
52 | email: {
53 | validateOnBlur: true,
54 | required: true,
55 | minLength: 5,
56 | email: true,
57 | promise: function (fieldName, fieldValue, dispatch) {
58 | return sleep(1000).then(() => {
59 | if (['example@example.com', 'test@example.com'].indexOf(fieldValue.trim()) > -1) {
60 | return Promise.reject('That email ' + fieldValue + ' is taken')
61 | }
62 | })
63 | }
64 | },
65 | retryEmail: {
66 | validateOnBlur: true,
67 | required: true,
68 | matchField: 'email',
69 | },
70 | name: {
71 | required: true
72 | },
73 | subject: {
74 | required: true,
75 | minLength: 5
76 | },
77 | message: {
78 | required: true,
79 | minLength: 10
80 | }
81 | };
82 |
83 |
84 | const submit = (values, dispatch) => {
85 | console.log('sending mail to contact', values);
86 | };
87 |
88 | @connect()
89 | @reduxForm({
90 | form: 'contact',
91 | ...generateValidation(validations)
92 | })
93 | export default class ContactForm extends Component {
94 | // probably you will want to use different messages for different fields but for the demo this is good enough
95 | renderField = ({input, label, type, meta}) => {
96 | return (
97 |
98 |
99 |
100 |
101 |
102 |
103 | {meta && meta.error && meta.error.promise}
104 |
105 |
106 | the retry email must be the same as the email
107 |
108 |
109 | this field is required
110 |
111 |
112 | please insert a valid email
113 |
114 |
115 | this field must have at least 5 characters
116 |
117 |
118 |
119 |
9 |
Welcome to redux-form-validation
10 | Simple validation
11 |
12 |
13 | dynamic validation
14 |
15 |
16 | );
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/examples/src/contact-form.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {reduxForm, Field} from 'redux-form';
3 | import {connect} from 'react-redux';
4 | import FormMessages from 'redux-form-validation';
5 | import {generateValidation} from 'redux-form-validation';
6 |
7 | const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
8 |
9 |
10 | const validations = {
11 | email: {
12 | validateOnBlur: true,
13 | required: true,
14 | minLength: 5,
15 | email: true,
16 | promise: function (fieldName, fieldValue, dispatch) {
17 | return sleep(1000).then(() => {
18 | if (['example@example.com', 'test@example.com'].indexOf(fieldValue.trim()) > -1) {
19 | return Promise.reject('That email ' + fieldValue + ' is taken')
20 | }
21 | })
22 | }
23 | },
24 | retryEmail: {
25 | validateOnBlur: true,
26 | required: true,
27 | matchField: 'email',
28 | },
29 | name: {
30 | required: true
31 | },
32 | subject: {
33 | required: true,
34 | minLength: 5
35 | },
36 | message: {
37 | required: true,
38 | minLength: 10
39 | }
40 | };
41 |
42 |
43 | const submit = (values, dispatch) => {
44 | console.log('sending mail to contact', values);
45 | };
46 |
47 | @connect()
48 | @reduxForm({
49 | form: 'contact',
50 | ...generateValidation(validations)
51 | })
52 | export default class ContactForm extends Component {
53 | // probably you will want to use different messages for different fields but for the demo this is good enough
54 | renderField = ({input, label, type, meta}) => {
55 | return (
56 |
57 |
58 |
59 |
60 |
61 |
62 | {meta && meta.error && meta.error.promise}
63 |
64 |
65 | the retry email must be the same as the email
66 |
67 |
68 | this field is required
69 |
70 |
71 | please insert a valid email
72 |
73 |
74 | this field must have at least 5 characters
75 |
76 |
77 |
78 |
70 | loading....
71 |
72 | )
73 | }
74 | return (
75 |
76 |
77 |
78 | )
79 | }
80 | }
81 |
82 | @connect()
83 | @reduxForm({
84 | form: 'dynamicContact',
85 | })
86 | export default class ContactForm extends Component {
87 | // probably you will want to use different messages for different fields but for the demo this is good enough
88 | renderField = ({input, label, type, meta}) => {
89 | return (
90 |
91 |
92 |
93 |
94 |
95 |
96 | {meta && meta.error && meta.error.promise}
97 |
98 |
99 | the retry email must be the same as the email
100 |
101 |
102 | this field is required
103 |
104 |
105 | please insert a valid email
106 |
107 |
108 | this field must have at least 5 characters
109 |
110 |
111 |
112 |