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.