jquery表单验证和更改时提交
jquery表单验证和更改时提交
提问于 2012-09-27 07:27:27
我想让我网站上的所有设置表单确认更改已保存，就像facebook一样，如果您在表单中进行更改，然后尝试在不保存的情况下导航离开。所以我禁用了表单上的submit按钮，只有在值改变时才会启用。
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库。例如，如果我想确保用户不能通过双击submit或诸如此类的东西来再次提交表单(实际的验证是针对信用卡表单，而不是这么简单)：
$('form').validate({
submitHandler: function(form) {
$(':submit', form).attr('disabled','disabled');
form.submit();
}
});不幸的是，这两个bits都试图绑定到提交按钮，并且它们相互干扰，以至于无论我做什么，提交按钮都保持禁用状态，根本不可能提交表单。
有什么方法可以将验证链接在一起吗？或者以其他方式避免重写验证代码来重复“您是否更改了表单中的任何内容”这一问题？
回答 1
Stack Overflow用户
发布于 2012-09-27 10:34:45
不知道你的解决方案出了什么问题，但这里有一个似乎是有效的：
<!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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12611948
复制相关文章
相似问题
腾讯云开发者
