Lightweight plugin to track form changes and prevents loosing unsaved edits. No dependencies.
You can get it via npm
:
npm install --save dirty-form
Or yarn
:
yarn add dirty-form
import DirtyForm from 'dirty-form'
const form = document.querySelector('#form')
new DirtyForm(form)
This will warn users before they navigate away from a page with unsaved changes.
const form = document.getElementById("form")
const dirtyForm = new DirtyForm(form, {
onDirty: () => {
form.querySelector("input[type=submit]").removeAttribute("disabled")
},
})
form.addEventListener("submit", () => {
dirtyForm.disconnect()
})
<form action="/submit" method="post" id="form">
<input type="text" name="name">
<input type="submit" value="Submit" disabled>
</form>
Add data-dirty-form="false"
to fields you want to exclude:
<input type="text" name="search" data-dirty-form="false">
new DirtyForm(form, {
// Custom message shown to users
message: 'You have unsaved changes. Are you sure you want to leave?',
// Callback fired once when form becomes dirty
onDirty: () => { /* ... */ },
// Callback fired before Turbo navigation (if using Turbo)
beforeLeave: () => { /* ... */ },
// Disable navigation prevention (only track dirty state)
skipLeavingTracking: true,
})
disconnect()
- Remove all event listeners and stop tracking