\n\n# Form Spine\n\nForm Spine is a lightweight (`~4kb`, ~1.2kb gzipped) JavaScript form library with validation, error handling and fetch (Polyfilled with [developit/unfetch](https://github.com/developit/unfetch))\n\nIt's promise-based, which makes running scripts on error/success very easy.\n\n------------------------------------------------\n\n## Table of Contents\n\n* [Getting Started](#getting-started)\n* [Usage](#usage)\n* [API](#api)\n* [Examples](#examples)\n* [Slim Spine](#slim-spine)\n* [Inspiration](#inspiration)\n\n------------------------------------------------\n\n## Getting Started\n\n### Install Instructions\n\nAdding Form Spine to your project requires NPM. Optinally you could use [Yarn](https://yarnpkg.com).\n\nRun the following command in your project root:\n```bash\nnpm install form-spine --save\n```\n\nOr with Yarn:\n```bash\nyarn add form-spine\n```\n\n### Using In Your Project\n\nUsing Rollup or WebPack (or another module bundler), you can do like this: \n```js\n// ES6\nimport FormSpine from \"form-spine\";\n\n// CommonJS\nvar FormSpine = require(\"form-spine\");\n```\n\n#### Remember to polyfill `Fetch`\n```js\nrequire(\"unfetch/polyfill\");\n```\n------------------------------------------------\n\n## Usage\n\n### Vue.js example\n```js\nlet formFields = {\n todo_text: {\n required: true,\n max_length: 50\n }\n};\n\nnew Vue({\n el: \"#app\",\n data: {\n form: new FormSpine('/create-todo', formFields)\n },\n \n methods: {\n submit: function() {\n this.form.post().then(() => alert('Done!'));\n }\n }\n});\n```\n\n------------------------------------------------\n\n## API\n\n### The `FormSpine` Class\n\nThe `FormSpine` class is the backbone of Form Spine and the class you'll be using.\n\n#### Methods\n\n| Method | Description | Parameters |\n| ------ | ----------- | ---------- |\n| `post` | Sends a `POST` request to the url specified in the Form object | |\n| `delete` | Sends a `DELETE`/`DESTROY` request to the url specified in the Form object | |\n| `put` | Sends a `PUT` request to the url specified in the Form object | |\n| `submit` | Sends a request with the `type` specified, to the url specified in the Form object | `type`: Any request type possible in the fetch api. Example: `form.submit('GET')` |\n\n#### Parameters\n\n| Name | Type | Description | Required | Default |\n| ---- |----- | ----------- |--------- | ------- |\n| `url` | string | The url that requests should be send to. | true | `''` |\n| `fields` | object | The fields in the form. | true | `{}` |\n| `options` | object | An object with additional options | false | `{}` |\n\n##### FormSpine `options` parameters\n\n| Name | Type | Description | Required | Default |\n| ---- |----- | ----------- |--------- | ------- |\n| `messages` | object | Custom error validation messages. | false | `{}` |\n| `resetOnSuccess` | boolean | Determines if form fields should be cleared on success. | false | false |\n| `headers` | object | Adds custom headers to each request | false | `{}` |\n\n##### `url` [REQUIRED]\n\nThe `url` parameter is the first of three parameters, and it defines which url to send requests to upon `submit()`. It can be an absolute or relative url, such as: `/submit` or `https://your-site.com/send`.\n\n##### `fields` [REQUIRED]\n\nThe fields that you have in the form should be defined here as an object of objects, keyed by field name. This is also where you define validation rules (if any)\n\n**Example:**\n```js\nlet fields = {\n username: {\n required: true\n },\n \n password: {\n required: true,\n min_length: 6,\n must_match: \"password_confirmation\"\n },\n \n password_confirmation: {\n required: true\n }\n};\n\n// Init form\nlet formObject = new FormSpine('/submit', fields);\n```\n\n**Possible field attributes are:**\n\n| Name | Type | Description | Default |\n| ---- | ---- | ----------- | ------- |\n| `value` | string | The initial value of the field | `''` |\n| `name` | string | The field name used in error messages (:field) | object key name |\n| `required` | boolean | Validation rule: determines if field is required | `false` |\n| `min_length` | integer | Validation rule: sets a minimum length for the field | |\n| `max_length` | integer | Validation rule: sets a maximum length for the field | |\n| `no_digits` | boolean | Validation rule: may not contain digits | `false` |\n| `only_digits` | boolean | Validation rule: may only contain digits | `false` |\n| `checked` | boolean | Validation rule: has to be checked / be `true` (for checkbox/radio inputs) | `false` |\n| `must_match` | string | Validation rule: has to match another field (good for password confirmations) | `` |\n| `regex` | string/regex | Validation rule: must match regex | |\n\n##### `customMessages` [OPTIONAL]\n\nThis parameter is useful if you want to translate or change the validation messages. You have to pass in an object of strings with error messages.\n\n**Example (Using defaults):**\n```js\nlet customMessages = {\n checked: \"The :field must be checked.\",\n regex: \"The :field field is invalid.\",\n required: \"The :field field is required.\",\n no_digits: \"The :field field may not contain digits.\",\n only_digits: \"The :field field may only contain digits.\",\n must_match: \"The :field field match the :must_match field.\",\n min_length: \"The :field field must be at least :min_length characters.\",\n max_length: \"The :field field must not be longer than :max_length characters.\"\n};\n\n// Init form\nlet formObject = new FormSpine('/submit', {}, { messages: customMessages });\n```\n\n------------------------------------------------\n\n## Examples\n\n[Vue Demo](http://codepen.io/LasseRafn/pen/RpJMLY/)\n[Preact Demo](http://codepen.io/LasseRafn/pen/qrKMgG/)\n\n------------------------------------------------\n\n## Slim Spine\n\nDon't care about client-side validation, and does every byte count? How about using **Slim Spine**?\n\nIt's a `~0.9kb` version of Form Spine, without the Validation library. It still handles errors, but will not validate fields.\n\n[Get Slim Spine here](#) <-- COMING SOON\n\n------------------------------------------------\n\n## Inspiration\nI found myself creating similar classes for every new project I started, so I felt it was time to combine everything into a single class that I could use for almost all my projects. Of cause, in the nature of sharing, I decided to open source it.\n\nForm Spine is inspired heavily on [laracasts/vue-forms](https://github.com/laracasts/Vue-Forms)\n\nIf you're into learning, you should really go signup at [Laracasts](https://laracasts.com)\n\nBuild scripts (and more) are heavily based on [developit/unfetch](https://github.com/developit/unfetch). \n","maintainers":[{"name":"lasserafn","email":"lasserafn@gmail.com"}],"time":{"modified":"2022-06-18T03:02:02.759Z","created":"2017-03-15T16:21:33.245Z","0.5.0":"2017-03-15T16:21:33.245Z","0.5.1":"2017-03-15T16:39:11.636Z","0.5.2":"2017-03-15T16:41:04.226Z","0.5.3":"2017-03-16T16:43:15.601Z","0.5.4":"2017-03-16T16:46:16.836Z","0.5.5":"2017-03-16T16:48:19.670Z","0.5.56":"2017-03-16T17:21:41.585Z","0.5.57":"2017-03-16T18:14:45.909Z","0.5.58":"2017-03-16T18:16:07.632Z","0.5.59":"2017-03-16T18:42:20.395Z","0.5.6":"2017-03-16T19:00:35.643Z","0.5.601":"2017-03-16T19:02:50.134Z","0.5.602":"2017-03-16T19:09:42.584Z","0.5.603":"2017-03-16T19:12:36.384Z","0.5.604":"2017-03-16T19:18:58.327Z","0.5.605":"2017-03-16T19:22:23.967Z","0.5.606":"2017-03-16T19:40:18.669Z","0.5.607":"2017-03-16T19:47:45.686Z","0.5.608":"2017-03-16T19:50:48.247Z","0.5.609":"2017-03-16T19:54:27.083Z","0.6.0":"2017-03-16T20:38:48.466Z","0.6.16":"2017-03-17T12:42:33.602Z","0.6.2":"2017-03-17T12:59:11.526Z","0.6.21":"2017-03-17T13:02:26.228Z","0.6.22":"2017-03-17T13:07:13.251Z","0.6.23":"2017-03-17T13:10:53.997Z","0.6.5":"2017-03-17T13:16:36.648Z","0.7.0":"2017-03-17T13:23:01.212Z","0.7.5":"2017-03-17T14:09:46.704Z","0.7.6":"2017-03-17T14:24:24.934Z","0.8.0":"2017-03-17T14:31:35.136Z","0.8.2":"2017-03-17T15:03:35.196Z","0.8.3":"2017-03-17T15:07:23.967Z","0.8.4":"2017-03-17T15:20:32.664Z","0.8.5":"2017-03-17T15:23:32.599Z","0.8.6":"2017-03-17T23:06:22.955Z","0.8.9":"2017-03-18T00:25:28.144Z","0.9.1":"2017-03-18T00:41:26.177Z","0.9.3":"2017-03-18T14:07:12.370Z","0.9.35":"2017-03-18T14:14:54.101Z","0.9.41":"2017-03-18T14:25:36.665Z","0.9.45":"2017-03-18T14:55:16.722Z","0.9.46":"2017-03-20T12:38:47.039Z","0.9.48":"2017-03-20T13:24:50.560Z","0.9.61":"2017-03-21T13:36:06.531Z","0.9.615":"2017-03-21T13:44:42.746Z","0.9.617":"2017-03-21T13:51:05.253Z","0.9.6185":"2017-03-21T13:53:39.187Z","0.9.62":"2017-03-21T14:11:05.625Z","0.9.702":"2017-03-24T14:17:37.594Z","0.9.703":"2017-03-24T14:24:59.696Z","0.9.706":"2017-03-24T16:34:58.955Z","0.9.707":"2017-03-24T16:48:39.577Z"},"homepage":"https://github.com/LasseRafn/form-spine#readme","keywords":["form","validation","error handling","ajax","fetch"],"repository":{"type":"git","url":"git+https://github.com/LasseRafn/form-spine.git"},"author":{"name":"Lasse Rafn","email":"lasserafn@gmail.com"},"bugs":{"url":"https://github.com/LasseRafn/form-spine/issues"},"license":"MIT","readmeFilename":"README.md"}
![\"Form](\"https://cdn.rawgit.com/LasseRafn/form-spine/34b626b0/logo.svg\"){kind=logo}
\n![](\"https://img.shields.io/codecov/c/github/LasseRafn/form-spine.svg?style=flat-square\")
\n![](\"https://img.shields.io/travis/LasseRafn/form-spine.svg?style=flat-square\")
\n![](\"https://img.shields.io/npm/v/form-spine.svg?style=flat-square\")
\n![](\"https://img.shields.io/npm/dt/form-spine.svg?style=flat-square\")
\n