{"id":25531854,"url":"https://github.com/newoldmax/react-material-ui-form-validator","last_synced_at":"2025-10-08T14:24:23.601Z","repository":{"id":42235654,"uuid":"82919824","full_name":"NewOldMax/react-material-ui-form-validator","owner":"NewOldMax","description":"Simple validator for forms designed with material-ui components.","archived":false,"fork":false,"pushed_at":"2025-05-29T09:00:57.000Z","size":7704,"stargazers_count":325,"open_issues_count":7,"forks_count":80,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-10-06T06:57:13.624Z","etag":null,"topics":["form-validation","material-ui","react"],"latest_commit_sha":null,"homepage":"https://newoldmax.github.io/react-material-ui-form-validator/","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/NewOldMax.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,"zenodo":null}},"created_at":"2017-02-23T11:17:52.000Z","updated_at":"2025-08-21T15:41:49.000Z","dependencies_parsed_at":"2025-04-12T06:14:29.952Z","dependency_job_id":"03bb65e4-7ff4-46d0-8dfa-b3f1acfdc5ef","html_url":"https://github.com/NewOldMax/react-material-ui-form-validator","commit_stats":{"total_commits":83,"total_committers":7,"mean_commits":"11.857142857142858","dds":0.4337349397590361,"last_synced_commit":"f63f54f890b9faac368ac00a869c8445eed4bccb"},"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"purl":"pkg:github/NewOldMax/react-material-ui-form-validator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewOldMax%2Freact-material-ui-form-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewOldMax%2Freact-material-ui-form-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewOldMax%2Freact-material-ui-form-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewOldMax%2Freact-material-ui-form-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NewOldMax","download_url":"https://codeload.github.com/NewOldMax/react-material-ui-form-validator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewOldMax%2Freact-material-ui-form-validator/sbom","scorecard":{"id":100606,"data":{"date":"2025-08-11","repo":{"name":"github.com/NewOldMax/react-material-ui-form-validator","commit":"62a77b4817b6eed320db6d3e9d61af79a8d5848f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.4,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":5,"reason":"1 commit(s) and 5 issue activity found in the last 90 days -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 1/23 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'","Warn: branch protection not enabled for branch 'v1.x'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"11 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T10:03:49.768Z","repository_id":42235654,"created_at":"2025-08-15T10:03:49.768Z","updated_at":"2025-08-15T10:03:49.768Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278957577,"owners_count":26075488,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["form-validation","material-ui","react"],"created_at":"2025-02-20T01:41:58.875Z","updated_at":"2025-10-08T14:24:23.554Z","avatar_url":"https://github.com/NewOldMax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Validation component for material-ui forms\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)\n[![npm version](https://badge.fury.io/js/react-material-ui-form-validator.svg)](https://badge.fury.io/js/react-material-ui-form-validator)\n[![Build Status](https://travis-ci.org/NewOldMax/react-material-ui-form-validator.svg?branch=master)](https://travis-ci.org/NewOldMax/react-material-ui-form-validator)\n\n### [Demo](https://newoldmax.github.io/react-material-ui-form-validator/)\n\n### Installation\n\n````\nnpm install react-material-ui-form-validator\n````\n\n### Versions\n+ 0.x, 1.x - supports material-ui \u003c= 0.x\n+ ^2.0.0 - supports material-ui \u003e= 1.x || 3.x || 4.x\n+ ^3.0.0 - supports material-ui \u003e= 5.x\n\nImplementation of [react-form-validator-core](https://www.npmjs.com/package/react-form-validator-core) for [material-ui](https://mui.com/)\n\n### Migration guide\n\n#### From \u003c2.1.1 to \u003e=2.1.1\n\nBreaking changes was introduced to react-form-validator-core in order to avoid legacy context. If you have custom validator components then you should change `render` method of your input components to `renderValidatorComponent`.\n\nBefore:\n````javascript\nimport React from 'react';\nimport { ValidatorComponent } from 'react-material-ui-form-validator';\n\nclass SomeValidator extends ValidatorComponent {\n    render() {\n        // return your validated component\n    }\n}\n\nexport default SomeValidator;\n````\n\nAfter:\n````javascript\nimport React from 'react';\nimport { ValidatorComponent } from 'react-material-ui-form-validator';\n\nclass SomeValidator extends ValidatorComponent {\n    renderValidatorComponent() {\n        // return your validated component\n    }\n}\n\nexport default SomeValidator;\n````\n### Info\n\nSupported types:\n+ Text ([TextValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/TextValidator.jsx))\n+ Select ([SelectValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/SelectValidator.jsx))\n\nSome rules can accept extra parameter, example:\n````javascript\n\u003cTextValidator\n   {...someProps}\n   validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']}\n/\u003e\n````\n\n\n### Example\n\n\u003cimg src=\"https://raw.githubusercontent.com/NewOldMax/react-material-ui-form-validator/master/examples/example.gif\" width=\"285\"\u003e\n\n### Usage\n\nYou can pass any props of field components, but note that ``errorText`` prop will be replaced when validation errors occurred.\nYour component must [provide a theme](http://www.material-ui.com/#/get-started/usage).\n\n````javascript\n\nimport React from 'react';\nimport Button from '@mui/material/Button';\nimport { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';\n\nclass MyForm extends React.Component {\n\n    state = {\n        email: '',\n    }\n\n    handleChange = (event) =\u003e {\n        const email = event.target.value;\n        this.setState({ email });\n    }\n\n    handleSubmit = () =\u003e {\n        // your submit logic\n    }\n\n    render() {\n        const { email } = this.state;\n        return (\n            \u003cValidatorForm\n                ref=\"form\"\n                onSubmit={this.handleSubmit}\n                onError={errors =\u003e console.log(errors)}\n            \u003e\n                \u003cTextValidator\n                    label=\"Email\"\n                    onChange={this.handleChange}\n                    name=\"email\"\n                    value={email}\n                    validators={['required', 'isEmail']}\n                    errorMessages={['this field is required', 'email is not valid']}\n                /\u003e\n                \u003cButton type=\"submit\"\u003eSubmit\u003c/Button\u003e\n            \u003c/ValidatorForm\u003e\n        );\n    }\n}\n\n````\n\nYou can add your custom rules:\n````javascript\n\nimport React from 'react';\nimport Button from '@mui/material/Button';\nimport { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';\n\nclass ResetPasswordForm extends React.Component {\n\n    state = {\n        user: {\n            password: '',\n            repeatPassword: '',\n        },\n    };\n\n    componentDidMount() {\n        // custom rule will have name 'isPasswordMatch'\n        ValidatorForm.addValidationRule('isPasswordMatch', (value) =\u003e {\n            if (value !== this.state.user.password) {\n                return false;\n            }\n            return true;\n        });\n    }\n\n    componentWillUnmount() {\n        // remove rule when it is not needed\n        ValidatorForm.removeValidationRule('isPasswordMatch');\n    }\n\n    handleChange = (event) =\u003e {\n        const { user } = this.state;\n        user[event.target.name] = event.target.value;\n        this.setState({ user });\n    }\n\n    handleSubmit = () =\u003e {\n        // your submit logic\n    }\n\n    render() {\n        const { user } = this.state;\n\n        return (\n            \u003cValidatorForm\n                onSubmit={this.handleSubmit}\n            \u003e\n                \u003cTextValidator\n                    label=\"Password\"\n                    onChange={this.handleChange}\n                    name=\"password\"\n                    type=\"password\"\n                    validators={['required']}\n                    errorMessages={['this field is required']}\n                    value={user.password}\n                /\u003e\n                \u003cTextValidator\n                    label=\"Repeat password\"\n                    onChange={this.handleChange}\n                    name=\"repeatPassword\"\n                    type=\"password\"\n                    validators={['isPasswordMatch', 'required']}\n                    errorMessages={['password mismatch', 'this field is required']}\n                    value={user.repeatPassword}\n                /\u003e\n                \u003cButton type=\"submit\"\u003eSubmit\u003c/Button\u003e\n            \u003c/ValidatorForm\u003e\n        );\n    }\n\n````\n\nCurrently material-ui [doesn't support](https://github.com/callemall/material-ui/issues/3771) error messages for switches, but you can easily add your own:\n````javascript\nimport React from 'react';\nimport red from '@mui/material/colors/red';\nimport Checkbox from '@mui/material/Checkbox';\nimport { ValidatorComponent } from 'react-material-ui-form-validator';\n\nconst red300 = red['500'];\n\nconst style = {\n    right: 0,\n    fontSize: '12px',\n    color: red300,\n    position: 'absolute',\n    marginTop: '-25px',\n};\n\nclass CheckboxValidatorElement extends ValidatorComponent {\n\n    renderValidatorComponent() {\n        const { errorMessages, validators, requiredError, value, ...rest } = this.props;\n\n        return (\n            \u003cdiv\u003e\n                \u003cCheckbox\n                    {...rest}\n                    ref={(r) =\u003e { this.input = r; }}\n                /\u003e\n                {this.errorText()}\n            \u003c/div\u003e\n        );\n    }\n\n    errorText() {\n        const { isValid } = this.state;\n\n        if (isValid) {\n            return null;\n        }\n\n        return (\n            \u003cdiv style={style}\u003e\n                {this.getErrorMessage()}\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default CheckboxValidatorElement;\n````\n````javascript\n    componentDidMount() {\n        ValidatorForm.addValidationRule('isTruthy', value =\u003e value);\n    }\n...\n    \u003cCheckboxValidatorElement\n        ...\n        validators=['isTruthy']\n        errorMessages=['this field is required']\n        checked={value}\n        value={value} // \u003c---- you must provide this prop, it will be used only for validation\n    /\u003e\n````\n\n##### [Advanced usage](https://github.com/NewOldMax/react-material-ui-form-validator/wiki)\n\n### Contributing\n\nThis component covers all my needs, but feel free to contribute.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewoldmax%2Freact-material-ui-form-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewoldmax%2Freact-material-ui-form-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewoldmax%2Freact-material-ui-form-validator/lists"}