dirty-form

A lightweight plugin to prevent losing data when editing forms. No dependencies.

It supports Trix editor and Turbolinks 5.

Install

You can get it via npm:

npm install dirty-form --save

Or yarn:

yarn add dirty-form

Setup

import DirtyForm from 'dirty-form'

let form = document.querySelector('#form')
new DirtyForm(form)

If you want to customize the message:

new DirtyForm(form, {
  message: 'You have unsaved changes. Are you sure you want to leave?',
})

Stimulus example

<%= form_with url: posts_path, html: { data: { controller: 'dirty-form' } } do |form| %>
  <%= form.text_field :title %>
<% end %>

// dirty_form_controller.js
import { Controller } from 'stimulus'
import DirtyForm from 'dirty-form'

export default class extends Controller {
  connect() {
    new DirtyForm(this.element)
  }
}