TrackDirty jQuery Plugin Example

This page shows an example of using the TrackDirty jQuery plugin with a typical form.

Make changes to form fields to see them automatically highlighted as dirty. The plugin automatically adds a CSS class name to dirty elements so you easily style them. You can optionally pass a callback function to find the target element to set the class name on if not the actual dirty element. You can also pass a callback function that will be called whenever a field is marked dirty.

To use the plugin on a page simply:

  1. Add a reference to jquery-1.4.2.js

    <script type="text/javascript" src="script/jquery-1.4.2.js"></script>

  2. Add a reference to jquery.TrackDirty.js

    <script type="text/javascript" src="script/jquery.TrackDirty.js"></script>

  3. Add a call to $("form").trackDirty() in your page's onload script to track dirty fields in all forms

    $(function() { $("form").trackDirty(); });

  4. Query dirty fields using the :dirty pseudo class

    $(":dirty")

View the page.js file attached to this page for more usage examples.

Personal Details
Contact Details
Home Address
This is a required field
indicates a required field