jQuery проверить, изменилась ли форма HTML

Question

После очень полезных советов и советов, найденных здесь, я придумал этот фрагмент.

Я хотел бы проверить, были ли изменены поля формы. Если значение true, покажите значок предупреждения со всплывающей подсказкой на верхней странице страницы, если значение false или возвращается к значению поля по умолчанию, скройте значок предупреждения. С помощью этого сценария я мог бы это сделать, но я хотел бы знать, правильно ли это, и может ли он быть улучшен. Новичок здесь

В дополнение к тому, что уже сделано, я также хотел бы отметить поле, которое было изменено (пример: изменить класс метки поля).

$(':input').on('keyup keydown blur change', function() { 
    var isDirty = false; 

    $(':input').each(function() { 
     var $e = $(this); 

     if($e.is(':input[type=radio]') && $e.prop('defaultChecked') != $e.prop('checked')) { 
      isDirty = true; 

     } else if($e.is('select') && !this.options[this.selectedIndex].defaultSelected) { 
      isDirty = true; 

     } else if($e.is(':input[type=text], :input[type=url], :input[type=email], textarea') && $e.prop('defaultValue') != $e.val()) { 
      isDirty = true; 
     } 

     if(isDirty == true){  
      $("#toolbar-warning span").attr({ 
       'class': 'btn active hasTooltip icon-warning-2', 
       'data-original-title': 'has changes!' 
      }); 

     } else { 
      $("#toolbar-warning span").attr({ 
       'class': 'btn hasTooltip icon-warning-2', 
       'data-original-title': '' 
      });     
     } 

    }) 
}); 

Answer 1

Поскольку вы уже используете JQuery, попробуйте это

1) Для того, чтобы проверить, если изменилась форма использования .serialize():

var defaultForm = $unchangedForm.serialize(); 

function checkIfFormChanged($form) { 
    if(defaultForm !== $form.serialize()) 
     return true; 
    else 
     return false; 
    // You can also use a one-liner: return !(defaultForm !== $form.serialize()) 
} 

2) Для того, чтобы проверить, если значение по умолчанию элемент изменился, добавьте селектор change() для каждого элемента, который вы хотите проверить;

// This applies only to all the input elements 
// Save the default values of elements in an array. Do this for every input element 

var defaultValue[$myElem.attr('id')] = $myElem.val(); 
// more here 

$('input').change(function(){ 
    if(defaultValue[$(this).attr('id')] !== $(this).val()) // Value has changed 
     $(this).addClass('changedClass'); 
    else 
     $(this).removeClass('changedClass'); 
}); 

Answer 2

попробовать это (подсказка, изменять по мере необходимости):

перед любым взаимодействия с пользователем, форма установки

$('form input, form select, form textarea').each(function(){ this.backup = this.value; }); 
$('form').on('change keyup', 'input,select,textarea', function(){ 
    if (this.value !== this.backup) 
    { 
     this.backup = this.value; 
     this.form.isDirty = true; 
     $(this).addClass('field-dirty'); 
     $(this.form).addClass('form-dirty'); 
    } 
}); 

Примечание вам нужен способ, чтобы отдохнуть form.isDirty после некоторого пользователя взаимодействие, или, может быть, пользователь нажимает кнопку сброса, например

$('form').on('click', '[type="reset"]', function(){ 
    $('form input, form select, form textarea').each(function(){ this.backup = this.value; this.form.isDirty = false; }); 
});