Version: 1.9
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:
onBeforeUnload to detect all page/browser exit events.
$(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): <input type="text" name="field2" data-ays-ignore="true"> <br />
Field 3: (ignored): <input type="text" name="field3" class="ays-ignore"> <br />
<input type="submit" value="Submit">
</form>
$(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} );
/*
* Sometimes you may have advanced forms that change their state via
* custom JavaScript or 3rd-party component JavaScript. Are-You-Sure may
* not automatically detect these state changes. Examples include:
* - Updating a hidden input field via background JS.
* - Using a [rich WYSIWYG edit control](https://github.com/codedance/jquery.AreYouSure/issues/17).
* One solution is to manually 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');
}
}
});
/*
* Mixing in your own logic into the warning.
*/
$('#my-form').areYouSure( {'silent':true} );
$(window).on('beforeunload', function() {
isSunday = (0 == (new Date()).getDay());
if ($('#my-form').hasClass('dirty') && isSunday) {
return "Because it's Sunday, I'll be nice and let you know you forgot to save!";
}
}
}The demo page shows the advanced usage options in more detail.
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.
For experimental Mobile Safari support, also include ays-beforeunload-shim.js
(see Known Issues below).
Are-you-sure may also be installed with Bower:
$ bower install jquery.are-you-sureIf you're using, or like, Are-you-sure make sure you star/watch this project so you can stay up-to-date with updates.
This demo page hosts a number of example forms.
Are-you-sure has been tested on and fully supports the following browsers:
Experimental support is available on iOS and Opera via the beforeunload shim (see below).
The windows.beforeunload event is not supported on iOS (iPhone, iPad, and iPod). An
experimental shim offering partial beforeunload emulation is provided to help plug this gap.
It works by scanning the page for anchor links and augments the default behaviour to first
check with Are-you-sure before navigating away. To use, simply include
ays-beforeunload-shim.js in your page.
The custom message option may not work on Firefox (Firefox bug 588292).
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.
If possible, please submit your pull request against the most recent dev-* branch rather than master. This will make it easier to merge your code into the next planned release.
$ npm install
$ npm test2014-08-13 (1.9) - This is a minor bugfix release:
2014-06-22 (1.8) - This is a minor bugfix release:
2014-05-28 (1.7)
2014-02-07 (1.6)
addRemoveFieldsMarksDirty) (contrib jonegerton)2013-11-15 (1.5)
2013-10-2 (1.4)
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.
jQuery version 1.4.2 or higher. 2.0+ or 1.10+ recommended.
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