Solution 1 :

try this

 var isDirty = $("form").dirtyForms('isDirty');

if (isDirty) {
  console.log('form is dirty');
   result = window.confirm('You forgot to save your details. If you leave now, they will be lost forever.');
     //implement logic
// of code

Problem :

My page has a list of forms. Each form will be dynamically built by D3 when the user clicks on the form name in the list. Below is the code:

$(document).ready(function() {

  // display corresponding form for each click
  d3.selectAll(".form-name").on("click", function() {
    // check if the current form is dirty first
    var isDirty = $(document.querySelector('#main-part form')).dirtyForms('isDirty');

    if (isDirty) {
      console.log('form is dirty');
    	// display confirmation dialog

    } else {
      console.log('form is NOT dirty');

function buildForm(id) {
  var formId = "form_" + id;
  var myform ="#main-part")
    .attr("id", formId);

  myform.append("span").text("Feedback for " + formId);
  // Appending up and down vote radio button
  var radio_groups = myform
    .attr('class', 'form-group');

  // Radio for upvote
  var radio_grp_chk = radio_groups
    .attr('class', 'form-check form-check-inline upvote');
    .attr('class', 'form-check-input')
    .attr('type', 'radio')
    .attr('name', 'voting-radio')
    .attr('value', 'thumbup')
    .attr('required', '');

  // Radio for downvote
  var radio_grp_chk2 = radio_groups
    .attr('class', 'form-check form-check-inline downvote');
    .attr('class', 'form-check-input')
    .attr('type', 'radio')
    .attr('name', 'voting-radio')
    .attr('value', 'thumbdown')
    .attr('required', '');

  // Appending feedback text area
  var text_group = myform.append('div').attr('class', 'form-group');
    .attr('for', 'feedback-txt')

    .attr('class', 'form-control feedback-text')
    .attr('id', 'feedback-text')
    .attr('placeholder', 'Enter...');

  // Submit button
    .attr('type', 'submit')
    .attr('class', 'btn btn-primary rating-btn')
    .attr('id', 'submit-form')

  // Initialize dirty form
  $("#" + formId).dirtyForms({
    dialog: {
      title: 'Wait!'
    message: 'You forgot to save your details. If you leave now, they will be lost forever.'

  // Bind click event on button"#submit-form").on("click", function() {
    // validate all forms:
    var form = $('#main-part form')[0];
    var valid = form.checkValidity();

    if (valid) {
      // Perform submission
      console.log("Form submitted!");

      // set form status back to clean
      $("#" + formId).dirtyForms('setClean');
<!DOCTYPE html>

  <!-- bootstrap -->
  <link rel="stylesheet" href="" crossorigin="anonymous">

<body style="padding:3%;">
  <div class="container-fluid">
    <div class="row">
      <div id="form-list" class="col-3">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr class="form-name" id="A">
                <td>Form A</td>
              <tr class="form-name" id="B">
                <td>Form B</td>
              <tr class="form-name" id="C">
                <td>Form C</td>


      <div id="main-part" class="col-9">


  <script src=""></script>
  <!-- jQuery -->
  <script src="" crossorigin="anonymous"></script>
  <script type="text/javascript" src="//"></script>

I need to add a reminder for the user if they forget to submit the form (if the form is dirty) before they click on another form. It can be a popup to let the user choose either to continue (and build the next form) or cancel (return to the current incomplete form).

I have tried to look at the beforeunload feature but it works only when the page is reloaded. In my code, when a form is dirty and user clicks another form, I can console.log('form is dirty');

How do I configure this? I’m using jQuery Dirtyforms


Comment posted by hydradon

Thanks for your response. The

Comment posted by Sven.hig

I have updated my answer you can check it out and see if it works for you