Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rdiazv/jquery.form.serializer
Simple and powerful form serializations with jQuery
https://github.com/rdiazv/jquery.form.serializer
Last synced: about 2 months ago
JSON representation
Simple and powerful form serializations with jQuery
- Host: GitHub
- URL: https://github.com/rdiazv/jquery.form.serializer
- Owner: rdiazv
- License: mit
- Created: 2014-08-17T23:09:18.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2014-08-20T04:13:39.000Z (over 10 years ago)
- Last Synced: 2023-03-25T13:40:56.600Z (almost 2 years ago)
- Language: JavaScript
- Size: 426 KB
- Stars: 1
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# jQuery Form Validation
This jQuery extension provides an easy way to serialize HTML forms into JSON.
By default the serialization it's based on the submittable fields according to [W3C Successful controls](http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2), but this is easily customizable to fit your needs.
The following elements are always ignored:
* Elements without a `name` attribute.
* File inputs.
* Buttons.
## Installation
Include `jquery.form.serializer.min.js` after `jquery.js`.
```html
```
## Usage
Based on a form like this one:
```html
Chile
```
Serialize the form into JSON:
```javascript
$("#my-form").getSerializedForm();
// =>
{
token: "ABC",
user: {
name: "John Doe",
email: "[email protected]",
country: "CL"
}
}
```
## Submittable Fields
The submittable fields are initially selected using:
```javascript
$.jQueryFormSerializer.submittable = 'input, select, textarea';
```
The initial matched set it's reduced passing every function defined in `$.jQueryFormSerializer.filters` to the [filter function](http://api.jquery.com/filter/).
There are two default filters:
* `enabledOnly`: Disabled fields won't be serialized.
* `checkedOnly`: Only checked `input[type="checkbox"]` and `input[type="radio"]` will be serialized.
## Value Castings
Value castings are defined in `$.jQueryFormSerializer.castings`, and allows you to preprocess a field value before serializing it.
The only default value casting it's `booleanCheckbox`, that returns `true` or `false` on checkboxes without an explicit `value` attribute.
## Customization
Any option declared in `$.jQueryFormSerializer` can be overwritten if you need a global customization, or you can pass a hash of options to `getSerializedForm` that will [extend](http://api.jquery.com/jquery.extend/) `$.jQueryFormSerializer`, allowing to change the defaults only for one call.
### Examples
Always allow disabled fields to be serialized:
```javascript
$.jQueryFormSerializer.filters.enabledOnly = false;
```
Allow unchecked fields to be serialized only for this call:
```javascript
$("#my-form").getSerializedForm({
filters: {
checkedOnly: false
}
});
```
Add a new filter to avoid serializing fields with `.disabled`:
```javascript
$.jQueryFormSerializer.filters.disabledByClass = function() {
return !$(this).hasClass("disabled");
};
```
Add a new value casting for numeric fields:
```javascript
$("#my-form").getSerializedForm({
castings: {
numericField: function() {
if ($(this).hasClass("numeric")) {
return parseInt($(this).val());
}
}
}
});
```
The same applies to `filters`, `castings` and the `submittable` selector.
### Custom Controls
You can easily integrate any custom control for serialization. For example, given this custom control:
```html
```
```javascript
$.valHooks.custom_control = {
get: function(el) {
return $(el).data("custom-value");
},
set: function(el, value) {
return $(el).data({ "custom-value": value });
}
};
$.fn.customControl = function() {
return $(this).each(function() {
this.type = "custom_control";
// All your custom control magic...
});
};
$(function() {
$(".custom-control").customControl();
});
```
Add your custom control to the global configuration:
```javascript
$.jQueryFormSerializer.submittable += ", .custom-control"
```
And that's it!
```javascript
$("#my-form").getSerializedForm(); // => { "my-custom-control": "my value" }
$(".custom-control").addClass("disabled");
$("#my-form").getSerializedForm(); // => {}
```
## Tests
Run `npm install` and `npm test`, or if you don't have [Node.js](http://nodejs.org/) installed, open `./specs/index.html` on any browser.