{"id":13475748,"url":"https://github.com/posabsolute/redux-form-validator","last_synced_at":"2026-03-16T09:03:44.417Z","repository":{"id":57350768,"uuid":"50552179","full_name":"posabsolute/redux-form-validator","owner":"posabsolute","description":"An es6 middleware to validate controlled and uncontrolled inputs with react \u0026 redux","archived":false,"fork":false,"pushed_at":"2016-02-29T17:28:36.000Z","size":117,"stargazers_count":38,"open_issues_count":4,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-29T15:44:57.200Z","etag":null,"topics":["form","form-validation","react","redux","redux-form","validation"],"latest_commit_sha":null,"homepage":"http://posabsolute.github.io/redux-form-validator/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posabsolute.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-28T03:31:31.000Z","updated_at":"2023-04-13T14:24:25.000Z","dependencies_parsed_at":"2022-09-15T02:02:37.162Z","dependency_job_id":null,"html_url":"https://github.com/posabsolute/redux-form-validator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fredux-form-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fredux-form-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fredux-form-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fredux-form-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posabsolute","download_url":"https://codeload.github.com/posabsolute/redux-form-validator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244893303,"owners_count":20527564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","form-validation","react","redux","redux-form","validation"],"created_at":"2024-07-31T16:01:23.190Z","updated_at":"2026-03-16T09:03:44.338Z","avatar_url":"https://github.com/posabsolute.png","language":"JavaScript","readme":"# Redux Form Validation\nAn es6 redux form validator middleware that helps you manage inputs. This middleware is not about keeping your global form state; it's about keeping your form validation state.\n\nIf you are looking for a fully controlled input approach, you should head to redux-form.\n\nAbout controlled inputs:  [My controlled input dilemma with react \u0026 redux](http://www.position-absolute.com/?p=5264) \n\nDemo: [Live Example](http://posabsolute.github.io/redux-form-validator-example/) | [Source](https://github.com/posabsolute/redux-form-validator-example)\n\nDocumentation: [http://posabsolute.github.io/redux-form-validator](http://posabsolute.github.io/redux-form-validator)\n\n\n## Integration\n\n\n1 npm install 'redux-form-validation' --save\n\n\n2 Add the reducer to your root reducer\n\n```javascript\n\nimport {validateReducer} from 'redux-form-validation';\n\nconst rootReducer = combineReducers({\n  validate: validateReducer,\n});\n\nexport default rootReducer;\n```\n\n3 Add the validate middleware\n```javascript\nimport {validateMiddleware} from 'redux-form-validation';\n\nconst createStoreWithMiddleware = compose(\n    validateMiddleware,\n  ),\n  window.devToolsExtension ? window.devToolsExtension() : f =\u003e f\n)(createStore);\n\n```\n\n4 Connect Validate store, actions \u0026 specify the component \u0026 model to validate. It is important this be available throughout every component that uses validation, you can trickle them down through props.\n\nIn your componentWillMount init the validation component:\n\n```javascript\nimport {validate, validateActions} from 'redux-form-validation';\n\nconst mapStateToProps = (state) =\u003e {\n  return {\n    validationStore: state.validation,\n  };\n};\n\nconst mapDispatchToProps = (\n  dispatch,\n) =\u003e {\n  return {\n    ...bindActionCreators(validateActions, dispatch),\n  };\n};\n\n\n@connect(mapStateToProps, mapDispatchToProps)\nexport default class LoginComponent extends React.Component {\n  componentWillMount() {\n    this.validate = validate(this, userModel);\n  }\n  render() {\n    return \u003cLoginForm {...this.props} validate={this.validate} /\u003e;\n  }\n}\n```\n\n5. Add validation to your inputs, there is also an error label component for your convenience.\n\n  a. add {...validate} to your input\n  b. add a name to your input (the middleware use the html5 form.elements)\n  c. To get the error class on your input, use className={validate.classes('input-line', 'url')}\n\nIt should look like:\n```javascript\n\u003cinput type=\"text\" className={validate.classes('input-line', 'url')} ref=\"url\" name=\"url\" placeholder=\"Your Url\" {...validate} /\u003e\n\u003cLabelError field={validate.fieldStore('url')} /\u003e\n```\n\n```javascript\nimport React from 'react';\nimport LabelError from 'components/validation/labelErrorComponent';\n\nclass LoginFormComponent extends React.Component {\n  render() {\n    const {validate, onSubmit} = this.props;\n    return (\n      \u003cform className=\"col-sm-6 col-lg-12 login-bottom-container\" onSubmit={ (evt) =\u003e { evt.preventDefault(); onSubmit.call(this, validate);} }\u003e\n        \u003cdiv className=\"form-group\"\u003e\n          \u003cinput type=\"text\" className={validate.classes('input-line', 'url')} ref=\"url\" name=\"url\" placeholder=\"Jira Url (http://company.jira.net)\" {...validate} /\u003e\n          \u003cLabelError field={validate.fieldStore('url')} /\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"form-group\"\u003e\n          \u003cinput type=\"text\" className={validate.classes('input-line', 'username')} ref=\"username\" name=\"username\"  placeholder=\"Username\" {...validate} /\u003e\n          \u003cLabelError field={validate.fieldStore('username')} /\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"form-group\"\u003e\n          \u003cinput type=\"password\"  ref=\"password\"  name=\"password\" className={validate.classes('input-line', 'password')} placeholder=\"Password\" {...validate} /\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"relative\"\u003e\u003cbutton type=\"submit\" className=\"btn btn-default btn-full\" \u003eSign in\u003c/button\u003e\u003c/div\u003e\n      \u003c/form\u003e\n    );\n  }\n}\n```\n\n6. Create a model\n\nAnatomy of a model\n\n```javascript\nconst userModel = {\n  name:'userModel',\n  data: {\n    'url': {\n      validate: {\n        required: true,\n        func: (value) =\u003e {\n          return true;\n        },\n        message: 'This is a test',\n      },\n    },\n  },\n}\n```\n\n7 Using webpack? include jsx/es6\n```javascript\n  module: {\n    loaders: [{\n      test:[/\\.jsx$/,  /\\.js$/],\n      loaders: ['react-hot', 'babel?stage=0\u0026loose[]=es6.modules'],\n      include: [\n        path.resolve(__dirname, \"src\"),\n        path.resolve(__dirname, \"node_modules/redux-form-validator\")\n      ],\n    }, {\n      test: [/\\.scss$/, /\\.css$/],\n      loader: 'css?localIdentName=[path]!postcss-loader!sass',\n    }],\n  },\n};\n```\n\n8 You're done.\n\n\n## Using actions\n\nYou can use validation actions to execute code depending if the form or input is valid. It's a good way to control side effects like calling an api action once the field if valid.\n\n### Validate Sync Form\n```javascript\nonSubmit: function(validateProps) {\n  const inputs = this.refs;\n  if (validateProps.form(form)) {\n    // form is valid, redirect to nre page\n  }else{\n    // form is not valid\n  }\n}\n```\n### Validate Async Form\nIf you validate asyncly 1 input or form, you must use a promise instead of just using a bool.\n```javascript\nonSubmit: function submit(validateProps) {\n  const inputs = this.refs;\n  validateProps.form(inputs).then(() =\u003e{\n    console.log('form is valid');\n  }).catch(() =\u003e { \n    console.log(\"form is not valid\"); \n  });\n}\n```\n\n### Validate Sync input\n\n```javascript\nif(this.validate.input(value, field)){\n  // input is valid\n}else{\n  // input is not valid\n}\n```\n\n\n### Validate Async input\n\n```javascript\nthis.validate.input(value, field).then(() =\u003e {\n  // input is valid\n})\n.catch(function(errorMessage) {\n  // input is not valid\n});\n```\n\n\n## Validation model\n\n### data\n\nA Model must have a data object that describe fields to validate. Under the validate object list all the validators you want to use.\n\n### Global Validate functions\n\nThe model can also have global validation functions that are executed once all inputs are valid.\n\n#### validate(form, dispatch)\n\nUsed to do sync validations after all your inputs are valid. Must return true or false\n\n```javascript\nconst userModel = {\n  name:'userModel',\n  data: {\n    'url': {\n      validate: {\n        required: true,\n        func: (value) =\u003e {\n          return true;\n        },\n        message: 'This is a test',\n      },\n    },\n  },\n  validate: (form, dispatch) =\u003e {\n    // form\n    let validate = false;\n    if (!form.url.value) {\n      dispatch({\n        type: 'GROWLER__SHOW',\n        growler: {\n          text: 'Please enter your url',\n          type: 'growler--error',\n        },\n      });\n      validate = false;\n    }\n\n    return true;\n  },\n};\n```\n\n## Built-in validators\n\n### func validator\n\nLets you implement a custom function used for validation.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'username': {\n      validate: {\n        required: true,\n        pattern: 'email',\n        async: function() {\n          setTimeout( () =\u003e {\n              this.resolve(\"yes\");\n          }, 5000);\n        },\n      },\n    },\n```\n\n\n\n\n### async validator\n\nLets you implement a custom async function used for validation using a Promise. Must return this.resolve or this.reject. You can reject with a custom message passed as a string.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'username': {\n      validate: {\n        required: true,\n        pattern: 'email',\n        async: function() {\n          setTimeout( () =\u003e {\n              this.reject(\"Sorry, this username is already used.\");\n          }, 5000);\n        },\n      },\n    },\n```\n\n### required\n\nValidates if the attribute is required or not.\nThis can be specified as either a boolean value or a function that returns a boolean value.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'username': {\n      validate: {\n        required: true,\n        pattern: 'email',\n      },\n    },\n  },\n};\n```\n\n### acceptance\n\nValidates that something has to be accepted, e.g. terms of use. `true` or 'true' are valid.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'username': {\n      validate: {\n        required: true,\n      acceptance: true\n    }\n  }\n};\n```\n\n### min\n\nValidates that the value has to be a number and equal to or more than the min value specified.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'age': {\n      validate: {\n        min: 1,\n      }\n    }\n  }\n});\n```\n\n### max\n\nValidates that the value has to be a number and equal to or less than the max value specified.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'age': {\n      validate: {\n        max: 100,\n      }\n    }\n  }\n};\n```\n\n### range\n\nValidates that the value has to be a number and equal to or between the two numbers specified.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'age': {\n      validate: {\n        range: [1, 10],\n      }\n    }\n  }\n};\n```\n\n### length\n\nValidates that the value has to be a string with length equal to the length value specified.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'postalCode': {\n      validate: {\n        length: 4,\n      }\n    }\n  }\n};\n```\n\n### minLength\n\nValidates that the value has to be a string with length equal to or greater than the min length value specified.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'password': {\n      validate: {\n         minLength: 8\n      }\n    }\n  }\n};\n```\n\n\n### maxLength\n\nValidates that the value has to be a string with length equal to or less than the max length value specified.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'password': {\n      validate: {\n        maxLength: 100\n      }\n    }\n  }\n};\n```\n\n### rangeLength\n\nValidates that the value has to be a string and equal to or between the two numbers specified.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'password': {\n      validate: {\n        rangeLength: [6, 100]\n      }\n    }\n  }\n};\n```\n\n### oneOf\n\nValidates that the value has to be equal to one of the elements in the specified array. Case sensitive matching.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'country': {\n      validate: {\n        oneOf: ['Norway', 'Sweeden']\n      }\n    }\n  }\n};\n```\n\n### equalTo\n\nValidates that the value has to be equal to the value of the attribute with the name specified.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'password': {\n      validate: {\n        equalTo: 'password'\n      }\n    }\n  }\n};\n```\n\n\n### pattern\n\nValidates that the value has to match the pattern specified. Can be a regular expression or the name of one of the built in patterns.\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'email': {\n      validate: {\n        pattern: 'email'\n      }\n    }\n  }\n};\n```\n\nThe built-in patterns are:\n\n* number - Matches any number (e.g. -100.000,00)\n* email - Matches a valid email address (e.g. mail@example.com)\n* url - Matches any valid url (e.g. http://www.example.com)\n* digits - Matches any digit(s) (i.e. 0-9)\n\nSpecify any regular expression you like:\n\n```js\nconst userModel = {\n  name:'userModel',\n  data: {\n    'email': {\n      validate: {\n        pattern: /^sample/\n      }\n    }\n  }\n};\n```\n\n## Contributions\n\nThere is plenty to do in the issue tracker, look at the 1.1 milestone\n\n\n## Limitations\n\nThis component is based on the use of redux, react, es6 \u0026 es7 (decorators) and webpack for loading the css as an import module.\n","funding_links":[],"categories":["JavaScript","Marks"],"sub_categories":["[React - A JavaScript library for building user interfaces](http://facebook.github.io/react)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposabsolute%2Fredux-form-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposabsolute%2Fredux-form-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposabsolute%2Fredux-form-validator/lists"}