package.json

{
  "name": "redux-form-validator",
  "version": "2.0.5",
  "description": "Form validation for redux",
  "main": "index.js",
  "format" : "es6",
  "jspm": {
    "format" : "es6"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "redux",
    "react-component",
    "form",
    "react-component",
    "validation",
    "react"
  ],
  "author": {
    "name": "Cedric Dugas"
  },
  "bugs": {
    "url": "https://github.com/posabsolute/redux-form-validator/issues"
  },
  "homepage": "https://github.com/posabsolute/redux-form-validator#readme",
  "license": "MIT",
  "dependencies": {
    "classnames": "^2.2.1",
    "react": "^0.14.3",
    "react-redux": "^4.0.5",
    "redux": "^3.0.5"
  },
  "readme": "# Redux Form Validation\nAn es6 redux form validator middleware that help you validate inputs.\n\nDemo: [Live Example](http://posabsolute.github.io/redux-flash-notification-example/) | [Source](https://github.com/posabsolute/redux-flash-notification-example)\n\nBetter Documentation: [http://posabsolute.github.io/redux-flash-notification](http://posabsolute.github.io/redux-flash-notification)\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 => f\n)(createStore);\n\n```\n\n4 Connect Validate store, actions & specicify the component & model to validate. It is important this be available throughout every components that use validation, you can trickle them down throught props.\n\nIn your componentWillMount init the validation component:\n\n```javascript\nimport {validate, validateActions} from 'redux-form-validation';\n\nconst mapStateToProps = (state) => {\n  return {\n    validationStore: state.validation,\n  };\n};\n\nconst mapDispatchToProps = (\n  dispatch,\n) => {\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 <LoginForm {...this.props} validate={this.validate} />;\n  }\n}\n\n5. Add validation to your inputs, there is also a error label component for your convenience. Unfortunately you cannot use stateless component because the middleware makes use of refs.\n\n  a. add {...validate} to your input\n  b. add a name & ref to your input (must be the same)\n  c. To get the error class, use className={validate.classes('input-line', 'url')}\n\nIt should look like:\n```javascript\n<input type=\"text\" className={validate.classes('input-line', 'url')} ref=\"url\" name=\"url\" placeholder=\"Your Url\" {...validate} />\n<LabelError field={validate.fieldStore('url')} />\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      <form className=\"col-sm-6 col-lg-12 login-bottom-container\" onSubmit={ (evt) => { evt.preventDefault(); onSubmit.call(this, validate);} }>\n        <div className=\"form-group\">\n          <input type=\"text\" className={validate.classes('input-line', 'url')} ref=\"url\" name=\"url\" placeholder=\"Jira Url (http://company.jira.net)\" {...validate} />\n          <LabelError field={validate.fieldStore('url')} />\n        </div>\n        <div className=\"form-group\">\n          <input type=\"text\" className={validate.classes('input-line', 'username')} ref=\"username\" name=\"username\"  placeholder=\"Username\" {...validate} />\n          <LabelError field={validate.fieldStore('username')} />\n        </div>\n        <div className=\"form-group\">\n          <input type=\"password\"  ref=\"password\"  name=\"password\" className={validate.classes('input-line', 'password')} placeholder=\"Password\" {...validate} />\n        </div>\n        <div className=\"relative\"><button type=\"submit\" className=\"btn btn-default btn-full\" >Sign in</button></div>\n      </form>\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) => {\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&loose[]=es6.modules'],\n      include: [\n        path.resolve(__dirname, \"src\"),\n        path.resolve(__dirname, \"node_modules/flash-notification-react-redux\")\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(() =>{\n    console.log('form is valid');\n  }).catch(() => { \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(() => {\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) => {\n          return true;\n        },\n        message: 'This is a test',\n      },\n    },\n  },\n  validate: (form, dispatch) => {\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( () => {\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( () => {\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\n## Limitations\n\nThis component is based on the use of redux, react, es6 & es7 (decorators) and webpack for loading the css as an import module.\n",
  "readmeFilename": "README.md",
  "_id": "redux-form-validator@1.0.0",
  "_shasum": "c7429bb73445d9376932aea92be3d3399ebd2ff7",
  "_from": "redux-form-validator@>=1.0.0 <2.0.0"
}