{"id":16234127,"url":"https://github.com/zackify/svelte-validify","last_synced_at":"2025-04-08T07:41:47.292Z","repository":{"id":72855713,"uuid":"348125037","full_name":"zackify/svelte-validify","owner":"zackify","description":"Flexible and simple form abstraction in Svelte","archived":false,"fork":false,"pushed_at":"2021-03-15T21:41:32.000Z","size":58,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-14T04:49:48.612Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zackify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-03-15T21:16:56.000Z","updated_at":"2021-03-15T21:41:34.000Z","dependencies_parsed_at":"2023-03-11T14:09:36.455Z","dependency_job_id":null,"html_url":"https://github.com/zackify/svelte-validify","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/zackify%2Fsvelte-validify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fsvelte-validify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fsvelte-validify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fsvelte-validify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zackify","download_url":"https://codeload.github.com/zackify/svelte-validify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247800930,"owners_count":20998331,"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-10T13:15:06.204Z","updated_at":"2025-04-08T07:41:47.275Z","avatar_url":"https://github.com/zackify.png","language":"JavaScript","readme":"# Svelte Validify\n\nAn attempt to bring [react-validify](https://github.com/zackify/validify) over to Svelte.\n\nThe goal with this library is to be the most flexible form library while also having the smallest API.\n\nTodo: Test coverage\n\n## Get started\n\n- Install it\n- Make a custom Input component\n- The end\n\n## Install\n\n```\nnpm install svelte-validify\n```\n\n## Making an Input Component\n\nYour input component must implement `handleChange` `handleBlur` `errors` and `value` to function properly.\n\nOnce you add these methods to your component, form validation will be taken care of for you. \n\nWhen a user has an invalid field, the error will not be shown until blurring the field, or someone submits the form.\n\nAfter this happens, validation runs onChange for the best UX possible.\n\n```svelte\n\u003cscript type=\"ts\"\u003e\n  import { useField } from \"svelte-validify\";\n  import type { RuleFn } from \"svelte-validify\";\n\n  export let name: string;\n  export let rules: RuleFn[] = [];\n\n  let field = useField({ name, rules });\n\u003c/script\u003e\n\n\u003cdiv\u003e\n  {#if $field.errors.length}\n    \u003cdiv\u003e{$field.errors[0]}\u003c/div\u003e\n  {/if}\n  \u003cinput\n    type=\"text\"\n    {name}\n    value={$field.value}\n    on:blur={$field.handleBlur}\n    on:keyup={(e) =\u003e $field.handleChange(e.currentTarget.value)}\n  /\u003e\n\u003c/div\u003e\n\n```\n\n## Using a Form\n\nImport the Form component, and createForm method from the library.\n\nInitialize the form with a few values if you'd like.\n\nRender inputs, and set custom rules. You can see this in action by running the example folder :)\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { Form, createForm } from \"svelte-validify\";\n  import Input from \"./Input.svelte\";\n\n  // Always create a form, and add some optional values\n  let form = createForm({ name: \"Bob\", email: \"test\" });\n\n  // Rules run at the correct times, on blur, or onChange after initial blur / submit\n  // you don't have to think about it!\n  let isRequired = (value) =\u003e (!value ? \"Field is required\" : \"\");\n\u003c/script\u003e\n\n\u003cForm {form} onSubmit={() =\u003e console.log($form.values)}\u003e\n  \u003cInput name=\"name\" rules={[isRequired]} /\u003e\n  \u003cInput name=\"email\" rules={[isRequired]} /\u003e\n  \u003cbutton type=\"submit\" disabled={$form.disabled}\u003eHello!\u003c/button\u003e\n\u003c/Form\u003e\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Fsvelte-validify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzackify%2Fsvelte-validify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Fsvelte-validify/lists"}