0

サイト全体のすべての設定フォームで変更が保存されていることを確認したいのですが、フォームに変更を加えてから保存せずに移動しようとすると、Facebookのようになります。そのため、フォームの送信ボタンを無効にして、値が変更された場合にのみ有効にします。次に、保留中の変更がある場合に備えて、ページを離れる前に[保存]をクリックするようにユーザーに促します。

var form = $('form.edit');
if(form.length > 0) {
  var orig_str = form.serialize();
  $(':submit',form).attr('disabled','disabled');
  form.on('change keyup', function(){
    if(form.serialize() == orig_str) {
      setConfirmUnload(false);
      $(':submit',form).attr('disabled','disabled');
    } else {
      setConfirmUnload(true);
      $(':submit',form).removeAttr('disabled')
    }
  });
  $('input[type=submit]').click(function(){ setConfirmUnload(false); });
}
function setConfirmUnload(on) {
  window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
  return 'If you navigate away from this page without saving your changes, they will be lost.';
}

これらのフォームの1つには、jQuery.validateライブラリを使用して行う追加の検証が必要です。たとえば、ユーザーが送信などをダブルクリックして誤ってフォームを二重送信できないようにしたい場合（問題の実際の検証はクレジットカードフォームであり、これは単純ではありません）：

$('form').validate({
  submitHandler: function(form) {
    $(':submit', form).attr('disabled','disabled');
    form.submit();
  }
});

残念ながら、両方のビットが送信ボタンにバインドしようとしていて、互いに干渉しているため、私が何をしても送信ボタンが無効のままになり、フォームを送信できなくなります。

検証を連鎖させる方法などはありますか？または、検証コードを書き直して「フォーム内の何かを変更しましたか」というビジネスを繰り返すことを回避する他の方法はありますか？

4

1 に答える 1

0

あなたのソリューションの何が問題なのかはわかりませんが、うまくいくように見えるものは次のとおりです。

<!doctype html><!-- HTML5 ROCKS -->
<html>
<head>
<title>Usable Forms</title>
</head>
<body>

<form id="my_form" action="http://www.google.com/search">
  <input type="text" name="query">
  <input type="submit" disabled>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script>
var my_form = $('#my_form');
var original_form_values = my_form.serialize();

// Returns true if the contents of #my_form have changed since the page was
// loaded.
function MyFormChanged() {
  return my_form.serialize() != original_form_values;
}

var submitting = false;

// Warn of unsaved changes if the user tries to navigate away.
window.onbeforeunload = function() {
  // Don't stop the submission.
  if (submitting) {
    return;
  }

  if (MyFormChanged()) {
    return 'You have unsaved changes.';
  }

  // Not submitting, nor has form changed;
  // therefore, it is safe for the user to navigate away.
}

$('#my_form').on('submit', function() {
  // Just in case submit button isn't disabled for some reason.
  $('#my_form input[type=submit]').attr('disabled', '');

  if (!MyFormChanged()) {
    return false;
  }

  if (submitting) {
    return false;
  }

  submitting = true;
  return true;
});

// Toggle submit button, depending on whether there are any changes to submit.
$('#my_form input').on('change keyup', function() {
  if (!submitting && MyFormChanged()) {
    // Enable submit button.
    $('#my_form input[type=submit]').removeAttr('disabled');
  } else {
    // Disable submit button.
    $('#my_form input[type=submit]').attr('disabled', '');
  }
});
</script>

</body>
</html>
于 2012-09-27T02:34:44.757 に答える