Phalange

Phalange is a lightweight (700 bytes gzipped) JavaScript form library with 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
• FormSpine (Phalange with validation)
• Inspiration

Getting Started

Install Instructions

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

Run the following command in your project root:

npm install phalange --save

Or with Yarn:

yarn add phalange

Using In Your Project

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

// ES6
import Phalange from "phalange";

// CommonJS
var Phalange = require("phalange");

Remember to polyfill Fetch

require("unfetch/polyfill");

It's also on unpkg:

<script src="//unpkg.com/phalange/dist/phalange.umd.js"></script>

<script>
var Phalange = phalange; // to fix name in UMD package, for consistency.

new Phalange('/', {});
</script>

Please notice that the fetch polyfill is NOT included in the UMD version.

Usage

Vue.js example

let fields = {
    todo_text: ""
};

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

API

The Phalange Class

The Phalange class is the core of Phalange and the class you'll be using.

Methods

| Method | Description | Parameters | | ------ | ----------- | ---------- | | post | Sends a POST request to the url specified in the Form object | | | delete | Sends a DELETE/DESTROY request to the url specified in the Form object | | | put | Sends a PUT request to the url specified in the Form object | | | 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') |

Parameters

| Name | Type | Description | Required | Default | | ---- |----- | ----------- |--------- | ------- | | url | string | The url that requests should be send to. | true | '' | | fields | object | The fields in the form. | true | {} | | options | object | An object with additional options | false | {} |

Phalange options parameters

| Name | Type | Description | Required | Default | | ---- |----- | ----------- |--------- | ------- | | messages | object | Custom error validation messages. | false | {} | | resetOnSuccess | boolean | Determines if form fields should be cleared on success. | false | false | | headers | object | Adds custom headers to each request | false | {} |

url [REQUIRED]

The url parameter is the first of three parameters, and it defines which url to send requests to upon submitting. 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 an object of keys with a value (the default input value)

Example:

let fields = {
    username: "",
    password: ""
};

// Init form
let formObject = new Phalange('/login', fields);

Examples

Vue Demo TODO

Preact Demo TODO

Angular Demo TODO

FormSpine

Want client-side validation? Try FormSpine?

It's a larger version of Phalange, with a Validation library. It's almost the same API, but with more functionality.

Get FormSpine 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.

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