snippet.js

(function($) {
  var dirtyForm = {
    settings: {
      changedClassName: "changed",
      checkableSelector: ":radio, :checkbox",
      eventName: "change.dirty_form",
      eventBubbling: {
        preventDefault: function(){ return false; },
        stopPropagation: function(){ return false; },
        bubbles: true,
        cancelable: true
      }
    },
    utilities: {
      input: {
        sanitize: function(input){
          return input.is(dirtyForm.settings.checkableSelector) ?
            typeof(input.attr("checked")) == "undefined" ? false : input.attr("checked") :
            input.val();
        },
        reset: function(input){
          input.is(dirtyForm.settings.checkableSelector) ? 
            input.attr("checked", input.data("initial")) : 
            input.val(input.data("initial"));
          input.trigger(dirtyForm.settings.eventName);
        },
        dirtyCheck: function(event) {
          var input = $(event.target),
              form = input.parents(".dirtyForm"),
              initialValue = input.data("initial"),
              currentValue = dirtyForm.utilities.input.sanitize(input),
              options = event.data.settings;
          
          if(initialValue != currentValue) {
            dirtyForm.utilities.form.makeDirty(form, {input: input, initialValue: initialValue, currentValue: currentValue});
            input.addClass(options.changedClass);
          } else {
            input.removeClass(options.changedClass);
          }
          
          if(!event.data.inputs.filter("." + options.changedClass).size()){
            dirtyForm.utilities.form.makeClean(form, {input: input});
          }
        }
      },
      form: {
        makeDirty: function(form, data) {
          form
            .data("dirty", true)
            .trigger("dirty", $.extend({target: data.input, from: data.initialValue, to: data.currentValue}, dirtyForm.settings.eventBubbling));
        },
        makeClean: function(form, data) {
          form
            .data("dirty", false)
            .trigger("clean", $.extend({target: data.input}, dirtyForm.settings.eventBubbling));
        },
        setupAsDirty: function(form) {
          if(form.hasClass("dirtyForm")){
            form.unbind("dirty").unbind("clean");
            inputs.unbind(dirtyForm.settings.eventName);
          } else {
            form.addClass("dirtyForm");
          }
        }
      }
    }
  };
  
  $.fn.dirtyForm = function() {
    var settings = $.extend(
      {changedClass: dirtyForm.settings.changedClassName},
      arguments.length != 0 ? arguments[0] : {});
    
    return this.each(function(){
      var form = $(this),
          inputs = $(":input:not(:hidden,:submit,:password,:button)", form);
      
      dirtyForm.utilities.form.setupAsDirty(form);
      
      inputs.each(function(){
        $(this)
          .bind(dirtyForm.settings.eventName, {inputs: inputs, settings: settings}, dirtyForm.utilities.input.dirtyCheck)
          .data("initial", dirtyForm.utilities.input.sanitize($(this)));
      });
    });
  };
  
  $.fn.extend({
    dirty: function(fn) { return this.bind("dirty", fn); },
    clean: function(fn) { return this.bind("clean", fn); }
  });
})(jQuery);