{"id":13554241,"url":"https://github.com/spatie/form-backend-validation","last_synced_at":"2025-04-03T06:31:19.383Z","repository":{"id":50262824,"uuid":"77405165","full_name":"spatie/form-backend-validation","owner":"spatie","description":"An easy way to validate forms using back end logic","archived":true,"fork":false,"pushed_at":"2022-03-21T12:58:53.000Z","size":129,"stargazers_count":787,"open_issues_count":0,"forks_count":50,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-23T16:01:35.753Z","etag":null,"topics":["form","javascript","validation","vue"],"latest_commit_sha":null,"homepage":"https://spatie.be/opensource/javascript","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/spatie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-26T20:21:47.000Z","updated_at":"2025-03-15T20:58:35.000Z","dependencies_parsed_at":"2022-08-29T22:21:32.736Z","dependency_job_id":null,"html_url":"https://github.com/spatie/form-backend-validation","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fform-backend-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fform-backend-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fform-backend-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fform-backend-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spatie","download_url":"https://codeload.github.com/spatie/form-backend-validation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246948003,"owners_count":20859360,"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":["form","javascript","validation","vue"],"created_at":"2024-08-01T12:02:42.930Z","updated_at":"2025-04-03T06:31:19.084Z","avatar_url":"https://github.com/spatie.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","javascript"],"sub_categories":[],"readme":"\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/support-ukraine.svg?t=1\" /\u003e](https://supportukrainenow.org)\n\n# An easy way to validate forms using back end logic\n\n[![Latest Version on NPM](https://img.shields.io/npm/v/form-backend-validation.svg?style=flat-square)](https://npmjs.com/package/form-backend-validation)\n[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)\n[![Build Status](https://img.shields.io/travis/spatie/form-backend-validation/master.svg?style=flat-square)](https://travis-ci.org/spatie/form-backend-validation)\n[![npm](https://img.shields.io/npm/dt/form-backend-validation.svg?style=flat-square)](https://npmjs.com/package/form-backend-validation)\n\nWouldn't it be great if you could just use your back end to validate forms on the front end? This package provides a `Form` class that does exactly that. It can post itself to a configured endpoint and manage errors. The class is meant to be used with a Laravel back end.\n\nTake a look at the [usage section](#usage) to view a detailed example on how to use it.\n\nThe code of this package is based on the [Object-Oriented Forms lesson](https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19) in the [Vue 2.0 series](https://laracasts.com/series/learn-vue-2-step-by-step/) on [Laracasts](https://laracasts.com/).\n\n## Support us\n\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/form-backend-validation.jpg?t=1\" width=\"419px\" /\u003e](https://spatie.be/github-ad-click/form-backend-validation)\n\nWe invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).\n\nWe highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).\n\n## Install\n\nYou can install the package via yarn (or npm):\n\n```bash\nyarn add form-backend-validation\n```\n\nBy default, this package expects `axios` to be installed (unless you're using your own http library, see the [Options](#options) section for that).\n\n```bash\nyarn add axios\n```\n\n## Usage\n\nYou can find an example implementation with Laravel and Vue in the [spatie/form-backend-validation-example-app repo](https://github.com/spatie/form-backend-validation-example-app).\n\n![Screenshot](https://raw.githubusercontent.com/spatie/form-backend-validation-example-app/master/public/images/screenshot.png)\n\n```js\nimport Form from 'form-backend-validation';\n\n// Instantiate a form class with some values\nconst form = new Form({\n    field1: 'value 1',\n    field2: 'value 2',\n    person: {\n        first_name: 'John',\n        last_name: 'Doe',\n    },\n});\n\n// A form can also be initiated with an array\nconst form = new Form(['field1', 'field2']);\n\n// Submit the form, you can also use `.put`, `.patch` and `.delete`\nform.post(anUrl)\n   .then(response =\u003e ...)\n   .catch(response =\u003e ...);\n\n// Returns true if request is being executed\nform.processing;\n\n// If there were any validation errors, you easily access them\n\n// Example error response (json)\n{\n    \"errors\": {\n        \"field1\": ['Value is required'],\n        \"field2\": ['Value is required']\n    }\n}\n\n// Returns an object in which the keys are the field names\n// and the values array with error message sent by the server\nform.errors.all();\n\n// Returns true if there were any error\nform.errors.any();\n\n// Returns object with errors for the specified keys in array.\nform.errors.any(keys);\n\n// Returns true if there is an error for the given field name or object\nform.errors.has(key);\n\n// Returns the first error for the given field name\nform.errors.first(key);\n\n// Returns an array with errors for the given field name\nform.errors.get(key);\n\n// Shortcut for getting the first error for the given field name\nform.getError(key);\n\n// Clear all errors\nform.errors.clear();\n\n// Clear the error of the given field name or all errors on the given object\nform.errors.clear(key);\n\n// Returns an object containing fields based on the given array of field names\nform.only(keys);\n\n// Reset the values of the form to those passed to the constructor\nform.reset();\n\n// Set the values which should be used when calling reset()\nform.setInitialValues();\n\n// Populate a form after its instantiation, the populated fields will override the initial fields\n// Fields not present at instantiation will not be populated\nconst form = new Form({\n    field1: '',\n    field2: '',\n});\n\nform.populate({\n    field1: 'foo',\n    field2: 'bar',\n});\n\n```\n\n### Options\n\nThe `Form` class accepts a second `options` parameter.\n\n```js\nconst form = new Form({\n    field1: 'value 1',\n    field2: 'value 2',\n}, {\n    resetOnSuccess: false,\n});\n```\n\nYou can also pass options via a `withOptions` method (this example uses the `create` factory method.\n\n```\nconst form = Form.create()\n    .withOptions({ resetOnSuccess: false })\n    .withData({\n        field1: 'value 1',\n        field2: 'value 2',\n    });\n```\n\n#### `resetOnSuccess: bool`\n\nDefault: `true`. Set to `false` if you don't want the form to reset to its original values after a succesful submit.\n\n#### `http: Object`\n\nBy default this library uses `axios` for http request. If you want, you can roll with your own http library (or your own axios instance).\n\n*Advanced!* Pass a custom http library object. Your http library needs to adhere to the following interface for any http method you're using:\n\n```ts\nmethod(url: string, data: Object): Promise\u003cResponse\u003e\n```\n\nSupported http methods are `get`, `delete`, `head`, `post`, `put` \u0026 `patch`.\n\nIf you want to see how the http library is used internally, refer to the `Form` class' `submit` method.\n\n### Working with files\n\nThe form handles file inputs too. The data is then sent as `FormData`, which means it's encoded as `multipart/form-data`.\n\nSome frameworks (like Laravel, Symfony) can't handle these incoming requests through other methods than `POST`, so you might need to take measures to work around this limitation. In Laravel or Symfony, that would mean adding a hidden `_method` field to your form containing the desired HTTP verb.\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Testing\n\n``` bash\n$ npm run test\n```\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.\n\n## Security\n\nIf you discover any security related issues, please contact [Freek Van der Herten](https://github.com/freekmurze) instead of using the issue tracker.\n\n## Postcardware\n\nYou're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.\n\nOur address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.\n\nWe publish all received postcards [on our company website](https://spatie.be/en/opensource/postcards).\n\n## Credits\n\n- [Freek Van der Herten](https://github.com/freekmurze)\n- [Sebastian De Deyne](https://github.com/sebastiandedeyne)\n- [All Contributors](../../contributors)\n\nInitial code of this package was copied from [Jeffrey Way](https://twitter.com/jeffrey_way)'s [Vue-Forms repo](https://github.com/laracasts/Vue-Forms/).\n\nThe idea to go about this way of validating forms comes from [Laravel Spark](https://spark.laravel.com/).\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Fform-backend-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspatie%2Fform-backend-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Fform-backend-validation/lists"}