ASP.NET MVC-如何防止双击jquery.validate.unobtrusive lib?
-
13-10-2019 - |
题
我需要避免双击提交行为。我正在将客户端验证与Unbrowusive Library一起使用。我有以下避免双重插曲的代码:
jQuery.fn.preventDoubleSubmit = function () {
var alreadySubmitted = false;
return jQuery(this).submit(function () {
if (alreadySubmitted)
return false;
else {
alreadySubmitted = true;
}
});
};
jQuery('form').preventDoubleSubmit();
不幸的是,如果我的表格具有一些有效的字段(例如,所需字段),上面的代码仍在触发,因此,即使我纠正了表单上的任何错误,我也无法再次提交。
成功完成验证后,如何发射双击代码?
解决方案 2
我用以下代码解决了它:
var tryNumber = 0;
jQuery('input[type=submit]').click(function (event) {
var self = $(this);
if (self.closest('form').valid()) {
if (tryNumber > 0) {
tryNumber++;
alert('Your form has been already submited. wait please');
return false;
}
else {
tryNumber++;
}
};
});
注意:您也可以替换:
return false;
线,for:
self.attr('disabled', true);
但是,如果您在控制器上使用提交按钮的名称以获取额外的逻辑,则将它们作为空发送。 (您可以在提交之前使用额外的隐藏字段向其收取费用)
就是这样,希望它有帮助
罗德里戈
编辑:感谢这些帖子:jQuery newbie:将验证与Hidding提交按钮相结合
其他提示
您也可以使用 jQuery一个活动.
我发现我可以通过双击快速单击双击大多数警卫。使用一个事件是确保事件仅发射一次的唯一真实方法。我认为这种技术不会使用输入类型=提交标签“开箱即用”。相反,您可以简单地使用输入类型=按钮或 jqueryui的.button().
$("#submitButton").one("click", function(event) {
$('#theForm').submit();
});
如果您需要在验证错误(或其他情况)上重新连接事件,我建议您为事件处理程序创建功能。在此示例中不需要该功能,因为所有事件处理程序都会提交表格,但是在更复杂的情况下,您可能需要避免重复自己。
function submitClick(event) {
$('#theForm').submit();
}
$("#submitButton").one('click', function(event) {
submitClick(event);
});
// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
if (!$(this).valid()) {
event.preventDefault();
$('#submitButton').one('click', function(event) { submitClick(event); });
}
});
如果您想向用户提供反馈,则可以在此处添加禁用代码,因为该按钮不再起作用。使用一个事件的一项巨大副作用是,您实际上不必将按钮禁用,您可以自己使用自己的样式。
function submitClick(event) {
$('#submitButton').addClass('disabledButton');
$('#theForm').submit();
}
$("#submitButton").one('click', function(event) {
submitClick(event);
});
// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
if (!$(this).valid()) {
event.preventDefault();
$('#submitButton').one('click', function(event) { submitClick(event); });
$('#submitButton').removeClass('disabledButton');
}
});
jQuery一个活动: http://api.jquery.com/one/
为什么不只是使用:
function disableButtons() {
var form = $(this);
var btns = $("input:submit", form);
if (!form.valid()) {
// allow user to correct validation errors and re-submit
btns.removeAttr("disabled");
} else {
btns.attr("disabled", "disabled");
}
}
禁用您的按钮并使用以下方式激活它:
$("form").bind("submit", disableButtons);
基于 瑞安·P的流行答案 我创建了以下通用解决方案,该解决方案也适用于我的Ajax表单。
用以下课程装饰您的自定义提交按钮:
<button type="button" class="one-click-submit-button">Submit</button>
将以下内容添加到您的JavaScript文件:
function OneClickSubmitButton() {
$('.one-click-submit-button').each(function () {
var $theButton = $(this);
var $theForm = $theButton.closest('form');
//hide the button and submit the form
function tieButtonToForm() {
$theButton.one('click', function () {
$theButton.hide();
$theForm.submit();
});
}
tieButtonToForm();
// This handler will re-wire the event when the form is invalid.
$theForm.submit(function (event) {
if (!$(this).valid()) {
$theButton.show();
event.preventDefault();
tieButtonToForm();
}
});
});
}
OneClickSubmitButton();
由于这是AJAX表格,如果我们失败了服务器验证,我们希望重新加载处理程序。
function MyForm_OnSuccess() {
if (true if your form passed validation logic) {
//do something since your form submitted successfully
} else { //validation failed on server
OneClickSubmitButton(); //reinitialize the button logic
}
}
显然,如果您没有Ajax表格,您可以省略整个 OneClickSubmitButton
运作和运行 $('.one-click-submit-button').each(...
直接地。
$('form').submit(function () {
$('input[type="submit"]', this).attr('disabled', 'disabled');
});
我有一种使用MVC3不引人注目的验证的表单,以及带有[RemoteAttribute]的ViewModel。在我看来,表格的提交事件仅在所有验证通过后才开火。我目前正在使用此功能,并且似乎有效:
<input type="submit" value="Submit the Form"
data-app-disable-on-submit="true" />
$('form').live('submit', function() {
$(this).find('input[type="submit"][data-app-disable-on-submit="true"]')
.attr('disabled', 'disabled');
})
;
我在远程属性验证操作方法和HTTPPOST操作方法上都设置了断点。单击“提交”按钮首次击中验证操作方法的断点。此时,该按钮仍在启用。我可以单击多次,然后恢复验证方法后,HTTPPOST仅命中一次。当命中HTTPPOST时,请禁用提交按钮。
更新
对,你是亚历克斯。因此,上述更新版本看起来像这样:
$('form').on('submit', function() {
$(this).find('input[type="submit"][data-app-disable-on-submit="true"]')
.attr('disabled', 'disabled');
})
我对此使用了另一种方法。不接线到按钮的点击事件,而是将表格的提交事件接线。像魅力一样的工作,以防止多次同时提交表格。
function initFormsToPreventSimultaneousSubmits(selector) {
if (!selector) {
selector = 'form'; // No selector supplied, apply to all forms on the page
}
// Make sure all forms that conform to selector are marked as not submitting
$(selector).each(function()
{
var $form = $(this);
$form.data('submitting', false);
});
// Attach to submit event of all forms that conform to selector
$(selector).off('submit').on('submit', function (e) {
var $form = $(this);
if (!$form.valid || $form.valid()) { // Make sure to only process when the form is valid or jquery validation is not used
if ($form.data('submitting')) {
// form is already submitting. Classic case of double click on one of the submit buttons of the form. Stop the submit
e.preventDefault();
return false;
} else {
// All ok, mark the form as submitting and let the form perform the submit
$form.data('submitting', true);
return true;
}
}
});
}
在准备就绪的文档上,我调用InitformStopreventsimultaneSubmits()以启动页面上的所有表单。
唯一要记住的是,当您使用Ajax表单时,帖子是在Ajaxoptions设置的oncomplete事件上调用InitformStopreventsimultaneSupSubmits('#formid')。因为否则该表格在完成后仍将标记为提交。当使用“正常”表单帖子时,这不是问题。
扩展答案 亚历克斯 和 瑞安p 说明可能缺少jQuery验证以及以单个表单存在多个提交按钮的情况。
oneClickSubmitButton = function () {
$('input[type=submit], button[type=submit], input[type=image]').each(function () {
var $theButton = $(this);
var $theForm = $theButton.closest('form');
//hide the button and submit the form
function tieButtonToForm() {
$theButton.one('click', function () {
$theButton.addClass('ui-state-disabled');
});
}
tieButtonToForm();
$theForm.submit(function (event) {
// Only proceed for the clicked button
if (!$theButton.hasClass("ui-state-disabled"))
return;
// If jQuery Validation is not present or the form is valid, the form is valid
if (!$theForm.valid || $theForm.valid())
return;
// Re-wire the event
$theButton.removeClass('ui-state-disabled');
event.preventDefault();
tieButtonToForm();
});
});
};
我能够使用几行代码来解决类似的问题。如果您不想向用户“警报”他们双击,而只是默默地忽略第二次点击,我更喜欢这一点。
我刚刚制作了一个全局JavaScript变量,当我的功能在关键部分中执行时,我切换了该变量。这使后续函数通过重新执行同一部分重新执行。
var criticalSection = false;
SomeOnClickEventFired = function () {
if (!criticalSection)
{
criticalSection = true;
//Ajax Time
criticalSection = false;
}
}