A lighter version of FormSpine, without validation.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.gitignore
.travis.yml
LICENSE.md
README.md
index-builder.js
logo.svg
package.json
rollup.config.js

README.md

Phalange Logo

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

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
resetOnSuccess boolean Determines if form fields should be cleared on success. false false
headers object Adds custom headers to each request false {}
url

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

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


Inspiration

Basically I figured that sometimes, client-side validation is not necessary, so to save bytes I decided to make Phalange; a smaller version of FormSpine.

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