1.0.0 • Public • Published


Alerts the user when leaving a page without saving the changes.


Insert the JS file:

<script src="WarningBeforeUnload.js"></script>

And create a new instance of WarningBeforeUnload after the form and it’s contents are loaded:

  new WarningBeforeUnload();

Per default WarningBeforeUnload will apply to the first form tag in the document. You can customize this with configuration options.


Initialize the class with configuration options:

  const unloadMessage = new WarningBeforeUnload({
    selector: 'form#myForm',
Option Type Default Description
selector String form Set the HTML selector of your form.
form HTMLobject false Instead of using a selector you can set the HTML form object on your own.
onInput Boolean false Set to true if your want to apply warnings only when the user changed something on it’s own and to disable auto-detection for dynamic changes. This can be helpful if your form has changed dynamically after WarningBeforeUnload is loaded.
onSubmit Function EventListener Setup a callback function if you want to handle form submits on your own. To supress the warning on page leave set unloadMessage.preventUnload = false. For example: unloadMessage.onSubmit = unloadMessage.form.addEventListener('submit', () => unloadMessage.preventUnload = false)


Warning appears without changing anything in the form.

In most cases this is caused by dynamically changed values in the form. Try initializing WarningBeforeUnload after the page is fully loaded and/or set option onInput to true:

window.addEventListener('load', () => {
    new WarningBeforeUnload({
        onInput: true,

No warning appears.

If the content of the form is changed programmatically don’t use option onInput or set it to false. Also be sure to initialize WarningBeforeUnload after the page is fully loaded as described above.

Warnings are working only for the first form, but I have multiple.

Every form element needs it’s own instance of WarningBeforeUnload:

new WarningBeforeUnload({
    selector: 'form#myForm_1',

new WarningBeforeUnload({
    selector: 'form#myForm_2',

How can I customize the warning message?

This is not possible because of security reasons. WarningBeforeUnload relies on beforeunload and therefore it’s limited to the support of the browsers which don’t support a custom message anymore to prevent misusing it.

Package Sidebar


npm i warning-before-unload

Weekly Downloads






Unpacked Size

5.77 kB

Total Files


Last publish


  • app-architekt