form-spine v0.9.707

Form Spine

Form Spine is a lightweight (~4kb, ~1.2kb gzipped) JavaScript form library with validation, error handling and fetch (Polyfilled with developit/unfetch)

It's promise-based, which makes running scripts on error/success very easy.

Table of Contents

• Getting Started
• Usage
• API
• Examples
• Slim Spine
• Inspiration

Getting Started

Install Instructions

Adding Form Spine to your project requires NPM. Optinally you could use Yarn.

Run the following command in your project root:

npm install form-spine --save

Or with Yarn:

yarn add form-spine

Using In Your Project

Using Rollup or WebPack (or another module bundler), you can do like this:

// ES6
import FormSpine from "form-spine";

// CommonJS
var FormSpine = require("form-spine");

Remember to polyfill Fetch

require("unfetch/polyfill");

Usage

Vue.js example

let formFields = {
    todo_text: {
        required: true,
        max_length: 50
    }
};

new Vue({
    el: "#app",
    data: {
        form: new FormSpine('/create-todo', formFields)
    },
    
    methods: {
        submit: function() {
            this.form.post().then(() => alert('Done!'));
        }
    }
});

API

The FormSpine Class

The FormSpine class is the backbone of Form Spine and the class you'll be using.

Methods

Parameters

FormSpine options parameters

url REQUIRED

The 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.

fields REQUIRED

The 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)

Example:

let fields = {
    username: {
        required: true
    },
    
    password: {
        required: true,
        min_length: 6,
        must_match: "password_confirmation"
    },
    
    password_confirmation: {
        required: true
    }
};

// Init form
let formObject = new FormSpine('/submit', fields);

Possible field attributes are:

customMessages OPTIONAL

This 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.

Example (Using defaults):

let customMessages = {
    checked:      "The :field must be checked.",
    regex:        "The :field field is invalid.",
    required:     "The :field field is required.",
    no_digits:    "The :field field may not contain digits.",
    only_digits:  "The :field field may only contain digits.",
    must_match:   "The :field field match the :must_match field.",
    min_length:   "The :field field must be at least :min_length characters.",
    max_length:   "The :field field must not be longer than :max_length characters."
};

// Init form
let formObject = new FormSpine('/submit', {}, { messages: customMessages });

Examples

Vue Demo Preact Demo

Slim Spine

Don't care about client-side validation, and does every byte count? How about using Slim Spine?

It's a ~0.9kb version of Form Spine, without the Validation library. It still handles errors, but will not validate fields.

Get Slim Spine here <-- COMING SOON

Inspiration

I 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.

Form Spine is inspired heavily on laracasts/vue-forms

If you're into learning, you should really go signup at Laracasts

Build scripts (and more) are heavily based on developit/unfetch.