{"id":23379035,"url":"https://github.com/colevoss/react-invalidate","last_synced_at":"2025-04-10T20:45:57.878Z","repository":{"id":65484530,"uuid":"84686994","full_name":"colevoss/react-invalidate","owner":"colevoss","description":"React Form Validation","archived":false,"fork":false,"pushed_at":"2017-04-04T03:46:09.000Z","size":109,"stargazers_count":4,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-24T23:22:19.783Z","etag":null,"topics":["form","react","validation"],"latest_commit_sha":null,"homepage":null,"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/colevoss.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":"2017-03-11T23:35:48.000Z","updated_at":"2018-11-27T12:27:27.000Z","dependencies_parsed_at":"2023-01-25T17:01:23.768Z","dependency_job_id":null,"html_url":"https://github.com/colevoss/react-invalidate","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/colevoss%2Freact-invalidate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colevoss%2Freact-invalidate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colevoss%2Freact-invalidate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colevoss%2Freact-invalidate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colevoss","download_url":"https://codeload.github.com/colevoss/react-invalidate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248294934,"owners_count":21080003,"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","react","validation"],"created_at":"2024-12-21T19:16:18.595Z","updated_at":"2025-04-10T20:45:57.859Z","avatar_url":"https://github.com/colevoss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Invalidate [![Build Status](https://travis-ci.org/colevoss/react-invalidate.svg?branch=master)](https://travis-ci.org/colevoss/react-invalidate) [![npm](https://img.shields.io/npm/v/react-invalidate.svg)](https://www.npmjs.com/package/react-invalidate) [![npm](https://img.shields.io/npm/dm/react-invalidate.svg)](https://www.npmjs.com/package/react-invalidate) [![codecov](https://codecov.io/gh/colevoss/react-invalidate/branch/master/graph/badge.svg)](https://codecov.io/gh/colevoss/react-invalidate)\n\nReact Invalidate is an easy, yet flexible way to add validation to any form in your React projects.\n\n\n## Instalation\n* npm: `npm install --save react-invalidate`\n* yarn: `yarn add react-invalidate`\n\n## Example\nCheckout the [react-invalidate-sandbox](https://github.com/colevoss/react-invalidate-sandbox) repo to see it in action.\n\n## Usage\n\n### Single Field Validation\nIf you want to validate one field, you can do so with the `Validator` component. You can supply the `Validator`\ncomponent with one or more validator functions as well as a functional child that renders the field to be validated.\n\nThe child function receives an object with a `validate` function, the validation status as `isValid`, and the failed\nvalidation message provided by the validator(s). You can call the validate function on any of the input's events\nand when the validation is complete it will update the `isValid` and `message` values.\n\n```javascript\nimport { Validator } from 'react-invalidate';\n\nconst requiredValidator = (value: any, message: string = 'Required') =\u003e (\n  !!value ? true : Promise.reject(message);\n);\n\nconst SomeInput = ({ inputValue }) =\u003e (\n  \u003cValidator validators={requiredValidator}\u003e\n    {({ validate, isValid, message }) =\u003e (\n      \u003cdiv\u003e\n        \u003cinput\n          type=\"text\"\n          value={inputValue}\n          className={isValid ? 'normal-input' : 'invalid-input'}\n          onBlur={e =\u003e validate(e.target.value)}\n        /\u003e\n\n        {message \u0026\u0026 \u003cdiv\u003e{message}\u003c/div\u003e}\n      \u003c/div\u003e\n    )}\n  \u003c/Validator\u003e\n)\n```\n\n### Form Validation\nIf you want to have a form with multiple validated inputs, where a certain action would validate all the fields, you\ncan wrap the form in the `ValidationProvider` component. This uses a `react-redux` style subscription model to keep track\nof each field wrapped in a `Validator` component that is a child of the `ValidationProvider`.\n\nTo gain access to the central validator, you can wrap any component in the `connectToValidator` higher order component\nto call the global `validate` function and get data about the validation status of the form.\n\n**Form.jsx**\n```javascript\nimport { ValidationProvider, Validator } from 'react-invalidate';\nimport { requiredValidator } from '../path/to/validators';\nimport FormSubmitButton from '../path/to/FormSubmitButton';\n\nconst Form = ({ onSubmit }) =\u003e (\n  \u003cValidationProvider\u003e\n    \u003cdiv\u003e\n      \u003cValidator validators={requiredValidator} id=\"first-name\"\u003e\n        {({ validate, isValid, message }) =\u003e (\n          \u003cdiv\u003e\n            \u003cinput\n              type=\"text\"\n              name=\"first-name\"\n              value={inputValue}\n              className={isValid ? 'normal-input' : 'invalid-input'}\n              onBlur={e =\u003e validate(e.target.value)}\n            /\u003e\n\n            {message \u0026\u0026 \u003cdiv\u003e{message}\u003c/div\u003e}\n          \u003c/div\u003e\n        )}\n      \u003c/Validator\u003e\n\n      \u003cValidator validators={requiredValidator} id=\"last-name\"\u003e\n        {({ validate, isValid, message }) =\u003e (\n          \u003cdiv\u003e\n            \u003cinput\n              type=\"text\"\n              name=\"last-name\"\n              value={inputValue}\n              className={isValid ? 'normal-input' : 'invalid-input'}\n              onBlur={e =\u003e validate(e.target.value)}\n            /\u003e\n\n            {message \u0026\u0026 \u003cdiv\u003e{message}\u003c/div\u003e}\n          \u003c/div\u003e\n        )}\n      \u003c/Validator\u003e\n\n      \u003cFormSubmitButton onClick={onSubmit} /\u003e\n    \u003c/div\u003e\n  \u003c/ValidationProvider\u003e\n);\n\nexport default Form;\n```\n\n**FormSubmitButton.jsx**\n```javascript\nimport { connectToValidator } from 'react-invalidate';\n\nconst FormSubmitButton = ({ onClick }) =\u003e (\n  \u003cbutton onClick={onClick}\u003eSubmit Form\u003c/button\u003e\n);\n\n\nconst mapValidatorToProps = (validator, ownProps) =\u003e ({\n  onClick: async () =\u003e {\n    const isValid = await validator.validate();\n\n    if (!isValid) return false;\n\n    ownProps.onClick();\n  },\n})\n\nexport default connectToValidator(mapValidatorToProps)(FormSubmitButton);\n```\n\nIn the example above, the `FormSubmitButton` will run validations for all `Validator` wrapped inputs in the form. If\nit returns `false`, it will not submit the form because it never gets to the `ownProps.onClick` function.\n\nInversely, if all fields are valid, it will call it's `onClick` function and everything will be grand.\n\nSince the button runs all of the field validations, each field will be automatically updated with is new `isValid` status\nand failed validation `message` and update showing accordingly.\n\n\n### Asyc Validations\nSince validations can return promises, you can write asynchronous validators with relative ease. Say we wanted to validate\nthat a user's email is unique at signup, we would need to write a validator that makes a call to some back end to check for\nemail uniqueness.\n\n**uniqueEmailValidator.js**\n```javascript\nconst uniqueEmailValidator = async (email: string, message: string = 'Email must be unique') =\u003e {\n  const isEmailUnique = await checkEmailUniquenessWithServer(email);\n\n  if (!isEmailUnique) throw message; // Same as returning a rejected promise\n\n  return isEmailUnique;\n};\n\nexport default uniqueEmailValidator;\n```\n\n**form.jsx**\n```javascript\nimport uniqueEmailValidator from '../path/to/uniqueEmailValidator';\nimport requiredValidator from '../path/to/requiredValidator';\n\nconst SomeInput = ({ inputValue }) =\u003e (\n  \u003cValidator validators={[requiredValidator, uniqueEmailValidator]}\u003e\n    {({ validate, isValid, message }) =\u003e (\n      \u003cdiv\u003e\n        \u003cinput\n          type=\"text\"\n          value={inputValue}\n          className={isValid ? 'normal-input' : 'invalid-input'}\n          onBlur={e =\u003e validate(e.target.value)}\n        /\u003e\n\n        {message \u0026\u0026 \u003cdiv\u003e{message}\u003c/div\u003e}\n      \u003c/div\u003e\n    )}\n  \u003c/Validator\u003e\n)\n```\n\nNow, when this field is blurred, it will run the required validator and the uniqueEmailValidator. If the field is blank\nthe requiredValidator will throw first and show the required message. If the field is not blank, the uniqueEmailValidator\nwill be ran and fail if the email is not unique, updating the `isValid` and `message` args appropriately.\n\n\n### Todo:\n* Fully document each component\n* Research integrations with [valerie](https://github.com/developerdizzle/valerie)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolevoss%2Freact-invalidate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolevoss%2Freact-invalidate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolevoss%2Freact-invalidate/lists"}