{"id":16247127,"url":"https://github.com/ffxsam/meteor-react-smartform","last_synced_at":"2025-04-02T13:13:44.019Z","repository":{"id":155597676,"uuid":"45674620","full_name":"ffxsam/meteor-react-smartform","owner":"ffxsam","description":"Smart form elements for Meteor React","archived":false,"fork":false,"pushed_at":"2015-12-10T21:59:12.000Z","size":25,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-08T04:25:37.808Z","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/ffxsam.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.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":"2015-11-06T10:09:16.000Z","updated_at":"2016-03-05T15:45:01.000Z","dependencies_parsed_at":"2023-04-26T01:17:37.320Z","dependency_job_id":null,"html_url":"https://github.com/ffxsam/meteor-react-smartform","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffxsam%2Fmeteor-react-smartform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffxsam%2Fmeteor-react-smartform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffxsam%2Fmeteor-react-smartform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffxsam%2Fmeteor-react-smartform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ffxsam","download_url":"https://codeload.github.com/ffxsam/meteor-react-smartform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246819785,"owners_count":20839095,"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-10-10T14:36:01.936Z","updated_at":"2025-04-02T13:13:43.981Z","avatar_url":"https://github.com/ffxsam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Meteor/React Smart Form\n\nSmartForm is a package for Meteor/React that allows simple and easy form validation and error handling.\n\n***NOTE: This package is currently pre-1.0 and should be considered not production-ready***\n\n## Installation\n\n    $ meteor add ffxsam:react-smartform\n\n## Example Usage\n\n```jsx\nrender() {\n  return \u003cdiv\u003e\n    \u003cSmartForm.Form id=\"my-form\" onSubmit={this.handleSubmit}\u003e\n      \u003cSmartForm.Input\n        id=\"name\"\n        formId=\"my-form\" // links this element to #my-form\n        required // field is required\n        validateAs={/^[A-Za-z\\s'.-]*$/} // validate field using regex\n        weakValidation // failed regex match won't prevent form submission\n      /\u003e\n      \n      \u003cSmartForm.Error\n        linkedTo=\"my-form.name\" // error is linked to the field above\n        invalidMsg=\"Name contains possibly invalid characters.\"\n        requiredMsg=\"Name is required.\"\n        onError={this.nameError} // you can have your own optional callback in case of error\n      /\u003e\n      \n      \u003cinput type=\"submit\" /\u003e\n    \u003c/SmartForm.Form\u003e\n  \u003c/div\u003e\n}\n```\n\nThe `SmartForm.Input` component will take care of any validation and, in case of errors, it will display your `invalidMsg` or `requiredMsg` depending on which error occurred. `SmartForm.Error` is a separate component so that it can be placed anywhere independently of its corresponding `SmartForm.Input`. Standard props you'd expect to be able to use such as `className` can be used on any of these components.\n\n## Reference\n\n### SmartForm.Form\n\n#### Properties\n* `id`: {String} **[required]** The id of the form\n* `onSubmit`: {Function} **[required]** Function to call when user clicks the submit button. The callback will be called with two arguments:\n\t* `error`: {Object} Either `undefined` or an object of type `Meteor.Error` in the case of any form fields being invalid.\n\t* `formData`: {Object}  An object containing all of the input element IDs, with the following properties:\n\t\t* `errorReason`: {Symbol} Error code for this field. Either `SmartForm.ERROR_NONE`, `SmartForm.ERROR_REQUIRED`, `SmartForm.ERROR_INVALID`, or `SmartForm.ERROR_SUSPECT` (more on this one below).\n\t\t* `valid`: {Boolean} Indicates if the field is in a valid state.\n\t\t* `value`: {String} The current value of the input field.\n\n### SmartForm.Input\n\n#### Properties\n* `formId`: {String} **[required]** The id of the form this input should be linked to\n* `id`: {String} **[required]** The id of the input element\n* `required`: {Boolean} Indicates whether this field is required\n* `validateAs`: {RegEx/String} If you wish for this field to provide validation, you can either pass your own RegEx, or a string specifying the type of value being passed in. Currently accepted strings for `validateAs` are:\n\t* `\"email\"`\n\t* `\"phone\"` (US 10-digit phone number)\n\t* `\"zip\"` (US 5-digit ZIP)\n* `weakValidation`: {Boolean} If this property is present, the field will only perform a weak validation. In other words, if the value in the field does not pass validation against the `validateAs` field, the `SmartForm.Error` component will still show its `invalidMsg` message, but the field will remain in a valid state, and `SmartForm.ERROR_SUSPECT` will be set as the field error instead of `SmartForm.ERROR_INVALID`. Weak validation is recommended for fields such as email address, where standards might change in the future (e.g. we didn't used to have domain suffixes greater than three characters!)\n* `defaultValue`: {String} A default value for the input field\n\n### SmartForm.Checkbox\n\n#### Properties\n* `formId`: {String} **[required]** The id of the form this input should be linked to\n* `id`: {String} **[required]** The id of the input element\n* `defaultChecked`: {Boolean} Indicates whether the checkbox should be checked by default\n\n### SmartForm.Select\n\n#### Properties\n* `formId`: {String} **[required]** The id of the form this input should be linked to\n* `id`: {String} **[required]** The id of the input element\n* `required`: {Boolean} Indicates whether this field is required\n\n### SmartForm.Error\n\n#### Properties\n* `invalidMsg`: {String} The message to display when the field is invalid or suspect\n* `requiredMsg`: {String} The message to display when the field is required but empty\n* `linkedTo`: {String} **[required]** The form element the error should be linked to, in the format of `\"form-id.element-id\"`\n* `onError`: {Function} A callback which is invoked in case of error, and is passed two arguments:\n\t* `errorReason`: {Symbol} The reason for the error. Either `SmartForm.ERROR_INVALID`, `SmartForm.ERROR_SUSPECT`, or `SmartForm.ERROR_REQUIRED`\n\t* `value`: {String} The value of the field\n\n## Future Plans (contributions welcome!)\n* The ability to fire a callback as soon as the user tabs out of a field (e.g. to check if a username is available)\n* More input types (select, textarea, etc)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fffxsam%2Fmeteor-react-smartform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fffxsam%2Fmeteor-react-smartform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fffxsam%2Fmeteor-react-smartform/lists"}