{"_id":"react-validation","_rev":"139-9fc25f0c60f5e9b209a7551b9ff86b66","name":"react-validation","time":{"modified":"2022-06-26T08:49:45.129Z","created":"2015-01-08T22:34:42.335Z","1.0.0":"2015-01-08T22:34:42.335Z","0.0.1":"2015-05-01T13:43:59.025Z","1.0.1":"2015-07-23T12:31:53.004Z","1.0.2":"2015-07-23T12:42:15.361Z","1.0.3":"2015-07-23T13:07:21.724Z","1.0.4":"2015-07-23T13:08:38.225Z","1.0.5":"2015-07-23T13:38:31.237Z","1.0.6":"2015-07-23T14:20:58.706Z","1.0.7":"2015-07-23T14:22:09.389Z","1.0.8":"2015-07-23T14:32:29.997Z","1.0.9":"2015-07-23T14:38:24.924Z","1.0.10":"2015-07-24T14:29:47.845Z","1.0.11":"2015-07-24T14:30:08.114Z","1.0.12":"2015-07-24T14:59:03.383Z","1.0.13":"2015-07-24T15:04:12.658Z","1.0.14":"2015-07-26T15:01:33.841Z","1.0.15":"2015-07-26T15:03:07.620Z","1.0.16":"2015-07-26T15:59:46.678Z","1.0.17":"2015-07-26T18:37:30.428Z","1.0.18":"2015-07-26T18:39:46.818Z","1.0.19":"2015-07-26T18:41:51.271Z","1.1.0":"2015-07-26T18:48:45.554Z","1.1.1":"2015-07-28T12:21:44.695Z","1.1.2":"2015-07-28T13:07:25.706Z","1.1.3":"2015-07-28T13:09:35.594Z","1.1.3-a":"2015-07-28T13:12:04.903Z","1.1.3-b":"2015-07-28T13:15:08.737Z","1.1.3-c":"2015-07-28T13:17:38.308Z","1.1.3-d":"2015-07-28T13:19:35.304Z","1.1.3-e":"2015-07-28T13:21:56.150Z","1.1.3-f":"2015-07-28T13:30:08.407Z","1.1.4":"2015-07-28T13:52:21.806Z","1.1.5":"2015-07-28T14:27:23.847Z","1.1.6":"2015-07-28T14:43:07.707Z","1.1.7":"2015-07-29T09:51:31.417Z","1.1.7-a":"2015-07-29T10:12:45.625Z","1.1.7-b":"2015-07-29T10:22:29.914Z","1.1.8-a":"2015-07-29T21:21:41.320Z","1.1.8-b":"2015-07-29T21:23:18.620Z","1.1.9":"2015-07-29T21:32:10.565Z","1.1.10":"2015-07-30T14:30:55.356Z","1.1.10-b":"2015-07-30T16:05:17.395Z","1.1.10-c":"2015-07-30T16:13:46.509Z","1.1.11-a":"2015-07-31T12:50:45.304Z","1.1.11-b":"2015-07-31T13:05:12.294Z","1.1.12":"2015-07-31T13:55:48.239Z","1.1.13":"2015-07-31T14:06:49.466Z","1.1.14":"2015-07-31T14:31:54.944Z","1.1.15":"2015-08-02T14:12:24.729Z","1.2.0":"2015-08-02T14:32:18.736Z","1.2.1":"2015-08-02T14:35:10.318Z","1.2.2":"2015-08-02T14:38:39.043Z","1.2.3":"2015-08-03T10:11:09.815Z","1.2.4":"2015-08-03T11:34:01.991Z","1.2.5":"2015-08-03T11:35:58.266Z","1.2.6":"2015-08-03T11:37:48.631Z","1.2.8":"2015-08-03T12:31:11.431Z","1.2.9":"2015-08-04T10:32:39.472Z","1.2.10":"2015-08-04T11:15:27.593Z","1.2.11":"2015-08-04T11:22:16.347Z","1.3.0":"2015-08-30T12:26:06.606Z","1.3.1":"2015-10-11T21:29:03.698Z","1.3.2":"2016-01-10T15:49:23.163Z","1.4.0":"2016-01-12T20:09:57.648Z","1.4.1":"2016-02-01T11:49:34.485Z","1.4.2":"2016-02-01T11:54:03.431Z","1.4.3":"2016-02-03T14:34:33.995Z","1.4.4":"2016-02-19T11:24:34.516Z","1.4.5":"2016-02-26T00:22:28.538Z","1.4.6":"2016-03-01T16:01:41.387Z","1.4.7":"2016-03-01T16:31:03.101Z","1.4.8":"2016-03-08T15:12:17.070Z","1.4.9":"2016-03-17T16:36:49.863Z","1.5.0":"2016-03-17T16:51:31.968Z","1.5.1":"2016-03-21T12:49:19.793Z","1.6.0":"2016-04-08T22:09:22.761Z","1.6.1":"2016-04-08T22:10:11.295Z","1.6.2":"2016-04-08T22:14:32.498Z","1.6.3":"2016-04-08T22:21:48.702Z","1.6.4":"2016-04-10T17:37:53.872Z","1.6.5":"2016-04-22T15:02:02.368Z","1.6.6":"2016-04-30T11:57:31.270Z","1.6.7":"2016-05-12T21:08:03.584Z","1.6.8":"2016-05-15T20:02:05.269Z","1.6.9":"2016-05-15T20:07:06.838Z","1.7.0":"2016-06-01T12:26:08.007Z","1.7.1":"2016-06-01T12:46:32.357Z","1.7.2":"2016-06-01T12:49:24.684Z","1.7.3":"2016-06-14T12:54:19.941Z","1.7.4":"2016-06-23T12:17:24.279Z","1.7.5":"2016-07-20T13:29:29.811Z","2.0.0":"2016-08-07T16:42:32.885Z","2.0.1":"2016-08-07T16:51:55.240Z","2.0.2":"2016-08-09T16:37:24.159Z","2.0.3":"2016-08-16T09:04:29.487Z","2.0.4":"2016-08-18T11:49:13.938Z","2.0.5":"2016-09-01T14:17:19.667Z","2.0.6":"2016-09-02T09:57:05.066Z","2.0.7":"2016-10-04T17:35:18.596Z","2.0.8":"2016-10-04T17:50:05.263Z","2.10.0":"2016-10-18T23:15:59.586Z","2.10.1":"2016-10-19T07:59:04.384Z","2.10.2":"2016-10-19T08:41:31.005Z","2.10.3":"2016-10-19T20:47:53.522Z","2.10.4":"2016-10-20T08:55:36.115Z","2.10.5":"2016-10-23T21:59:58.014Z","2.10.6":"2016-10-24T18:51:08.878Z","2.10.7":"2016-10-27T13:02:04.482Z","2.10.8":"2016-10-27T18:10:31.270Z","2.10.9":"2016-11-02T12:10:27.341Z","3.0.0":"2017-10-09T11:49:56.705Z","3.0.1":"2017-10-09T14:21:52.889Z","3.0.2":"2017-10-10T09:48:39.672Z","3.0.3":"2017-10-10T13:40:15.463Z","3.0.4":"2017-10-11T09:29:38.020Z","3.0.5":"2017-10-11T09:34:27.602Z","3.0.6":"2017-10-11T12:03:08.810Z","3.0.7":"2017-10-20T13:52:35.099Z"},"maintainers":[{"name":"lesha-spr","email":"voodoo.spr@gmail.com"}],"dist-tags":{"latest":"3.0.7","beta":"3.0.0"},"description":"[](https://badge.fury.io/js/react-validation) [](https://travis-ci.org/Lesha-spr/react-validation) [](https://badge.fury.io/js/react-validation) [](https://travis-ci.org/Lesha-spr/react-validation) [](https://coveralls.io/github/Lesha-spr/react-validation?branch=master) [](https://david-dm.org/Lesha-spr/react-validation) [](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``` props. It's required.\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 test\n``\n\n## Example usage\n\nFirst of all let's define some validations:\n\n```javascript\nimport validator from 'validator';\nconst required = (value) => {\n if (!value.toString().trim().length) {\n // We can return string or jsx as the 'error' prop for the validated Component\n return 'require';\n }\n};\n\nconst email = (value) => {\n if (!validator.isEmail(value)) {\n return `${value} is not a valid email.`\n }\n};\n\nconst lt = (value, props) => {\n // get the maxLength from component's props\n if (!value.toString().trim().length > props.maxLength) {\n // Return jsx\n return The value exceeded {props.maxLength} symbols.\n }\n};\n\nconst password = (value, props, components) => {\n // NOTE: Tricky place. The 'value' argument is always current component's value.\n // So in case we're 'changing' let's say 'password' component - we'll compare it's value with 'confirm' value.\n // But if we're changing 'confirm' component - the condition will always be true\n // If we need to always compare own values - replace 'value' with components.password[0].value and make some magic with error rendering.\n if (value !== components['confirm'][0].value) { // components['password'][0].value !== components['confirm'][0].value\n // 'confirm' - name of input\n // components['confirm'] - array of same-name components because of checkboxes and radios\n return Passwords are not equal.\n }\n};\n```\n\nThat's it. We can now use it in our React components:\n\n```javascript\nimport Form from 'react-validation/build/form';\nimport Input from 'react-validation/build/input';\nimport React, { Component } from 'react';\n\nexport default class Login extends Component {\n render() {\n return ;\n }\n}\n```\n\nNote the ```validations``` prop. It's an array of functions which was defined earlier.\n\n## Components and props\n\n```react-validation``` provides a ```components``` with pre-defined structure and ```hoc```s to define it self. The components are: ```Form```, ```Input```, ```Select```, ```Textarea``` and ```Button```.\nAll of them are just custom wrappers around the native components. They can accept any valid attributes and a few extra:\n \n1. ```isUsed``` - ```Input```, ```Select``` and ```Textarea```: says to react-validation to mark component as it was blured.\n2. ```isChanged``` - ```Input```, ```Select``` and ```Textarea```: says to react-validation to mark component as it was changed.\n3. ```validations``` - ```Input```, ```Select``` and ```Textarea```: accepts an array of validations functions.\n\n##### NOTE: Always provide a ```name``` prop to ```Input```, ```Select``` and ```Textarea```.\n\n### Form component\n\n```\nForm\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 control(s) 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(s).\n\n2. ```validateAll()``` - validates all controls by marking all controls as ```isUsed``` and ```isChanged```. \n\n3. ```showError(component [,error])``` - helps to handle async API errors. ```component``` - ref to the React Component to validate. ```error``` - error to show. Can be string or jsx.\n\n4. ```hideError(component)``` - hides a corresponding component's error. ```component``` - ref to the React Component.\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 this.form.showError(this.userInput, API error);\n }, 1000);\n };\n\n removeApiError = () => {\n this.form.hideError(this.userInput);\n };\n\n render() {\n return \n }\n}\n```\n\n### HOCs\n\nreact-validations also provides HOC (High Order Component) for each component. That made to have an ability to define own render logic, use mixed props, etc.\n```javascript\nimport { form, control, button } from 'react-validation';\n\n// Define own Form component\nconst Form = ({ getValues, validate, validateAll, showError, hideError, children, ...props }) => ( // destruct non-valid props\n \n);\n\n// Define own Input component\nconst Input = ({ error, isChanged, isUsed, ...props }) => (\n
\n \n {isChanged && isUsed && error}\n
\n);\n\n// Define own Button component\nconst Button = ({ hasErrors, ...props }) => {\n return (\n \n );\n};\n\n// Now call HOCs on components\nconst MyValidationForm = form(Form);\nconst MyValidationInput = control(Input);\nconst MyValidationButton = button(Button);\n```\n\nThat's it. Now MyValidationForm can be used with all given API.\n\n#### props\n##### form:\n```getValues``` - function which returns object with keys by 'name' prop and string values. NOTE: same-name controls will be returned as array of strings.\n```validate(name)``` - function to validate controls by 'name' argument. It marks control as 'isUsed' and 'isBlured'.\n```showError(component, [,error])``` - function to force showing error. component - ref to the control, error - string/jsx.\n```hideError(component)``` - function to hide error on passed control ref.\n\n##### control:\n```error``` - string or jsx. Note that error will be defined anytime the control has invalid value. Use ```isUsed``` and ```isChanged``` to apply rendering logic.\n```isChanged``` - boolean. Indicates the control was ```change```d.\n```isUsed``` - boolean. Indicates the control was ```blur```d.\n\n##### button:\n```hasErrors``` - boolean. Indicates the whole form contain at least one invalid control.\n\n### Input component\n\n```\nInput\n```\n\nA wrapper around the native ```input```. It accepts a ```validations``` prop - an array of functions.\n\n```javascript\n\n```\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\n### Textarea component\n\n```\nTextarea\n```\n\nA wrapper around the native ```textarea```. Like ```Input```, it accepts a ```validations``` prop. Nothing special here:\n\n```javascript\n