Detect And Highlight Form Changes - jQuery dirtyFields

dirtyFields is a jQuery plugin that detects and indicates form field modifications as well as triggering custom events when the form or specific fields are modified. The plugin also has the ability to revert all of the form fields within the specified form or form field container back to their initial/saved value when needed.

How to use it:

1. Include the JavaScript file jquery.dirtyFields.packed.js after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.dirtyFields.packed.js"></script>

2. Call the function on the target form element.

<form name="demo" id="myForm" method="post">
  ...
</form>

$(document).ready(function() {
  $("#myForm").dirtyFields();
});

3. Highlight the modified form fields.

.dirtyField { ... }

.dirtyForm { ... }

.dirtyFields { ... }

.dirtyOption { ... }

4. All default options and callback functions.

$("#myForm").dirtyFields({

  // DOM element where you want to apply the dirty CSS class to
  checkboxRadioContext: "next-span",

  // apply the dirty options CSS class
  denoteDirtyOptions: false,

  // apply the dirty field CSS class
  denoteDirtyFields: true,

  // apply the dirty form CSS class
  denoteDirtyForm: false,

  // default dirty CSS classes
  dirtyFieldClass: "dirtyField",
  dirtyFieldsDataProperty:"dirtyFields",
  dirtyFormClass: "dirtyForm",
  dirtyOptionClass: "dirtyOption",

  // exclude CSS classes
  exclusionClass: "dirtyExclude",
     inclusionTextFields: [
         "input:not([type='button'], [type='submit'], [type='reset'], [type='hidden'])",
         "textarea"
     ],

  // fired on field change
  fieldChangeCallback: "",

  // specify form elements who are exceptions to the checkboxRadioContext, selectContextand textboxContext settings
  fieldOverrides: {none:"none"},

  // fired on form change
  formChangeCallback: "",

  // ignore fields
  ignoreCaseClass: "dirtyIgnoreCase",

  // previous value,Dirty or not
  preFieldChangeCallback: "",

  // DOM element where you want to apply the dirty select CSS class to
  selectContext: "id-for",

  // When the plugin is applied to the container element, or when the formSaved public function is executed, the current value or state of the form elements is stored "within" each element using the jQuery data() function. 
  // The name of the property where this value is stored is determined by this setting.
  startingValueDataProperty:"startingValue",

  // DOM element where you want to apply the dirty text bot CSS class to
  textboxContext: "id-for",

  // whether to trim text
  trimText: false

});

5. API methods.

// Adds the change event handler to any new form fields
$.fn.dirtyFields.configureField(Object,Container object,Context,Override target);

// Updates all of the initial/saved form field values and states to whatever the current values and states of the form fields are and marks the form fields and the form container as being clean (by removing all instances of the dirty field, dirty option, and dirty form CSS classes). 
// You would use this function anytime the current form values are saved to the database via AJAX. It takes one parameter: the form/form container as a jQuery object.
$.fn.dirtyFields.formSaved($("#myForm"));

// Returns the array containing all of the form field names currently marked as dirty.
$.fn.dirtyFields.getDirtyFieldNames($("#myForm"));

// Removes all instances of the dirty field, dirty option, and dirty form CSS classes from the specified container object (which is passed in as the sole parameter).
$.fn.dirtyFields.markContainerFieldsClean($("#myForm"));

// Reverts the specified checkbox or radio button field(s) back to their initial/saved state (checked or unchecked). 
// The plugin callbacks (unless bypassed) will be executed once for each checkbox/radio button you rollback.
$.fn.dirtyFields.rollbackCheckboxRadioState(Object(s),Container object,Process change);

// Reverts all of the form fields within the specified form or form field container back to their initial/saved value.
$.fn.dirtyFields.rollbackForm($("#myForm"));

// Reverts all of the select options
$.fn.dirtyFields.rollbackSelectState(Object(s),Container object,Process change);

// Reverts all of the text values
$.fn.dirtyFields.rollbackTextValue(Object(s),Container object,Process change);

// Sets the saved state of one or more checkboxes/radio button elements to whatever the current state of the element is. 
$.fn.dirtyFields.setStartingCheckboxRadioValue(Object(s),Container object);

// Sets the saved state of one or more <select> elements to whatever the current state of the element is. 
$.fn.dirtyFields.setStartingSelectValue(Object(s),Container object);

// Sets the saved state of one or more text inputs, file inputs, password inputs, and/or <textarea> elements to whatever the current state of the element is. 
$.fn.dirtyFields.setStartingTextValue(Object(s),Container object);

// Updates states of checkbox and radio inputs
$.fn.dirtyFields.updateCheckboxRadioState(Object(s),Container object);

// Updates form state
$.fn.dirtyFields.updateFormState(Container object);

// Updates select state
$.fn.dirtyFields.updateSelectState(Object(s),Container object);

// Updates text box state
$.fn.dirtyFields.updateTextState(Object(s),Container object);

---

This awesome jQuery plugin is developed by bcswartz. For more Advanced Usages, please check the demo page or visit the official website.