Javascript jquery表单验证，并在更改时提交_Javascript_Jquery_Forms_Jquery Plugins

Javascript jquery表单验证，并在更改时提交

javascript jquery forms jquery-plugins

Javascript jquery表单验证，并在更改时提交,javascript,jquery,forms,jquery-plugins,Javascript,Jquery,Forms,Jquery Plugins,我想让我网站上的所有设置表单确认更改已保存，就像facebook一样，如果你在表单中进行更改，然后尝试导航而不保存。因此，我禁用表单上的提交按钮，仅在值更改时启用。然后，我会提示用户在离开页面之前点击save，以防他们的更改挂起 var form = $('form.edit'); if(form.length > 0) { var orig_str = form.serialize(); $(':submit',form).attr('disabled','disabled');

我想让我网站上的所有设置表单确认更改已保存，就像facebook一样，如果你在表单中进行更改，然后尝试导航而不保存。因此，我禁用表单上的提交按钮，仅在值更改时启用。然后，我会提示用户在离开页面之前点击save，以防他们的更改挂起

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.';
}

其中一个表单需要一些额外的验证，我使用jQuery.validate库进行验证。e、 g.如果我想确保用户不能通过双击submit或类似的方式在意外情况下双重提交表单（实际验证是针对信用卡表单的，而不是这么简单）：

不幸的是，这两个位都试图绑定到submit按钮，它们相互干扰，使得submit按钮保持禁用状态，无论我做什么，都无法提交表单

是否有某种方法将验证链接在一起？或者以其他方式避免重新编写验证代码以重复“您是否更改了表单中的任何内容？”业务？

不确定您的解决方案出了什么问题，但这里有一个似乎有效的方法：

<!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>


可用形式
var my_form=$（“#my_form”）；
var original_form_values=my_form.serialize（）；
//如果#my_表单的内容自页面创建后已更改，则返回true
//上膛了。
函数MyFormChanged（）{
返回my\u form.serialize（）！=原始\u form\u值；
}
var=false；
//如果用户试图导航离开，则警告未保存的更改。
window.onbeforeunload=函数（）{
//不要停止提交。
如果（提交）{
返回；
}
如果（MyFormChanged（））{
返回“您有未保存的更改”；
}
//不提交，也没有改变形式；
//因此，用户可以安全地离开。
}
$（'my#u form'）。在（'submit'，function（）上{
//以防万一，提交按钮没有因为某种原因被禁用。
$（“#我的表单输入[type=submit]”）。attr（'disabled'，''）；
如果（！MyFormChanged（））{
返回false；
}
如果（提交）{
返回false；
}
提交=真；
返回true；
});
//切换提交按钮，具体取决于是否有任何要提交的更改。
$（“#我的表单输入”）。在（'change keyup'，function（）上{
如果（！提交&&MyFormChanged（））{
//启用提交按钮。
$（“#我的表单输入[type=submit]”）。removeAttr（'disabled'）；
}否则{
//禁用提交按钮。
$（“#我的表单输入[type=submit]”）。attr（'disabled'，''）；
}
});

jQuery没有

validate

方法，您使用的是哪个插件？

<!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>