dirrty   

dirrty is a lightweight jquery plugin you can use to detect if the fields of a form had been modified.

If a field has been modified then we say the form is dirty. With this plugin you can:

  • Detect the moment when the form gets dirty, and trigger a custom event, for example enable a "save changes" button
  • Detect the moment when the form gets clean again, and trigger a custom event, for example disable the "save changes" button, cause is not necesary
  • Promt the user to save changes before leaving if the form is dirty

Usage:

$("#form-id").dirrty();

 

Setting up:

You can setup the pluging's options like this:

$("#form-id").dirrty({
  preventLeaving: true,
  leavingMessage: 'message',
  onDirty: onDirtyHandler,
  onClean: onCleanHandler,
});

 

Available options:
option description values
preventLeaving Whether of not to show a warning when the user tries to leave the page with a dirty form boolean
leavingMessage Message to show when user tries to leave with a dirty form string
onDirty Function to be triggered when the form gets dirty function
onClean Function to be triggered when the form gets clean again function

 

Demo

Kissed Britney?

Clean

 

Installation

Clone the repo into your project

git clone https://github.com/rubentd/dirrty.git

Or install using bower

bower install --save dirrty

Then include the references to js file in your html:

<script type="text/javascript" src="bower_components/dirrty/dist/jquery.dirrty.js"></script>

 

If you liked this plugin, don't forget to give me a star in Github. And check out my blog for more javascript related content.