DirtyForms does not work on input hidden field

Question

I added dirtyForms to my forms to detect any changes on one of the input fields https://github.com/snikch/jquery.dirtyforms

HTML

<form>
  <input type="text" id="post" name="post">
    
  <input type="hidden" id="body" name="body">
  <froala-editor input="body">

  </froala-editor>
</form>

Javascript

$('document').ready(function() {
   $('form').dirtyForms();
});

However for input hidden seems like it doesn't add the dirty class, it only works for input type="text" . Any ideas on how to solve this problem?

Answer 1

Because it does not make sense when the user is not the one entering the data in the field.

You can do it yourself

SO does not allow the editor so I tested here

$('form').toggleClass('mydirty', e.target.textContent !== "");

tests the editor, it makes more sense than the input field

https://plungjan.name/SO/froala/

$('form').dirtyForms({
  helpers: [{
    isDirty: function($node, index) {
      if ($node.is('form')) {
        return $node.hasClass('mydirty');
      }
    }
  }]
});

var editor = new FroalaEditor('#froala')

$(document).on("keyup", function(e) {
  $('form').toggleClass('mydirty', e.target.textContent !== "");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.min.js"></script>
<form>
  <input type="text" id="post" name="post">

  <input type="hidden" id="body" name="body">
  <div id="froala" input="body">

  </div>
</form>