验证“取消”上的字段 单击Onbeforeunload事件JQUERY
Validate fields on "Cancel" Click of Onbeforeunload event JQUERY
我创建了一个函数,在其中绑定beforeunload
事件,并在页面首次加载时调用它。首先,当我单击"取消"时,beforeunload
事件再次触发,验证不起作用。我该如何完成这项工作?
function closeOrRefreshPageEvents() {
// This submit event is used ONLY to run the validation when the user clicks "Cancel" to stay on the page
$("#formUpdateInstallations").submit(function (event) {
$.validate({
form: '#formUpdateInstallations',
validateOnBlur: false, // disable validation when input looses focus
errorMessagePosition: 'top',
scrollToTopOnError: true, // Set this property to true if you have a long form
onError: function () {
alert('Validation failed');
},
onSuccess: function () {
alert('The form is valid!');
}
});
event.preventDefault();
});
$(window).bind('beforeunload', function () {
// Check if at least one Installation has been modified
var installationsChanged = false;
for (var z = 0; z < arrayOfInstallationsToUpdate.length; z++) {
if (arrayOfInstallationsToUpdate[z].modifiedRecord == "true") {
installationsChanged = true;
break;
}
}
// If any Installation has been changed then we warn the user, if he clicks "Cancel" then we submit the form only to run the Validation rules
if (installationsChanged) {
setTimeout(function () {
setTimeout(function () {
$("#formUpdateInstallations").submit();
}, 1000);
}, 1);
return 'You will loose your changes if you continue!';
}
});
}
事实上,
我不得不将验证块从提交事件处理程序移动到onbeforeunload事件处理程序中。 下面是正确的代码:
function closeOrRefreshPageEvents() {
// This submit event is used ONLY to run the validation when the user clicks "Cancel" to stay on the page
$("#formUpdateInstallations").submit(function (event) {
event.preventDefault();
});
$(window).bind('beforeunload', function () {
// Validate fields when user clicks "Cancel"
$.validate({
form: '#formUpdateInstallations',
validateOnBlur: false, // disable validation when input looses focus
errorMessagePosition: 'top',
scrollToTopOnError: true, // Set this property to true if you have a long form
onError: function () {
alert('Validation failed');
window.onbeforeunload = function () { return false; };
window.onbeforeunload = null;
},
onSuccess: function () {
alert('The form is valid!');
window.onbeforeunload = function () { return false; };
window.onbeforeunload = null;
}
});
// Check if at least one Installation has been modified
var installationsChanged = false;
for (var z = 0; z < arrayOfInstallationsToUpdate.length; z++) {
if (arrayOfInstallationsToUpdate[z].modifiedRecord == "true") {
installationsChanged = true;
break;
}
}
// If any Installation has been changed then we warn the user, if he clicks "Cancel" then we submit the form only to run the Validation rules
if (installationsChanged) {
setTimeout(function () {
setTimeout(function () {
window.onbeforeunload = function () { return false; };
$("#formUpdateInstallations").submit();
}, 500);
}, 1);
return 'You will loose your changes if you continue!';
}
});
}
相关文章:
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 单击F5时如何停止页面加载
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 单击jquery清除输入值
- 单击按钮以等待单击按钮
- 在单击href链接的同时下载文件
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 使图像在单击时展开到不大于浏览器
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 如何在单击复选框后调用控制器方法
- 单击页面上的链接后高度发生变化
- 使用jquery在单击时在单元格中输入值
- 将纯文本URL转换为可单击链接
- ASP.NET通过单击JavaScript按钮触发c#事件
- 单击更改图标并通过javascript添加一个css类
- 阻止在select2单击时调用ajax
- 复制图像路径以单击它
- 当值更改时,在servlet中自动获取textarea值,无需单击按钮