Is there any way to check whether form is dirty or not in JavaScript?

Question

I have one form validator example in java script. In this case, Is there any way to check whether the form is dirty or not?

My platform is JavaScript

Please find corresponding sample below, and suggest any solution.

sample link

code snipet: i have used like:

if (name.value != name.defaultValue) { 
    alert("#name has changed"); 
    }

I want to check whether form is dirty or not. if the the form is dirty it has to show some popup. is ther any way to check this in javascript. — Kumaresan Sd, Oct 18 '18 at 11:46
@SumeshTG, in angular they have dirty variable which shows whether form is dirty or not. but i want to check this in javascript — Kumaresan Sd, Oct 18 '18 at 11:48
if any one of the form element has been touched or changed then the form is dirty — Kumaresan Sd, Oct 18 '18 at 12:10
@PoulBak, check this link https://www.w3schools.com/angular/angular_validation.asp — Kumaresan Sd, Oct 18 '18 at 12:11
@kumaresan_sd Refer https://jqueryvalidation.org/documentation/ . Share your form will help you to implement — Sumesh TG, Oct 18 '18 at 12:28
@SumeshTG, check this sample. i need like this. if you change input and them submit it show some message which show fomr dirty https://stackblitz.com/edit/m4tbav-d5xcfq?file=index.js — Kumaresan Sd, Oct 18 '18 at 12:32

score 2 · Answer 1 · 2018-10-18T11:47:40.230

2

You could use JQuery something like this...

var _isDirty = false;
$("input[type='text']").change(function(){
  _isDirty = true;
});

edited Oct 18 '18 at 11:47

answered Oct 18 '18 at 11:46

can you please provide any sample based on this – Kumaresan Sd Oct 18 '18 at 11:47

score 2 · Accepted Answer · answered Oct 24 '18 at 15:44

you have tags as kendo-ui-grid and kendo-validator so I suppose you are using kendo framework. if you want to see if the form is dirty you should check the viewModel in kendo way sample.

basically I've created a viewModel which is impements the ObservableObject interface and has a two way binding with the form's container. Every time you change something in the form the change event is fired in the viewModel which set a variable (dirty) as true.

var dirty = false;
var viewModel = new kendo.data.ObservableObject({
    fullname: "test"
});
viewModel.bind("change", function () {
    alert("changed");
    dirty = true;
});
kendo.bind($("#tickets"), viewModel);

Add all the fields you need to "watch" in the ObservableObject and set on their markup the property data-bind="value:fieldName"

Thank you but i did not want this answer i have already checked with this concept — Kumaresan Sd, Oct 25 '18 at 11:44

score 1 · Answer 3 · answered May 22 '23 at 23:46

1

Forms have an input event which acts for all child elements. So you can do:

document.querySelector('#my-form')
  .addEventListener('input', () => {
    // now you know that *something* changed inside
  })

answered May 22 '23 at 23:46

phil294

10,038
8
65
98

score 0 · Answer 4 · answered Oct 18 '18 at 12:31

You need a global boolean variable to remember when you edit anything in your form.

This variable should initially be false, then when the user edits an input, it changes to true. When you submit the form it changes back to false. Now you can check any time you want, whether the dirty variable is true or false.

Example code:

var dirty = false;

var inputs = document.querySelectorAll('input');
for (var i = 0;i < inputs.length)
{
    var input = inputs[i];
    input .addEventListener('input', function()
    {
        dirty = true;
    });
}

var form = document.forms[0];
form.addEventListener('submit, function()
{
    dirty = false;
}

Is there any way to check whether form is dirty or not in JavaScript?

4 Answers4