{"id":16775907,"url":"https://github.com/xontab/react-forms-component","last_synced_at":"2026-04-13T16:34:18.476Z","repository":{"id":75888654,"uuid":"75534787","full_name":"xontab/react-forms-component","owner":"xontab","description":"Form Component including validation for React","archived":false,"fork":false,"pushed_at":"2017-02-12T18:04:46.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-10T09:44:39.767Z","etag":null,"topics":["boilerplate","forms","jsx","react","validation","webpack"],"latest_commit_sha":null,"homepage":"http://xontab.com","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/xontab.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-04T12:02:42.000Z","updated_at":"2017-10-10T19:11:47.000Z","dependencies_parsed_at":"2023-07-11T23:45:33.284Z","dependency_job_id":null,"html_url":"https://github.com/xontab/react-forms-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xontab/react-forms-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xontab%2Freact-forms-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xontab%2Freact-forms-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xontab%2Freact-forms-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xontab%2Freact-forms-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xontab","download_url":"https://codeload.github.com/xontab/react-forms-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xontab%2Freact-forms-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31761984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["boilerplate","forms","jsx","react","validation","webpack"],"created_at":"2024-10-13T07:08:04.727Z","updated_at":"2026-04-13T16:34:18.427Z","avatar_url":"https://github.com/xontab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Forms Component\n\n[![npm version](https://badge.fury.io/js/react-forms-component.svg)](https://badge.fury.io/js/react-forms-component)\n\nForm Component including validation for React\n\n**Table of Contents**\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Example](#example)\n- [Credits](#credits)\n\n## Installation\nTo install just run the following command:\n\n    \u003e npm install react-forms-component\n\n## Usage\n\n### Import Library\n```js\nimport ReactForm from 'react-forms-component';\nimport ReactFormValidations from 'react-forms-component/validations';\n```\n\n### Basic Component Usage\n```js\n\u003cReactForm\u003e\u003c/ReactForm\u003e\n```\n\n### Optional Props\n\n| Paramater | Type | Remark |\n| --- | --- | --- |\n| `classNameError` | string |  Will apply the className when an input field is not valid  |\n| `styleError` | object | Will apply these inline styles when an input field is not valid  |\n| `onValidationChange` | func | Will be fired when the overall form validation status changes  |\n\n### Validations\n\n### List of build in Validations\n\n| Validation | Parameters |\n| --- | --- |\n| `Required` | No extra parameters |\n| `IsNumber` | No extra parameters |\n| `MinLength` | Length size: Number |\n| `MaxLength` | Length size: Number |\n| `Min` | Length size: Number |\n| `Max` | Length size: Number |\n\n### Sample\n\nTo following example is using 2 of the above built-in validation functions:\n\n```js\n\u003cinput \n    type=\"text\" \n    data-model=\"username\" \n    data-validations={\n        [\n            ReactFormValidations.Required, \n            (m, v) =\u003e ReactFormValidations.MinLength(m, v, 5)\n        ]\n    } /\u003e\n```\n\n### Custom Validations\n\nIf the above built-in validations are not enough for your application, you can create your own Validation functions.  Below is an example of a custom validation:\n\n```js\nstatic Max = (modelName, value, no, customError) =\u003e (value \u0026\u0026 parseInt(value) \u003c= no ? true : ReactFormValidations._createErrorMessage(customError, modelName, `greater than ${no}`));\n\n```\n\n#### Display Errors\n\nTo display the error message inline you can need to use `data-error-for` attribute/prop:\n\n```js\n\u003cdiv className=\"error-label\" data-error-for=\"username\"\u003e\u003c/div\u003e\n```\n\n## Example\n\nThe following is an example of how to use this library in your application:\n\n### Sample JSX\n```js\n\u003cReactForm\n    classNameError=\"error\"\n    onValidationChange={this.handleValidationChange}\n    ref={(form) =\u003e {\n        this.form = form; \n    }}\n\u003e\n    \u003cdiv className=\"form-control\"\u003e\n        \u003cdiv className=\"error-label\" data-error-for=\"username\"\u003e\u003c/div\u003e\n        \u003clabel\u003eUsername:\u003c/label\u003e\n        \u003cinput \n            type=\"text\" \n            data-model=\"username\" \n            data-validations={\n                [\n                    ReactFormValidations.Required, \n                    (m, v) =\u003e ReactFormValidations.MinLength(m, v, 5)\n                ]\n            } /\u003e\n    \u003c/div\u003e\n    ...\n\u003c/ReactForm\u003e\n\u003cdiv className=\"form-control\"\u003e\n    \u003clabel\u003e\u003c/label\u003e\n    \u003cbutton disabled={!isValid} onClick={this._handleClick}\u003ePopulate Model\u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Sample Event Handler\n```js\nhandleValidationChange = (isValid) =\u003e {\n    this.setState({\n        isValid,\n    });\n}\n\n_handleClick = () =\u003e {\n    console.log(this.form.getModel());\n}\n```\n\n## Example\n\nClone this project and run the following commands to run the demo:\n\n```js\ncd examples\nnpm install\nnpm start\n```\nthen open http://localhost:4001 in a web browser\n\n## Credits\n\nReact: http://facebook.github.io/react/\n\nBabel: http://babeljs.io/\n\nWebpack: https://webpack.github.io/docs/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxontab%2Freact-forms-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxontab%2Freact-forms-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxontab%2Freact-forms-component/lists"}