{"id":13422419,"url":"https://github.com/0529bill/react-client-validation","last_synced_at":"2025-03-15T12:30:41.732Z","repository":{"id":41514562,"uuid":"508902817","full_name":"0529bill/react-client-validation","owner":"0529bill","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-16T07:45:11.000Z","size":660,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-01T10:47:21.756Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-client-validation","language":"TypeScript","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/0529bill.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-06-30T02:07:23.000Z","updated_at":"2023-05-02T15:41:40.000Z","dependencies_parsed_at":"2024-01-07T18:07:10.365Z","dependency_job_id":null,"html_url":"https://github.com/0529bill/react-client-validation","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/0529bill%2Freact-client-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0529bill%2Freact-client-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0529bill%2Freact-client-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0529bill%2Freact-client-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0529bill","download_url":"https://codeload.github.com/0529bill/react-client-validation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243730946,"owners_count":20338745,"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-30T23:00:44.309Z","updated_at":"2025-03-15T12:30:41.402Z","avatar_url":"https://github.com/0529bill.png","language":"TypeScript","readme":"# React-Client-Validation\n\n[![npm version](https://badge.fury.io/js/react-client-validation.svg)](https://badge.fury.io/js/react-client-validation)\n\n## Installation\n\n```js\nnpm i react-client-validation\n```\n\nor use CDN\n\n```js\n\u003cscript src=\"https://unpkg.com/react-client-validation@1.5.0/dist/index.min.js\"\u003e\u003c/script\u003e\n```\n\n## Working example\n\n[Codesandbox](https://codesandbox.io/s/react-client-validarion-example-zo1gr3?file=/src/App.js)\n\n## Quick start\n\n```js\nimport handleValidation from 'react-client-validation'\n\nconst loginValidation = [\n  {\n    index: 'username',\n    condition: [!username],\n    errorMessage: 'User name is not valid!',\n  },\n  {\n    index: 'password',\n    //change errorObject's format\n    errorFormat: ['invalidPassword'],\n    customCondition: (data, errorReturnArray) =\u003e {\n      if (data.password) {\n        errorReturnArray.push(false)\n      }\n    },\n  },\n]\n\nconst [isPass, loginErrorObject] = handleValidation({\n  errorArray: loginValidation,\n  defaultErrorMessage: \"input can't be blank\",\n})\n```\n\n```js\nconsole.log(isPass); // boolean, true or false\nconsole.log(loginErrorObject);\n\n{\n    username: {msg: 'User name is not valid!'},\n    password: [ invalidPassword: {msg: \"input can't be blank\"}]\n    //password's value is formatted based on errorFormat from the errorArray\n}\n```\n\n## Basic Props\n\n1. defaultMessage: string: if errorMessage is not found for the index, then defaultMessage will be applied to its return error message.\n\n2. dataSource: any (is isRequired if using customCondition)\n\n3. errorArray: Array (isRequired)\n   - condition: (string | number | boolean | undefined | null)[] (pick one between condition or customCondition)\n   - customCondition: Function (pick one between condition or customCondition): (dataSource, returnArray) =\u003e [true, false....]\n   - index: string (isRequired): will be the key for the return error Object.\n   - errorMessage: string: will be the value for the return error message.\n   - errorFormat: Array (only allowed when using customCondition) set custom format.\n\n## Example\n\n### errorFormat\n\n```js\n//errorFormat example\n//only allowed when using customCondition\n\n\n\n1. without errorFormat\n\n{ ...,\n  customCondition: ...,\n}\n//returned error object\n\n{\n    username: {msg:'User name is not valid!'}\n}\n\n\n2. with errorFormat\n//scenario 1\n\n{\n    ...,\n    errorFormat: ['test'],\n    customCondition: ...,\n\n}\n\n//returned error object\n\n{\n    username: {test:  {msg:'User name is not valid!'} }\n}\n\n\n//scenario 2\n// 'index' will return the current index.\n\n\n{\n    ...,\n    errorFormat: ['test', 'index'],\n    customCondition: ...,\n\n}\n\n//returned error object\n\n{\n    username: {test: { 0:  { msg: 'User name is not valid!'} } }\n}\n\n```\n\n### customCondition\n\n```js\n\n\n//customCondition example\n\n/**\nwhen using customCondition,\npush boolean to the errorReturnArray from customCondition\npush true if the current condition passed, otherwise push false\n**/\n{...,\ncustomCondition: (data, errorReturnArray) =\u003e {\n            if (!data.password) {\n               errorReturnArray.push(false)\n               // validation failed, will get fail message from the return error object\n            }\n        }\n}\n```\n\n## Contract Me\n\n[Github](https://github.com/0529bill/react-client-validation)\n\nEmail 0529bill@gmail.com\n\n## License\n\nReleased under [MIT License](LICENSE.md).\n","funding_links":[],"categories":["Code Design"],"sub_categories":["Form Logic"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0529bill%2Freact-client-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0529bill%2Freact-client-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0529bill%2Freact-client-validation/lists"}