Are You Sure? - A light "dirty forms" JQuery Plugin!

Version: 1.6

Are-you-sure (jquery.are-you-sure.js) is simple light-weight "dirty form" JQuery Plugin for modern browsers. It helps prevent users from losing unsaved HTML Form changes by promoting the user to save/submit.

It's simple to use. Just add the following line to your page's ready function:

$('form').areYouSure();

Are-you-sure is a minimal plugin for modern browsers. There are plenty of "dirty forms" implementations out there, however they all seemed very heavyweight and over-engineered...! Most were written some time back and contain many 'hacks' to support legacy browsers, and/or rely on other fat dependencies such as FaceBox or jQueryUI. Are-you-sure solves this by doing this simple task in the simplest possible way.

Are-you-sure is as simple as it gets:

100% JS with zero dependencies and no external CSS.
Leverages onBeforeUnload to detect all page/browser exit events.
Works on forms of any size.
Correct state management - if a user edits then restores a value, the form is not considered dirty.
Easy to understand - less than a "terminal screen" of code!
Graceful degradation on legacy browsers (i.e. if you're running an old browser... remember to save :-)

###Basic Usage

$(function() {

    // Enable on all forms
    $('form').areYouSure();

    // Enable on selected forms
    $('form.dirty-check').areYouSure();

    // With a custom message
    $('form').areYouSure( {'message':'Your profile details are not saved!'} );

}

To ignore selected fields from the dirtyness check:

  <form id="myForm" name="myform" action="/post" method="post">

    Field 1: (checked)                  <input type="text" name="field1"> <br />
    Field 2: (ignored with attribute):  <input type="text" name="field2" data-ays-ignore="true"> <br />
    Field 3: (ignored with class):      <input type="text" name="field3" class="ays-ignore"> <br />

    <input type="submit" value="Submit">

  </form>

###Advanced Usage

$(function() {

    /*
    *  Make Are-You-Sure "silent" by disabling the warning message 
    *  (tracking/monitoring only mode). This option is useful when you wish to 
    *  use the dirty/save events and/or use the dirtyness tracking in your own 
    *  beforeunload handler.
    */
    $('form').areYouSure( {'silent':true} );
	

    /*
    *  Dirtyness Change Events
    *  Are-You-Sure fires off "dirty" and "clean" events when the form's state
    *  changes. You can bind() or on(), these events to implement your own form
    *  state logic.  A good example is enabling/disabling a Save button.
    *
    *  "this" refers to the form that fired the event.
    */
    $('form').on('dirty.areYouSure', function() {
      // Enable save button only as the form is dirty.
      $(this).find('input[type="submit"]').removeAttr('disabled');
    });
    $('form').on('clean.areYouSure', function() {
      // Form is clean so nothing to save - disable the save button.
      $(this).find('input[type="submit"]').attr('disabled', 'disabled');
    });

    /*
    *  It's easy to test if a form is dirty in your own code - just check
    *  to see if it has a "dirty" CSS class.
    */
    if ($('#my-form').hasClass('dirty')) {
        // Do something
    }

    /*
    *  If you're dynamically adding new fields/inputs, and would like to track 
    *  their state, trigger Are-You-Sure to rescan the form like this:
    */
    $('#my-form').trigger('rescan.areYouSure');

    /*
    *  If you'd like to reset/reinitialize the form's state as clean and 
    *  start tracking again from this new point onwards, trigger the
    *  reinitalize as follows. This is handy if say you've managing your
    *  own form save/submit via asyc AJAX.
    */
    $('#my-form').trigger('reinitialize.areYouSure');

    /*
    *  In some situations it may be desirable to look for other form
    *  changes such as adding/removing fields. This is useful for forms that
    *  can change their field count, such as address/phone contact forms.
    *  Form example, you might remove a phone number from a contact form
    *  but update nothing else. This should mark the form as dirty.
    */
    $('form').areYouSure( {'addRemoveFieldsMarksDirty':true} );
    
    /*
    *  If you need to force a re-check due to some change that isn't tracked 
    * automatically then you can trigger a form check as follows:
    */
    $('#my-form').trigger('checkForm.areYouSure');
	
    /*
    *  As an alternative to using events, you can pass in a custom change 
    *  function.
    */
    $('#my-adv-form').areYouSure({
        change: function() {
                  // Enable save button only if the form is dirty. i.e. something to save.
                  if ($(this).hasClass('dirty')) {
                    $(this).find('input[type="submit"]').removeAttr('disabled');
                  } else {
                    $(this).find('input[type="submit"]').attr('disabled', 'disabled');
                  }
                }
    });
    
}

The demo page shows the advanced usage options in more detail.

###Install Are-You-Sure is a light-weight jQuery plugin - it's a single standalone JavaScript file. You can download the jquery.are-you-sure.js file and include it in your page. Because it's so simple it seems a shame to add an extra browser round trip. It's recommended that you consider concatenating it with other common JS lib files, and/or even cut-n-pasting the code (and license header) into one of your existing JS files.

Are-you-sure may also be installed with Bower:

$ bower install jquery.are-you-sure

If you're using, or like, Are-you-sure make sure you star/watch this project so you can stay up-to-date with updates.

###Demo This demo page hosts a number of example forms.

###Known Issues & Limitations

The custom message option may not work on Firefox (Firefox bug 588292).
The windows.beforeunload event is not supported on current Opera (Feb 2013). This will change with their move to WebKit.

###Future The aim is to keep Are-you-sure simple and light. If you think you have a good idea which is aligned with this objective, please voice your thoughts in the issues list.

###Release History

2014-02-07 (1.6)

Add field count tracking (addRemoveFieldsMarksDirty) (contrib jonegerton)
Added event to manually trigger a form check/recheck (contrib jonegerton)
Thanks to jonegerton for the contribution!

2013-11-15 (1.5)

Added support for HTML5 input field types. (contrib albinsunnanbo)
New option to reinitialize/reset the dirty state. This is handy if you're managing your own async submit/save using AJAX. (contrib albinsunnanbo)
Thanks to albinsunnanbo for the contribution!

2013-10-2 (1.4)

Added dirty and clean "events"
Added an option to disable the message (dirty tracking only)
Added an option to rescan a form to look/detect any new fields

2013-07-24 - Minor fix - don't fail if form elements have no "name" attribute.

2013-05-14 - Added support for form reset buttons (contributed by codev).

2013-05-01 - Added support for hidden and disabled form fields.

2013-02-03 - Add demo page.

2013-01-28 - Add change event support and a demo page.

2012-10-26 - Use dashes in class names rather than camel case.

2012-10-24 - Initial public release.

###Prerequisites jQuery version 1.4.2 or higher. 1.10+ recommended.

###License The same as JQuery...

jQuery Plugin: Are-You-Sure (Dirty Form Detection)
https://github.com/codedance/jquery.AreYouSure/

Copyright (c) 2012-2014, Chris Dance - PaperCut Software http://www.papercut.com/
Dual licensed under the MIT or GPL Version 2 licenses.
http://jquery.org/license

lfjeff/jquery.AreYouSure

Are You Sure? - A light "dirty forms" JQuery Plugin!