rubentd / dirrty

jquery plugin to detect if the fields of a form had been modified

dirrty

lightweight jquery plugin to detect if the fields of a form had been modified.
If a field has been modified then the form is dirrty

• Detect the moment when the form gets dirty, and trigger a custom event, for example enable a "save changes" button
• Detect the moment when the form gets clean again, and trigger a custom event, for example disable the "save changes" button, cause is not necesary
• Prompt the user to save changes before leaving if the form is dirty

The name comes from Christina Aguilera's 2002 song: https://www.youtube.com/watch?v=2xMWrKhLJq4

Usage

// this can be called on individual forms by id or on "form" to target all forms
// simultaneously
$('#form-id').dirrty({
  preventLeaving: false

  // this function is called when the form.trigger's "dirty"
}).on("dirty", function() {
  console.log("I'm dirty!")

  // this function is called when the form.trigger's "clean"
}).on("clean", function() {
  console.log("I'm clean!")
});

Options

name	description	default
preventLeaving	show a message when a user attempts to leave the page with a dirty form	true
leavingMessage	the message to show when a user tries leaving the page with a dirty form. Most modern browsers no long support setting a custom message and will show their own message regardless.	"You have unsaved changes"
onDirty	depricated - see change	function(){}
onClean	depricated - see change	function(){}

Methods

$("#form-id").dirrty("isDirty");

Lets you know if the form is dirty at a givent moment

Live Demo

dirrty's Issues

Marked as dirty merely by focus

I had an issue with fields being marked as dirty merely by focusing them. Not sure whether this is context dependent, but I'm using Bootstrap 3.

In the checkValues function, I fixed this by checking for initialValue being defined or not. If the field is clean, initialValue will have the value "undefined", hence triggering the field as dirty in the comparison

if($(this).val() != initialValue)

Checking for initialValue being undefined fixes this problem:

if($(this).val() != initialValue && typeof initialValue != "undefined")

Question : how to use it with x-editable

Anyone have use it with x-editable or similar plugin?
https://vitalets.github.io/x-editable/
I'm wondering what is the best approach to use dirrty for this kind of form...

How could I get only the changed fields?

I want this plugin to monitor if my form is dirty, but just submit the changed fields to the server.
How can I do this?

Question about alert message text

Hi,

I need to translate the alert dialog message.
Where are they set?

I only find a message inside the JS which is not corresponding
You have unsaved changes

VS what it is displayed

Do you want to leave this site.
Changes you made may not be saved.
Leave Stay (buttons)

Here is my actual code

$("#edit").dirrty().on("dirty", function(){
    $("#save").removeAttr("disabled");
    }).on("clean", function(){
    $("#save").attr("disabled", "disabled");
});

Thanks

get current input element on input element dirty

I have list of elements in the forms. When I listen the on dirty, can I get the current input element which got dirty.

Solution for an element that is triggered by a button

I have a textarea filled and cleared by the click of a button.
These cases where ignored by dirrty.

To fix the problem I'm adding .trigger('keyup')

original

$('#clear').on('click', function() {
  $("#mytextareaid").val('');
});

fixed

$('#clear').on('click', function() {
  $("#mytextareaid").val('').trigger('keyup');
});

Field select2 multiple : ignore

The data-is-dirrty value of Field select2 multiple is always true.

The solution I found to resolve
`

                                    checkValues: function(){
        var d = this;
        this.form.find("input, select, textarea").each( function(){
            var initialValue = $(this).attr("data-dirrty-initial-value");
            if($(this).val() != initialValue){
                $(this).attr("data-is-dirrty", "true");
            }else{
                $(this).attr("data-is-dirrty", "false");
            }
        });
        this.form.find("input[type=checkbox], input[type=radio]").each( function(){
            var initialValue = $(this).attr("data-dirrty-initial-value");
            if($(this).is(":checked") && initialValue != "checked"
                || !$(this).is(":checked") && initialValue == "checked"){
                $(this).attr("data-is-dirrty", "true");
            }else{
                $(this).attr("data-is-dirrty", "false");
            }
        });
                    this.form.find("input[type=search]").each( function(){

                        $(this).attr("data-is-dirrty", "false");
        });
        var isDirty = false;
        this.form.find("input, select, textarea").each( function(){
            if( $(this).attr("data-is-dirrty") == "true" ){
                isDirty = true;
            }
        });
        if(isDirty){
            d.setDirty();
        }else{
            d.setClean();
        }

        d.fireEvents();
    },`

Datepicker Clear button

Hi,

I'm using this datepicker https://github.com/uxsolutions/bootstrap-datepicker
If I enable the clear button setting clearBtn: true,
this is not triggering a change when I clear the value and not enabling the save button

Tag 0.2.0 dont reflect master

Please, create a new tag to fix -> $('form').dirrty('setClean');
A current version is outdated

Feature: ignore specific Field to get dirrty

I'm looking for a way to ignore a specific field to get dirrty.

Select2 chained dropdown investigation

How to reproduce:
have a chained dropdowns using Select2
have the option allowClear: true,
and .select2-single

Let say country, state, city
on page load no value selected
select a country, click on the clear
Now State and City are marked as dirrty, Country is marked as clear
the 3 fields should be marked as clean

How to use it with File upload ?

Is dirrty.js will work with input type file?

I'm using jquery.filer.js
the <input type="file" name="files[]">
once I have upload a file and remove the file it still getting data-is-dirrty="true"

Here is a demo of jquery.filer as the project is no longer available on Github... https://www.tutorialspoint.com/jquery/src/filer/index.htm

Thanks

how to manually set clean?

I looked at the source and there is a setClean function but I can't figure out how to call it. I tried to $('form').trigger('clean') and $('form').trigger('setClean') but they don't seem to do anything.

Multiple forms on same page submit will be considered as beforeunload

Let say I have two forms on the same page with different ids for the form and the submit
I edited both forms so they have both dirtty fields
If I click one of the submit button I will get beforeunload notification.

Any way to fix that?

Note:
I have redo my page and now it's working fine I'll close this for now as I don't know how to reproduce.

Feature: Ignore specific click to send alert

Is there any way to ignore the click of specific button so it's not sending an alert?

For example I have a form within this form I have a button that open a popup to add item to the list
and I don't want the user get notified if he click on that button

Also having an ignore class for a specific field can be usefull

set dirty on cloned input elements

I have form where a user can add more input elements. In the background i clone the input element and change id, name and value on the cloned input element.
After cloning i need to recall dirrty on the form to take into account the cloned input element. Problem is when another field was changed before the user clicks the add button, then i get unexepected results from isDirrty.
How would i add the cloned input elements to diirty? Only changing the data-dirrty-initial-value and data-is-dirrty attribute isn't enough.

How to add the detection to a tab?

I'm having 2 differents forms on tabs (bootstrap tabs)
tab1 = form1
tab2 = form2

Let say a user made a change on tab1 form and click on a tab2, I want to detect this even as a quit before saving.

What will be the best way to do it?

Set back the form to clean after posting the data

I made several tests and still have issue so I guess we need a clean function for this