Формы Jquery: использование шаблона memento для создания системы уведомлений о грязной форме - существующие шаблоны?

Question

В настоящее время я создаю сценарий, который уведомит пользователя о том, что форма была изменена, прежде чем он уйдет со страницы (кстати, это приложение ASP.NET MVC).

Сначала я создал простой скрипт, который определяет, изменяет ли пользователь какие-либо входные данные, а затем немного переворачивает, чтобы обозначить форму как "Грязная".

Это оказалось слишком простым и не поддерживало расширенные входные данные формы, поэтому я попробовал подключить его дальше.

Лучшее, что я смог найти, это: http://mal.co.nz/code/jquery-dirty-forms/

Этот плагин для грязных форм jquery работает довольно хорошо, но все еще не хватает одной важной функции, которая мне нужна; возможность сравнивать предыдущие значения с тем, что ввел пользователь.

Например, если текстовое поле изначально имеет значение "Foo Bar", а пользователь изменяет это значение на "Foo", форма теперь грязная.

Когда пользователь изменяет значение этого текстового поля обратно на "Foo Bar", то с помощью этого плагина форма все еще "грязная", что неверно в соответствии с моими требованиями.

Нет подключаемого модуля, который делает то, что мне нужно, поэтому мне придется создавать свой собственный, что приводит меня к моему вопросу: каков наилучший способ создания такого рода функциональности?

Моя идея была такая:

• Поскольку это приложение MVC, я мог бы использовать следующую технологию:
  • JQuery
  • JSON
  • аннотации данных

Моя первоначальная мысль такова:

• Страница может иметь много форм; каждая форма будет иметь атрибут "isDirty", изначально установленный в false.
• Мне нужно будет сохранить исходное значение для каждого поля для сравнения (память)
• Каждое поле может иметь класс / флаг / атрибут "isDirty", который будет вызывать это поле "выделять и т. Д."
• Я мог бы хранить эти значения полей в структуре данных JSON NVP
• При отправке JavaScript будет проходить через эту строку JSON и просматривать значения оригинала, сравнивать с текущим значением, если оно недопустимо, тогда он добавит флаг "Грязный" (имя класса добавления) в текстовое поле, которое нарушает грязные правила.,

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

Кто-нибудь видел существующий шаблон, который похож на мою потребность? Моя идея звучит жизнеспособно? У кого-нибудь есть информация о лучшем маршруте, который я могу выбрать? Начало работы с примером кода, который я мог бы расширить, было бы фантастическим, псевдокод также был бы хорош.

[Обновить]

Кто-то только что сказал мне, что я пытаюсь сделать, это обычно называют "хранилищем форм", хотя Google не очень помогает с этим поисковым термином.

Этот скрипт, с которым я работал, похож на то, что я хочу сделать: (с этой страницы: http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-changes/)

 var formChanged = false;

$(document).ready(function() {
 $('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i)     {
      $(this).data('initial_value', $(this).val());
 });

 $('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() {
      if ($(this).val() != $(this).data('initial_value')) {
           handleFormChanged();
      }
 });

 $('#my_form .editable').bind('change paste', function() {
      handleFormChanged();
 });

 $('.navigation_link').bind("click", function () {
      return confirmNavigation();
 });
});

function handleFormChanged() {
 $('#save_or_update').attr("disabled", false);
 formChanged = true;
}

 function confirmNavigation() {
    if (formChanged) {
         return confirm('Are you sure? Your changes will be lost!');
    } else {
      return true;
    }
  }

Answer 1

Я нашел реализацию "хранилища форм", который мне больше нравится с этим плагином: https://github.com/bcswartz/dirtyFields-jQuery-Plugin

Документация доступна на сайте автора здесь: http://www.thoughtdelimited.org/dirtyFields/index.cfm

Разница в том, что плагин dirtyFields ТОЛЬКО обрабатывает грязные поля и формы. Плагин dirtyForms также пытается подключить событие onbeforeunload.

Answer 2

Dirty Forms version 2.0.0 теперь отслеживает состояние полей, когда $('#theform').dirtyForms() сначала называется. Поля считаются грязными, если они не соответствуют исходному состоянию, и чистыми, если они совпадают.

Это правда, пока вы не позвоните $('#theform').dirtyForms('setClean')после чего делается новый снимок текущего состояния и любые отклонения от этого нового состояния будут считаться грязными.