{"id":21432112,"url":"https://github.com/lookfirst/dirtyform","last_synced_at":"2025-07-17T14:35:33.308Z","repository":{"id":5133193,"uuid":"6299429","full_name":"lookfirst/dirtyform","owner":"lookfirst","description":"track changes to form elements","archived":false,"fork":false,"pushed_at":"2013-06-09T18:25:33.000Z","size":132,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-16T22:37:40.703Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"marcoceppi/bootstrap-glyphicons","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lookfirst.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-10-19T18:10:24.000Z","updated_at":"2013-10-15T21:37:07.000Z","dependencies_parsed_at":"2022-07-05T09:39:28.304Z","dependency_job_id":null,"html_url":"https://github.com/lookfirst/dirtyform","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lookfirst/dirtyform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lookfirst%2Fdirtyform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lookfirst%2Fdirtyform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lookfirst%2Fdirtyform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lookfirst%2Fdirtyform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lookfirst","download_url":"https://codeload.github.com/lookfirst/dirtyform/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lookfirst%2Fdirtyform/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265617355,"owners_count":23799027,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T23:16:30.901Z","updated_at":"2025-07-17T14:35:33.282Z","avatar_url":"https://github.com/lookfirst.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"DirtyForm\n=========\n\nGood 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.\n\nUsage\n-----\n\nDefine 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.\n\nThere 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```.\n\nContrived example to get the point across\n-----------------------------------------\n\n``` html\n\n\u003cdiv id=\"formdiv\"\u003e\n    \u003cinput type=\"text\" name=\"name\" id=\"name\" /\u003e\n    \u003cinput type=\"text\" name=\"age\" id=\"age\" /\u003e\n    \u003cinput type=\"submit\" id=\"saveButton\" disabled=\"disabled\" class=\"btn disabled\" /\u003e\n\u003c/div\u003e\n```\n\n``` coffeescript\n\nDirtyForm = require('app/DirtyForm')\n\nformdiv = $('#formdiv')\nsaveButton = $('#saveButton', formdiv)\n\nenableButton = (obj) -\u003e\n    obj.removeClass('disabled').removeAttr('disabled') if obj\n\ndisableButton = (obj) -\u003e\n    obj.addClass('disabled').attr('disabled', 'disabled') if obj\n\nvalidate = (event, data) -\u003e\n    if df.isDirty \u0026\u0026 $('#name', formdiv).val() \u0026\u0026 $('#age', formdiv).val() \u003e 10\n        enableButton(saveButton)\n    else\n        disableButton(saveButton)\n\ndf = new DirtyForm\n    form: formdiv\n    both: (event, data) -\u003e\n        validate(event, data)\n```\n\nEtc\n---\n\nThe DirtyForm class is wrapped in [```simplified CommonJS wrapping```](http://requirejs.org/docs/whyamd.html#sugar) because that is what I use for my site.\n\nDirtyForm depends on a recent version of jquery.\n\nDirtyForm was heavily influenced by the [acvwilson dirty_form](https://github.com/acvwilson/dirty_form) project.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flookfirst%2Fdirtyform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flookfirst%2Fdirtyform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flookfirst%2Fdirtyform/lists"}