{"_id":"@achingbrain/react-validation","_rev":"6-df556ed0e13b7c2eb4f2595449b9ea43","name":"@achingbrain/react-validation","description":"validation components","dist-tags":{"latest":"2.11.1"},"versions":{"2.11.0":{"name":"@achingbrain/react-validation","version":"2.11.0","description":"validation components","keywords":["react","validation","react component","react validation"],"scripts":{"test":"node --harmony_proxies node_modules/.bin/jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js","test:dev":"jest","dev":"node dev-server","build":"webpack --config ./webpack/webpack.config.build && webpack --config ./webpack/webpack.config.minify","gh-pages":"webpack --config ./webpack/webpack.config.gh-pages"},"main":"lib/build/validation.rc.js","repository":{"type":"git","url":"git+https://github.com/Lesha-spr/react-validation.git"},"author":{"name":"Oleksii An"},"license":"ISC","bugs":{"url":"https://github.com/Lesha-spr/react-validation/issues"},"homepage":"https://github.com/Lesha-spr/react-validation","peerDependencies":{"react":"*","classnames":"*"},"devDependencies":{"babel-core":"^6.17.0","babel-eslint":"^7.0.0","babel-jest":"^16.0.0","babel-loader":"^6.2.5","babel-plugin-transform-decorators":"^6.13.0","babel-plugin-transform-es2015-computed-properties":"^6.8.0","babel-plugin-transform-object-assign":"^6.8.0","babel-plugin-transform-runtime":"^6.15.0","babel-preset-es2015":"^6.16.0","babel-preset-react":"^6.16.0","babel-preset-stage-0":"^6.16.0","browser-sync":"^2.17.1","connect-history-api-fallback":"^1.3.0","coveralls":"^2.11.14","enzyme":"^2.5.0","eslint":"^3.7.1","eslint-config-airbnb":"^12.0.0","eslint-loader":"^1.5.0","eslint-plugin-import":"^1.16.0","eslint-plugin-jsx-a11y":"^2.2.3","eslint-plugin-react":"^6.3.0","extract-text-webpack-plugin":"^1.0.1","jest-cli":"^16.0.1","react":"^15.3.2","react-addons-test-utils":"^15.3.2","react-dom":"^15.3.2","react-hot-loader":"^1.3.0","validator":"^6.1.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.4","webpack-hot-middleware":"^2.12.2"},"jest":{"collectCoverage":true,"coverageThreshold":{"global":{"branches":90,"functions":90,"lines":90,"statements":90}},"testPathDirs":["<rootDir>/lib/src/"],"moduleNameMapper":{"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","^.+\\.(css|scss|less)$":"<rootDir>/__mocks__/styleMock.js"}},"dependencies":{"hoist-non-react-statics":"^1.2.0"},"gitHead":"4b0554197c5e2ee6d893472e1349900febeb09e2","_id":"@achingbrain/react-validation@2.11.0","_shasum":"fed75e101e5ffb954f9ef126527b12f071f9ae0f","_from":".","_npmVersion":"4.4.4","_nodeVersion":"4.8.1","_npmUser":{"name":"achingbrain","email":"alex@achingbrain.net"},"dist":{"shasum":"fed75e101e5ffb954f9ef126527b12f071f9ae0f","tarball":"https://registry.npmjs.org/@achingbrain/react-validation/-/react-validation-2.11.0.tgz","integrity":"sha512-Suue8ui+ZqDPNdCc6WcntbeiPzMFR8M2JsEBdDcckgGtzMsnV7+TMwliP6XMpQVIlylbmfcDFJw8bm5B8YIj4A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5xDVe+p/oP7a/dJQHA9nFL9KiKFABDEtUGEtqzfuzUAiEA/o3cOcsf0GPKBhHh+qllvPLBJYyNH0PfvZ+iikbI1oc="}]},"maintainers":[{"name":"achingbrain","email":"alex@achingbrain.net"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-validation-2.11.0.tgz_1491303258338_0.00846717762760818"}},"2.10.10":{"name":"@achingbrain/react-validation","version":"2.10.10","description":"validation components","keywords":["react","validation","react component","react validation"],"scripts":{"test":"node --harmony_proxies node_modules/.bin/jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js","test:dev":"jest","dev":"node dev-server","build":"webpack --config ./webpack/webpack.config.build && webpack --config ./webpack/webpack.config.minify","gh-pages":"webpack --config ./webpack/webpack.config.gh-pages"},"main":"lib/build/validation.rc.js","repository":{"type":"git","url":"git+https://github.com/Lesha-spr/react-validation.git"},"author":{"name":"Oleksii An"},"license":"ISC","bugs":{"url":"https://github.com/Lesha-spr/react-validation/issues"},"homepage":"https://github.com/Lesha-spr/react-validation","peerDependencies":{"react":"*","classnames":"*"},"devDependencies":{"babel-core":"^6.17.0","babel-eslint":"^7.0.0","babel-jest":"^16.0.0","babel-loader":"^6.2.5","babel-plugin-transform-decorators":"^6.13.0","babel-plugin-transform-es2015-computed-properties":"^6.8.0","babel-plugin-transform-object-assign":"^6.8.0","babel-plugin-transform-runtime":"^6.15.0","babel-preset-es2015":"^6.16.0","babel-preset-react":"^6.16.0","babel-preset-stage-0":"^6.16.0","browser-sync":"^2.17.1","connect-history-api-fallback":"^1.3.0","coveralls":"^2.11.14","enzyme":"^2.5.0","eslint":"^3.7.1","eslint-config-airbnb":"^12.0.0","eslint-loader":"^1.5.0","eslint-plugin-import":"^1.16.0","eslint-plugin-jsx-a11y":"^2.2.3","eslint-plugin-react":"^6.3.0","extract-text-webpack-plugin":"^1.0.1","jest-cli":"^16.0.1","react":"^15.3.2","react-addons-test-utils":"^15.3.2","react-dom":"^15.3.2","react-hot-loader":"^1.3.0","validator":"^6.1.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.4","webpack-hot-middleware":"^2.12.2"},"jest":{"collectCoverage":true,"coverageThreshold":{"global":{"branches":90,"functions":90,"lines":90,"statements":90}},"testPathDirs":["<rootDir>/lib/src/"],"moduleNameMapper":{"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","^.+\\.(css|scss|less)$":"<rootDir>/__mocks__/styleMock.js"}},"dependencies":{"hoist-non-react-statics":"^1.2.0"},"gitHead":"5352cc904e7209c9b9ad6e19d22e0b8c4a324660","_id":"@achingbrain/react-validation@2.10.10","_shasum":"8ed9f125305baf0e078ea982e3194913c3214869","_from":".","_npmVersion":"4.4.4","_nodeVersion":"4.8.1","_npmUser":{"name":"achingbrain","email":"alex@achingbrain.net"},"dist":{"shasum":"8ed9f125305baf0e078ea982e3194913c3214869","tarball":"https://registry.npmjs.org/@achingbrain/react-validation/-/react-validation-2.10.10.tgz","integrity":"sha512-OgO1CZnAhqM00/j+zceo2J8Tn/KN2PRnTxFKG5Iy+fiXCTyrfUh1Iijh55vkesXmBjPnt08+SC+3/+tXN/rwGA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBT5myXbzozYwUGkmBAa4fEam5EXwZ4CD/OaM6rOE0L8AiBz/xn838P9CF3LSV8gHfOYpSEOF+7rH3awpipCzvntxA=="}]},"maintainers":[{"name":"achingbrain","email":"alex@achingbrain.net"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-validation-2.10.10.tgz_1494931811996_0.7055202445480973"}},"2.10.11":{"name":"@achingbrain/react-validation","version":"2.10.11","description":"validation components","keywords":["react","validation","react component","react validation"],"scripts":{"test":"node --harmony_proxies node_modules/.bin/jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js","test:dev":"jest","dev":"node dev-server","build":"webpack --config ./webpack/webpack.config.build && webpack --config ./webpack/webpack.config.minify","gh-pages":"webpack --config ./webpack/webpack.config.gh-pages"},"main":"lib/build/validation.rc.js","repository":{"type":"git","url":"git+https://github.com/Lesha-spr/react-validation.git"},"author":{"name":"Oleksii An"},"license":"ISC","bugs":{"url":"https://github.com/Lesha-spr/react-validation/issues"},"homepage":"https://github.com/Lesha-spr/react-validation","peerDependencies":{"react":"*","classnames":"*"},"devDependencies":{"babel-core":"^6.17.0","babel-eslint":"^7.0.0","babel-jest":"^16.0.0","babel-loader":"^6.2.5","babel-plugin-transform-decorators":"^6.13.0","babel-plugin-transform-es2015-computed-properties":"^6.8.0","babel-plugin-transform-object-assign":"^6.8.0","babel-plugin-transform-runtime":"^6.15.0","babel-preset-es2015":"^6.16.0","babel-preset-react":"^6.16.0","babel-preset-stage-0":"^6.16.0","browser-sync":"^2.17.1","connect-history-api-fallback":"^1.3.0","coveralls":"^2.11.14","enzyme":"^2.5.0","eslint":"^3.7.1","eslint-config-airbnb":"^12.0.0","eslint-loader":"^1.5.0","eslint-plugin-import":"^1.16.0","eslint-plugin-jsx-a11y":"^2.2.3","eslint-plugin-react":"^6.3.0","extract-text-webpack-plugin":"^1.0.1","jest-cli":"^16.0.1","prop-types":"^15.5.10","react":"^15.3.2","react-addons-test-utils":"^15.3.2","react-dom":"^15.3.2","react-hot-loader":"^1.3.0","validator":"^6.1.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.4","webpack-hot-middleware":"^2.12.2"},"jest":{"collectCoverage":true,"coverageThreshold":{"global":{"branches":90,"functions":90,"lines":90,"statements":90}},"testPathDirs":["<rootDir>/lib/src/"],"moduleNameMapper":{"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","^.+\\.(css|scss|less)$":"<rootDir>/__mocks__/styleMock.js"}},"dependencies":{"hoist-non-react-statics":"^1.2.0"},"gitHead":"083027e983c00bb3796432d221837ce5d9bf6843","_id":"@achingbrain/react-validation@2.10.11","_shasum":"53b387e2624676df8bfd819be3e47d906e8eb28b","_from":".","_npmVersion":"4.4.4","_nodeVersion":"4.8.1","_npmUser":{"name":"achingbrain","email":"alex@achingbrain.net"},"dist":{"shasum":"53b387e2624676df8bfd819be3e47d906e8eb28b","tarball":"https://registry.npmjs.org/@achingbrain/react-validation/-/react-validation-2.10.11.tgz","integrity":"sha512-voFyQK+xzxt0dFB79flKyHKYftzMRS4PQIaQd5Nk/n2Xvjb94+jKJK6CyEOrfqIHveog1yOQC5nKwVDynWK4vA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVwN2eGLH/e+sUnleRTJdoOsjRiD/VKsq59jH6LGqhXAiBjaqstJaObSZaegA3nBnGi7CYe2m6zly7GY2HqUY/MGg=="}]},"maintainers":[{"name":"achingbrain","email":"alex@achingbrain.net"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-validation-2.10.11.tgz_1494932024394_0.2981547461822629"}},"2.11.1":{"name":"@achingbrain/react-validation","version":"2.11.1","description":"validation components","keywords":["react","validation","react component","react validation"],"scripts":{"test":"node --harmony_proxies node_modules/.bin/jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js","test:dev":"jest","dev":"node dev-server","build":"webpack --config ./webpack/webpack.config.build && webpack --config ./webpack/webpack.config.minify","gh-pages":"webpack --config ./webpack/webpack.config.gh-pages"},"main":"lib/build/validation.rc.js","repository":{"type":"git","url":"git+https://github.com/Lesha-spr/react-validation.git"},"author":{"name":"Oleksii An"},"license":"ISC","bugs":{"url":"https://github.com/Lesha-spr/react-validation/issues"},"homepage":"https://github.com/Lesha-spr/react-validation","peerDependencies":{"react":"*","classnames":"*"},"devDependencies":{"babel-core":"^6.17.0","babel-eslint":"^7.0.0","babel-jest":"^16.0.0","babel-loader":"^6.2.5","babel-plugin-transform-decorators":"^6.13.0","babel-plugin-transform-es2015-computed-properties":"^6.8.0","babel-plugin-transform-object-assign":"^6.8.0","babel-plugin-transform-runtime":"^6.15.0","babel-preset-es2015":"^6.16.0","babel-preset-react":"^6.16.0","babel-preset-stage-0":"^6.16.0","browser-sync":"^2.17.1","connect-history-api-fallback":"^1.3.0","coveralls":"^2.11.14","enzyme":"^2.5.0","eslint":"^3.7.1","eslint-config-airbnb":"^12.0.0","eslint-loader":"^1.5.0","eslint-plugin-import":"^1.16.0","eslint-plugin-jsx-a11y":"^2.2.3","eslint-plugin-react":"^6.3.0","extract-text-webpack-plugin":"^1.0.1","jest-cli":"^16.0.1","prop-types":"^15.5.10","react":"^15.3.2","react-addons-test-utils":"^15.3.2","react-dom":"^15.3.2","react-hot-loader":"^1.3.0","validator":"^6.1.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.4","webpack-hot-middleware":"^2.12.2"},"jest":{"collectCoverage":true,"coverageThreshold":{"global":{"branches":90,"functions":90,"lines":90,"statements":90}},"testPathDirs":["<rootDir>/lib/src/"],"moduleNameMapper":{"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/__mocks__/fileMock.js","^.+\\.(css|scss|less)$":"<rootDir>/__mocks__/styleMock.js"}},"dependencies":{"hoist-non-react-statics":"^1.2.0"},"gitHead":"2a21982056d49a7220031c854ab7d889df6ef56b","_id":"@achingbrain/react-validation@2.11.1","_shasum":"6934aea457175a139b87b15fe7731220fc4c2135","_from":".","_npmVersion":"4.3.0","_nodeVersion":"4.8.0","_npmUser":{"name":"achingbrain","email":"alex@achingbrain.net"},"dist":{"shasum":"6934aea457175a139b87b15fe7731220fc4c2135","tarball":"https://registry.npmjs.org/@achingbrain/react-validation/-/react-validation-2.11.1.tgz","integrity":"sha512-0N02fDlNqWfuDQFBukKRxnpbmAJ0qdH4Md94cAQXRXmoIuQBoC3/+UtDb8U5bWp8E+BH3/5V8RDNxVsCi4ibgg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdDt/U+y6Y7ZwA00nPPcqpZK8gAuP8hG+iAa3zs6ypEwIhAP6Ms1qN8eE3q9nYHznKam9iClleevsaQLFHZV/tlQsF"}]},"maintainers":[{"name":"achingbrain","email":"alex@achingbrain.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-validation-2.11.1.tgz_1498917168170_0.3750173037406057"}}},"readme":"# react-validation\n\n[![npm version](https://badge.fury.io/js/react-validation.svg)](https://badge.fury.io/js/react-validation) [![Build Status](https://travis-ci.org/Lesha-spr/react-validation.svg?branch=master)](https://travis-ci.org/Lesha-spr/react-validation) [![Coverage Status](https://coveralls.io/repos/github/Lesha-spr/react-validation/badge.svg?branch=master)](https://coveralls.io/github/Lesha-spr/react-validation?branch=master) [![dependencies](https://david-dm.org/Lesha-spr/react-validation.svg)](https://david-dm.org/Lesha-spr/react-validation) [![devDependencies](https://david-dm.org/Lesha-spr/react-validation/dev-status.svg)](https://david-dm.org/Lesha-spr/react-validation/?type=dev)\n\nComponent to provide simple form validation for React components. It uses the [Controlled Components](https://facebook.github.io/react/docs/forms.html#controlled-components) approach for validation.\n\nIt is not easy to validate forms with React. The reason is a one-way data flow style. In this case we can't affect forms from the inputs in an easy way.\nReact-validation provides several components which are 'connected' to the form via the input's method attached by the Form component.\n\n### [DEMO](http://lesha-spr.github.io/react-validation/)\n### [DEMO src](https://github.com/Lesha-spr/react-validation/tree/master/lib/src/gh-pages)\n\nIt is just a validation and doesn't provide any model or something similar. You can use FormData or something like [form-serialize](https://www.npmjs.com/package/form-serialize) to get form data.\n\n##### NOTE: Always pass the ```name``` and ```validations``` props. They are required.\n\nAdditional markup is allowed inside the Validation.Form markup.\n\nAny additional props (such as event handlers) can also be passed to components.\n\nIf you find any bug or error, please feel free to raise an issue. Pull requests are also welcome.\n\n## Installation\n\n``\nnpm install react-validation\n``\n\n## Test\n\n``\nnpm run test:dev\n``\n\n## Example usage\n\nWith @2.*, react-validation is no longer dependent on the external ```validator```. You may use whatever validation strategy you want by extending the ```rules``` object.\nLet's take a look at its initial state:\n\n```javascript\nexport default = {};\n```\n\nThat's it, just an empty object literal. We don't have any validation rules OOTB because of an extremely high number of possibilities, but it's still recommended to use a well-tested library for known reasons.\n\nSo first of all let's extend it and add some rules:\n\n```javascript\nimport React from 'react';\n// NOTE: Deprecated\nimport Validation from 'react-validation';\n// From v2.10.0\n// import { rules, Form, Input, Select, Textarea, Button } from 'react-validation/lib/build/validation.rc'\nimport validator from 'validator';\n\n// Use Object.assign or any similar API to merge a rules\n// NOTE: IE10 doesn't have Object.assign API natively. Use polyfill/babel plugin.\nObject.assign(Validation.rules, {\n    // Key name maps the rule\n    required: {\n        // Function to validate value\n        // NOTE: value might be a number -> force to string\n        rule: value => {\n            return value.toString().trim();\n        },\n        // Function to return hint\n        // You may use current value to inject it in some way to the hint\n        hint: value => {\n            return <span className='form-error is-visible'>Required</span>\n        }\n    },\n    email: {\n        // Example usage with external 'validator'\n        rule: value => {\n            return validator.isEmail(value);\n        },\n        hint: value => {\n            return <span className='form-error is-visible'>{value} isnt an Email.</span>\n        }\n    },\n    // This example shows a way to handle common task - compare two fields for equality\n    password: {\n        // rule function can accept argument:\n        // components - components registered to Form mapped by name\n        rule: (value, components) => {\n            const password = components.password.state;\n            const passwordConfirm = components.passwordConfirm.state;\n            const isBothUsed = password\n                && passwordConfirm\n                && password.isUsed\n                && passwordConfirm.isUsed;\n            const isBothChanged = isBothUsed && password.isChanged && passwordConfirm.isChanged;\n\n            if (!isBothUsed || !isBothChanged) {\n                return true;\n            }\n\n            return password.value === passwordConfirm.value;\n        },\n        hint: () => <span className=\"form-error is-visible\">Passwords should be equal.</span>\n    },\n    // Define API rule to show hint after API error response\n    api: {\n        // We don't need the rule here because we will call the 'showError' method by hand on API error\n        hint: value => (\n            <button\n                className=\"form-error is-visible\"\n            >\n                API Error on \"{value}\" value. Focus to hide.\n            </button>\n        )\n    }\n});\n```\n\nNow we've added ```required``` and ```email``` to our rules with provided hints. This might be separated in a file where all the rules are registered.\n\nThat's it. We can now use it in our React components:\n\n```javascript\nimport Validation from 'react-validation';\nimport React, {Component, PropTypes} from 'react';\n\nexport default class Registration extends Component {\n    render() {\n        return <Validation.components.Form>\n            <h3>Registration</h3>\n            <div>\n                <label>\n                    Email*\n                    <Validation.components.Input value='email@email.com' name='email' validations={['required', 'email']}/>\n                </label>\n            </div>\n            <div>\n                <label>\n                    Password*\n                    <Validation.components.Input type='password' value='' name='password' validations={['required']}/>\n                </label>\n            </div>\n            <div>\n                <Validation.components.Button>Submit</Validation.components.Button>\n            </div>\n        </Validation.components.Form>;\n    }\n}\n```\n\nNote the ```validations``` prop. It's an array of strings that maps to the rules keys we've extended.\n\n## Components and props\n\n```react-validation``` provides a ```components``` object that contains ```Form```, ```Input```, ```Select```, ```Textarea``` and ```Button``` components.\nAll of them are just custom wrappers around the native components. They can accept any valid attributes and a few extra:\n\n1. ```containerClassName``` - ```Input```, ```Select``` and ```Textarea```: `react-validation` wraps the native components with an extra block. This prop adds a ```className``` to the wrapper.\n2. ```errorContainerClassName```: wrapper's error modifier className.\n3. ```validations``` - ```Input```, ```Select``` and ```Textarea```: accepts an array of validations strings that refers to the rules object's keys.\n4. ```errorClassName``` - ```Input```, ```Select```, ```Button``` and ```Textarea```: adds the passed value to ```className``` on error occurrences.\n\n##### NOTE: Always provide a ```name``` prop to ```Input```, ```Select``` and ```Textarea```. Always pass the ```validations``` prop to ```Input```, ```Select``` and ```Textarea```.\n\n### Form component\n\n```\nValidation.components.Form\n```\n\nThe most important component, which provides the heart of react-validation. It basically mixes the binding between the form itself and child react-validation components via ```context```.\nAny valid props can easily be passed to ```Form```, such ```onSubmit``` and ```method```.\n\n```Form``` provides four public methods:\n\n1. ```validate(name)``` - validates input with the passed name. The difference between this method and default validation is that ```validate``` marks the input as ```isUsed``` and ```isChanged```. ```name``` - name of the corresponding component.\n\n2. ```showError(name [,hint])``` - helps to handle async API errors. ```hint``` - optional hint to show. Can be string (error key, ex 'required') or function which returns hint (jsx).\n\n3. ```hideError(name)``` - hides a corresponding component's error.\n\n4. ```validateAll()``` - validates all react-validation components. Returns a map (key: field name prop, value: `<Array>` non passed validation rules) of invalid fields.\n\n\n```javascript\nexport default class Comment extends Component {\n    handleSubmit = (event) => {\n        event.preventDefault();\n\n        // Emulate async API call\n        setTimeout(() => {\n            // NOTE: 'api' should be defined on 'extend' step\n            this.form.showError('username', 'api');\n        }, 1000);\n    };\n\n    removeApiError = () => {\n        this.form.hideError('username');\n    };\n\n    render() {\n        return <Validation.components.Form ref={c => { this.form = c }} onSubmit={this.handleSubmit.bind(this)}>\n            <div className=\"row\">\n                <div className=\"small-12 columns\">\n                    <h3>Leave a comment</h3>\n                </div>\n            </div>\n            <div className=\"row\">\n                <div className=\"small-12 medium-4 columns\">\n                    <label>\n                        <Validation.components.Input\n                          onFocus={this.removeApiError}\n                          placeholder=\"username\"\n                          type=\"text\"\n                          errorClassName=\"is-invalid-input\"\n                          containerClassName=\"\"\n                          value=\"Username\"\n                          name=\"username\"\n                          validations={['required', 'alpha']}\n                        />\n                    </label>\n                </div>\n                <div className=\"small-12 medium-8 columns\">\n                    <label>\n                        <Validation.components.Textarea\n                          placeholder=\"Leave your comment...\"\n                          errorClassName=\"is-invalid-input\"\n                          containerClassName=\"\"\n                          value=\"Comment\"\n                          name=\"comment\"\n                          validations={['required']}\n                        />\n                    </label>\n                </div>\n            </div>\n            <div className=\"row\">\n                <div className=\"small-12 medium-6 columns\">\n                    <Validation.components.Button className=\"button\">Submit</Validation.components.Button>\n                </div>\n            </div>\n        </Validation.components.Form>\n    }\n}\n```\n\n### Input component\n\n```\nValidation.components.Input\n```\n\nA wrapper around the native ```input```. It accepts a ```validations``` prop - an array of strings that refers to rules object keys.\n\n```javascript\n<Validation.components.Input name='firstname' validations={['alpha', 'lt8']}/>\n```\n\n##### NOTE: For types ```radio``` and ```checkbox```, react-validation will drop the ```value``` to an empty string when it's not checked. This is to avoid validation of non-checked inputs.\n\n`react-validation` will break with the first listed rule, if more than one rule is broken. In the example above (lt8 - value length less than 8), for ```really long value with d1g1t``` input value, the ```alpha``` rule will break validation first. We can control it by ordering rules within the ```validations``` array.\n\n### Textarea component\n\n```\nValidation.components.Textarea\n```\n\nA wrapper around the native ```textarea```. Like ```Input```, it accepts a ```validations``` prop. Nothing special here:\n\n```javascript\n<Validation.components.Textarea name='comment' value='' validations={['required']}/>\n```\n\n### Select component\n\n```\nValidation.components.Select\n```\n\nA wrapper around the native ```select```. Like ```Input```, it accepts a ```validations``` prop. Nothing special here:\n\n```javascript\n<Validation.components.Select name='city' value='' validations={['required']}>\n    <option value=''>Choose your city</option>\n    <option value='1'>London</option>\n    <option value='2'>Kyiv</option>\n    <option value='3'>New York</option>\n</Validation.components.Select>\n```\n\n### Button component\n\n```\nValidation.components.Button\n```\n\nA wrapper around the native ```button```. React-validation disables (adds ```disabled``` prop) the button on error occurrences. This behavior could be suppressed by passing the ```disabled``` prop directly to a component.\n\n## Custom components\n\nIf the components provided by react-validation don't quite fit your needs for markup structure (for instance, you\nmight want the ```hint``` to show before an ```<input>```), you can create your own versions\nof ```input```, ```select```, and ```textarea```. (```button``` and ```form``` are simple single-element\ncomponents, and shouldn't need further customisation).\n\nHere is an example that would render an ```<input>``` according to the [Bootstrap](http://getbootstrap.com)\nCSS framework:\n\n```javascript\nimport React, { Component } from 'react';\nimport { inputFactory } from 'react-validation/lib/build/validation.rc';\n\n// Not using ES6 classes? Then you'd write instead:\n// const MyBootstrapInput = React.createClass(...)\n//\n// If you are using ES7 decorators, you can use:\n// @inputFactory\nclass MyBootstrapInput extends Component {\n    render() {\n        return (\n            <div className={`form-group ${this.props.hint && 'has-error'} ${this.props.containerClassName}`}>\n                <label className=\"control-label\" htmlFor={this.props.id}>\n                    {this.props.label}{/* You can use your own props */}\n                </label>\n                {/* \"onChange\", \"onBlur\", and \"value/checked\" are important, don't forget them: */}\n                <input\n                    className={`form-control ${this.props.className}`}\n                    id={this.props.id}\n                    type={this.props.type}\n\n                    onChange={this.props.onChange}\n                    onBlur={this.props.onBlur}\n                    value={this.props.value}\n                    checked={this.props.checked}\n                />\n                { this.props.hint && <div className=\"help-block\">{this.props.hint}</div> }\n            </div>\n        );\n    }\n}\n\n// Wrap the component in the factory (if not using ES7 decorators)\nexport default inputFactory(MyBootstrapInput);\n```\n\nYou can then use your custom component like the other react-validation components:\n\n```javascript\nimport BootstrapInput from 'path/to/my/component/file';\n\n<BootstrapInput label=\"Email\" value='email@email.com' name='email' validations={['required', 'email']}/>\n```\n\n## Migration from 1.*\n\n#### extendErrors API\n```extendErrors``` no longer exists. Replace it with the new approach of validation rules registration. ```hint``` appearance is now fully controlled:\n\n```javascript\nObject.assign(Validation.rules, {\n    required: {\n        rule: value => {\n            return value.trim();\n        },\n        hint: value => {\n            return <span className='form-error is-visible'>Required</span>\n        }\n    }\n});\n```\n\n#### Defaults\nReact-validation no longer has any defaults. This is TBD but for a 2.0.0 please provide ```errorClassName``` and ```containerClassName``` directly to the validation components.\n\n#### Validations\n```validations``` prop now accepts an array of strings instead of objects. It's made to be more simple and reduce ```render``` code.\n\nComponents API moved to Form API. ```forceValidate``` method no longer exist.\n","maintainers":[{"name":"achingbrain","email":"alex@achingbrain.net"}],"time":{"modified":"2022-06-12T14:16:02.922Z","created":"2017-04-04T10:54:20.734Z","2.11.0":"2017-04-04T10:54:20.734Z","2.10.10":"2017-05-16T10:50:14.353Z","2.10.11":"2017-05-16T10:53:47.018Z","2.11.1":"2017-07-01T13:52:49.796Z"},"homepage":"https://github.com/Lesha-spr/react-validation","keywords":["react","validation","react component","react validation"],"repository":{"type":"git","url":"git+https://github.com/Lesha-spr/react-validation.git"},"author":{"name":"Oleksii An"},"bugs":{"url":"https://github.com/Lesha-spr/react-validation/issues"},"license":"ISC","readmeFilename":"README.md"}