{"id":13437753,"url":"https://github.com/christianalfoni/formsy-react","last_synced_at":"2025-04-12T22:17:37.177Z","repository":{"id":22233601,"uuid":"25566711","full_name":"christianalfoni/formsy-react","owner":"christianalfoni","description":"A form input builder and validator for React JS","archived":false,"fork":false,"pushed_at":"2022-07-14T10:23:48.000Z","size":2123,"stargazers_count":2586,"open_issues_count":145,"forks_count":433,"subscribers_count":55,"default_branch":"master","last_synced_at":"2025-04-12T22:17:29.798Z","etag":null,"topics":[],"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/christianalfoni.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","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":"2014-10-22T06:58:33.000Z","updated_at":"2025-04-12T19:12:51.000Z","dependencies_parsed_at":"2022-07-15T00:16:10.232Z","dependency_job_id":null,"html_url":"https://github.com/christianalfoni/formsy-react","commit_stats":null,"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianalfoni%2Fformsy-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianalfoni%2Fformsy-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianalfoni%2Fformsy-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianalfoni%2Fformsy-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christianalfoni","download_url":"https://codeload.github.com/christianalfoni/formsy-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637786,"owners_count":21137538,"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":[],"created_at":"2024-07-31T03:00:59.973Z","updated_at":"2025-04-12T22:17:37.154Z","avatar_url":"https://github.com/christianalfoni.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","Code Design","React","\u003ca name=\"JavaScript\"\u003e\u003c/a\u003eJavaScript"],"sub_categories":["Uncategorized","Form Logic","React Components"],"readme":"# Moved!\n\nThis project has moved. Starting from 1.0.0 onward, develeopment will continue\nat https://github.com/formsy/formsy-react/\n\n---\n\nformsy-react  [![GitHub release](https://img.shields.io/github/release/christianalfoni/formsy-react.svg)](https://github.com/christianalfoni/formsy-react/releases) [![Build Status](https://travis-ci.org/christianalfoni/formsy-react.svg?branch=master)](https://travis-ci.org/christianalfoni/formsy-react)\n============\n\nA form input builder and validator for React JS\n\n| [How to use](#how-to-use) | [API](/API.md) | [Examples](/examples) |\n|---|---|---|\n\n## \u003ca name=\"background\"\u003eBackground\u003c/a\u003e\nI wrote an article on forms and validation with React JS, [Nailing that validation with React JS](http://christianalfoni.github.io/javascript/2014/10/22/nailing-that-validation-with-reactjs.html), the result of that was this extension.\n\nThe main concept is that forms, inputs and validation is done very differently across developers and projects. This extension to React JS aims to be that \"sweet spot\" between flexibility and reusability.\n\n## What you can do\n\n  1. Build any kind of form element components. Not just traditional inputs, but anything you want and get that validation for free\n\n  2. Add validation rules and use them with simple syntax\n\n  3. Use handlers for different states of your form. Ex. \"onSubmit\", \"onError\", \"onValid\" etc.\n\n  4. Pass external errors to the form to invalidate elements\n\n  5. You can dynamically add form elements to your form and they will register/unregister to the form\n\n## Default elements\nYou can look at examples in this repo or use the [formsy-react-components](https://github.com/twisty/formsy-react-components) project to use bootstrap with formsy-react, or use [formsy-material-ui](https://github.com/mbrookes/formsy-material-ui) to use [Material-UI](http://material-ui.com/) with formsy-react.\n\n## Install\n\n  1. Download from this REPO and use globally (Formsy) or with requirejs\n  2. Install with `npm install formsy-react` and use with browserify etc.\n  3. Install with `bower install formsy-react`\n\n## Changes\n\n[Check out releases](https://github.com/christianalfoni/formsy-react/releases)\n\n[Older changes](CHANGES.md)\n\n## How to use\n\nSee [`examples` folder](/examples) for examples. [Codepen demo](http://codepen.io/semigradsky/pen/dYYpwv?editors=001).\n\nComplete API reference is available [here](/API.md).\n\n#### Formsy gives you a form straight out of the box\n\n```jsx\n  import Formsy from 'formsy-react';\n\n  const MyAppForm = React.createClass({\n    getInitialState() {\n      return {\n        canSubmit: false\n      }\n    },\n    enableButton() {\n      this.setState({\n        canSubmit: true\n      });\n    },\n    disableButton() {\n      this.setState({\n        canSubmit: false\n      });\n    },\n    submit(model) {\n      someDep.saveEmail(model.email);\n    },\n    render() {\n      return (\n        \u003cFormsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}\u003e\n          \u003cMyOwnInput name=\"email\" validations=\"isEmail\" validationError=\"This is not a valid email\" required/\u003e\n          \u003cbutton type=\"submit\" disabled={!this.state.canSubmit}\u003eSubmit\u003c/button\u003e\n        \u003c/Formsy.Form\u003e\n      );\n    }\n  });\n```\n\nThis code results in a form with a submit button that will run the `submit` method when the submit button is clicked with a valid email. The submit button is disabled as long as the input is empty ([required](/API.md#required)) or the value is not an email ([isEmail](/API.md#validators)). On validation error it will show the message: \"This is not a valid email\".\n\n#### Building a form element (required)\n```jsx\n  import Formsy from 'formsy-react';\n\n  const MyOwnInput = React.createClass({\n\n    // Add the Formsy Mixin\n    mixins: [Formsy.Mixin],\n\n    // setValue() will set the value of the component, which in\n    // turn will validate it and the rest of the form\n    changeValue(event) {\n      this.setValue(event.currentTarget.value);\n    },\n\n    render() {\n      // Set a specific className based on the validation\n      // state of this component. showRequired() is true\n      // when the value is empty and the required prop is\n      // passed to the input. showError() is true when the\n      // value typed is invalid\n      const className = this.showRequired() ? 'required' : this.showError() ? 'error' : null;\n\n      // An error message is returned ONLY if the component is invalid\n      // or the server has returned an error message\n      const errorMessage = this.getErrorMessage();\n\n      return (\n        \u003cdiv className={className}\u003e\n          \u003cinput type=\"text\" onChange={this.changeValue} value={this.getValue()}/\u003e\n          \u003cspan\u003e{errorMessage}\u003c/span\u003e\n        \u003c/div\u003e\n      );\n    }\n  });\n```\nThe form element component is what gives the form validation functionality to whatever you want to put inside this wrapper. You do not have to use traditional inputs, it can be anything you want and the value of the form element can also be anything you want. As you can see it is very flexible, you just have a small API to help you identify the state of the component and set its value.\n\n## Related projects\n- [formsy-material-ui](https://github.com/mbrookes/formsy-material-ui) - A formsy-react compatibility wrapper for [Material-UI](http://material-ui.com/) form components.\n- [formsy-react-components](https://github.com/twisty/formsy-react-components) - A set of React JS components for use in a formsy-react form.\n- ...\n- Send PR for adding your project to this list!\n\n## Contribute\n- Fork repo\n- `npm install`\n- `npm run examples` runs the development server on `localhost:8080`\n- `npm test` runs the tests\n\n## License\n\n[The MIT License (MIT)](/LICENSE)\n\nCopyright (c) 2014-2016 PatientSky A/S\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianalfoni%2Fformsy-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristianalfoni%2Fformsy-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianalfoni%2Fformsy-react/lists"}