Alert User If Data In Form Was Changed - jQuery Dirty

File Size: 58.7 KB
Views Total: 12873
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Alert User If Data In Form Was Changed - jQuery Dirty

The jQuery Dirty plugin detects if an HTML form is 'Dirty' and prompts the user to save changes before navigating away.

How to use it:

1. To use this plugin, include the jquery.dirty.js after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.dirty.js"></script>

2. Call the function on your HTML form and trigger a function when the form gets 'Dirty'.

<form action="#" id="form">
  Form Fields Here
  onDirty: function(){

3. Prevent the user from navigating away when there are unsaved changes on the page

  preventLeaving: true

4. Customize the alert message when the user tries to navigate away if the form is 'Dirty'.

  leavingMessage: "There are unsaved changes on this page which will be discarded if you continue."

5. Trigger a function when the form gets 'Clean'.

  onClean: function(){

6. API methods.

// detects if a form has been modified
// returns true or false

// detects if a form is Clean
// returns true or false

// refreshes events

// resets the form

// sets the state to Clean

// shows modified form fields




  • Add guard clause for callback functions

v0.8.3 (2021-02-15)

  • Updated version including some dependency updates and an infrastructure change to build npm packages via GitHub actions


  • Remove stopImmediatePropagation to prevent nuking other subscribers


  • Mark form as clean if initial values are restored

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