phalange v0.5.1
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 --saveOr with Yarn:
yarn add phalangeUsing 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.
7 years ago