Tainted fields

When the form data is modified, that piece of data, and in turn the form, is considered tainted, also known as “dirty” in other form libraries.

A Superforms feature is to prevent the user from losing data when accidentally navigating away from a tainted form.

Usage

const { form, enhance, tainted } = superForm(data.form, {
  taintedMessage: string | null = 'Do you want to leave this page? Changes you made may not be saved.'
})

Example

Try to modify the form below, then close the tab or hit the back button. A confirmation dialog should prevent you from losing the changes.

undefined

Untainting the form

When a validation result is returned for the form with a valid status set to true, the form is automatically marked as untainted by setting the $tainted store to undefined.

Try that by posting the form with valid values. The tainted message should not appear when browsing away from the page.

Tainted store

You can access the fields that are tainted through the $tainted store returned from superForm. When you modify the form fields above, you’ll see how the $tainted store reacts.

If you want to modify the form store without tainting any fields, you can update it with an extra option:

const { form } = superForm(data.form);

form.update(
  ($form) => {
    $form.name = "New name";
    return $form;
  },
  { taint: false }
);

The taint options are:

{ taint: boolean | 'untaint' | 'untaint-all' }

Which can be used to not only prevent tainting, but also untaint the modified field(s), or the whole form.