具有服务器端验证的jQuery Tabs向导
||
我使用Asp.Net MVC 3网站中的jQuery UI Tabs创建了一个Checkout向导。向导中的每个选项卡都会加载包含表单的局部视图。如果表单有效，我将发布表单数据并将其保存到数据库中。
目前，我可以检查客户端验证，并且如果当前选项卡无效，请使用此处介绍的方法单击“下一个”或“上一个”按钮时，防止选择“下一个/上一个”选项卡。演示/标签/#...prevent_switching_to_the_tab_on_click_depending_on_form_validation。
但是，并非所有验证都可以在客户端进行，因为我们需要执行一些服务器端检查。因此，如果选项卡通过了客户端验证，那么我将提交表单并检查从服务器返回的响应。如果服务器端验证通过，则返回一个空字符串，但如果失败，则为该选项卡返回相同的局部视图。
这是我的jQuery UI Tabs选择器中的select函数：
select: function (event, ui) {
var checkOutTabs = $(\".checkout-tabs\").tabs();
var currentTabIndex = checkOut.getSelectedTabIndex();
var currentTab = $(\".checkout-step\").get(currentTabIndex);
var isValid = checkOut.validateTab(currentTab, ui.index);
//prevent tab change
if (!isValid) {
return false;
}
var form = $(currentTab).find(\"form\");
//Submit this tab
$.post(form.attr(\"action\"), form.serialize(), function (data) {
if (!data) {
checkOutTabs.tabs(\"enable\", ui.index + 1);
return true;
} else {
$(currentTab).find(\".checkout-step\").parent().html(data);
return false;
}
});
}
没有找到相关结果
已邀请:
1 个回复
弛保矮瘦敖
立即返回，因为它是异步的 也许您必须阻塞（在$ .ajaxOptions中使用async = false）直到获得响应，然后通过更改范围更广的变量来返回所需的内容