https://github.com/lookfirst/dirtyform
track changes to form elements
https://github.com/lookfirst/dirtyform
Last synced: 12 months ago
JSON representation
track changes to form elements
- Host: GitHub
- URL: https://github.com/lookfirst/dirtyform
- Owner: lookfirst
- License: mit
- Created: 2012-10-19T18:10:24.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2013-06-09T18:25:33.000Z (about 13 years ago)
- Last Synced: 2025-03-16T22:37:40.703Z (over 1 year ago)
- Language: CoffeeScript
- Size: 129 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT.txt
Awesome Lists containing this project
README
DirtyForm
=========
Good UX design dictates that a ```Save``` button is disabled until something changes or the data within a form is valid. This little class makes it easy to implement.
Usage
-----
Define a container to watch for changes in. If any form element (select, input, textarea, etc.) values within the container are modified from their original state, a ```dirty``` function is called. If all of the elements return to their original state, then the ```clean``` function is called.
There is also a ```both``` function which will be called in either case and it is possible to check if things are dirty or not with ```dirtyForm.isDirty```.
Contrived example to get the point across
-----------------------------------------
``` html
```
``` coffeescript
DirtyForm = require('app/DirtyForm')
formdiv = $('#formdiv')
saveButton = $('#saveButton', formdiv)
enableButton = (obj) ->
obj.removeClass('disabled').removeAttr('disabled') if obj
disableButton = (obj) ->
obj.addClass('disabled').attr('disabled', 'disabled') if obj
validate = (event, data) ->
if df.isDirty && $('#name', formdiv).val() && $('#age', formdiv).val() > 10
enableButton(saveButton)
else
disableButton(saveButton)
df = new DirtyForm
form: formdiv
both: (event, data) ->
validate(event, data)
```
Etc
---
The DirtyForm class is wrapped in [```simplified CommonJS wrapping```](http://requirejs.org/docs/whyamd.html#sugar) because that is what I use for my site.
DirtyForm depends on a recent version of jquery.
DirtyForm was heavily influenced by the [acvwilson dirty_form](https://github.com/acvwilson/dirty_form) project.