验证失败时阻止切换标签页——easyResponsiveTabs实现方案

要实现验证失败时阻止标签切换，核心思路是在触发标签切换的流程中插入验证逻辑——只有验证通过才允许提交并切换标签；如果验证失败，就中断切换流程，停留在当前标签页。下面分两种常见场景给出具体实现方案：

场景1：使用ASP.NET MVC内置客户端验证 #

如果你的表单用了MVC的Html.ValidationMessageFor等内置验证组件，框架已经自动生成了客户端验证脚本，你可以直接手动触发验证并判断结果：

修改标签点击事件代码 #

$('#ulTab').on("click", "li", function (event) {
    var activeTab = $(this).find('a').data("tabid");
    var hdnActivetabIndex = $("#hdnActivetabIndex");
    var btnsave = $("#btnsavetab");
    
    // 1. 获取当前标签页对应的表单（请根据实际页面结构调整选择器）
    var currentForm = $("#form-" + hdnActivetabIndex.val());
    
    // 2. 触发MVC内置的客户端验证
    var isValid = currentForm.valid();
    
    if (isValid && btnsave != null && hdnActivetabIndex != null && !btnsave.prop("disabled")) {
        hdnActivetabIndex.val(activeTab);
        btnsave.click();
    } else {
        // 验证失败，阻止标签切换行为
        event.preventDefault();
        event.stopPropagation();
        // 可选：给用户明确的提示
        alert("当前标签页的数据填写有误，请修正后再切换！");
    }
});

关键说明 #

• currentForm.valid()：这是MVC客户端验证的核心方法，会自动触发表单内所有验证规则，返回true表示验证通过。
• event.preventDefault() + event.stopPropagation()：彻底阻止标签的默认切换逻辑，确保页面停留在当前标签。

场景2：自定义验证逻辑 #

如果是自己实现的业务验证规则，可以封装一个验证函数，在点击标签时调用：

步骤1：编写自定义验证函数 #

function validateCurrentTabForm(tabId) {
    var isValid = true;
    
    // 示例：检查当前标签页内的必填字段
    $("#form-" + tabId + " .required-field").each(function() {
        if ($(this).val().trim() === "") {
            isValid = false;
            $(this).addClass("input-error"); // 标记错误样式
            alert("请填写必填项：" + $(this).attr("placeholder"));
            return false; // 跳出循环，避免重复提示
        }
    });
    
    // 可添加更多自定义验证规则...
    return isValid;
}

步骤2：修改标签点击事件 #

$('#ulTab').on("click", "li", function (event) {
    var activeTab = $(this).find('a').data("tabid");
    var hdnActivetabIndex = $("#hdnActivetabIndex");
    var currentTabId = hdnActivetabIndex.val();
    var btnsave = $("#btnsavetab");
    
    // 1. 执行自定义验证
    var isValid = validateCurrentTabForm(currentTabId);
    
    if (isValid && btnsave != null && hdnActivetabIndex != null && !btnsave.prop("disabled")) {
        hdnActivetabIndex.val(activeTab);
        btnsave.click();
    } else {
        // 验证失败，阻止切换
        event.preventDefault();
        event.stopPropagation();
    }
});

额外处理：Ajax提交后的服务器端验证拦截 #

因为你用的是AjaxBeginForm，如果服务器端返回验证失败（比如ModelState.IsValid为false），还需要在Ajax回调中处理，避免标签误切换：

在AjaxBeginForm中指定回调函数 #

@using (Ajax.BeginForm("SaveTabData", "YourController", new AjaxOptions {
    OnFailure = "handleValidationFailure",
    OnSuccess = "handleSaveSuccess"
}))
{
    <!-- 表单内容 -->
}

编写回调逻辑 #

function handleValidationFailure(xhr, status, error) {
    // 服务器端验证失败，强制切回当前标签
    var currentTabId = $("#hdnActivetabIndex").val();
    $('#divTabs').easyResponsiveTabs("activate", currentTabId);
    // 可选：显示服务器返回的错误信息
    alert(xhr.responseText);
}

function handleSaveSuccess(response) {
    // 保存成功，执行标签切换
    var targetTabId = $("#hdnActivetabIndex").val();
    $('#divTabs').easyResponsiveTabs("activate", targetTabId);
}

调整原标签点击事件 #

此时不再直接调用Tab_Change，而是交给Ajax回调处理：

$('#ulTab').on("click", "li", function (event) {
    var activeTab = $(this).find('a').data("tabid");
    var hdnActivetabIndex = $("#hdnActivetabIndex");
    var btnsave = $("#btnsavetab");
    
    // 先执行验证
    var currentForm = $("#form-" + hdnActivetabIndex.val());
    var isValid = currentForm.valid(); // 或调用自定义验证函数
    
    if (isValid && btnsave != null && hdnActivetabIndex != null && !btnsave.prop("disabled")) {
        hdnActivetabIndex.val(activeTab);
        btnsave.click();
        // 阻止默认切换，等待Ajax回调结果
        event.preventDefault();
        event.stopPropagation();
    } else {
        event.preventDefault();
        event.stopPropagation();
        alert("请修正当前标签页的错误后再尝试切换！");
    }
});

这样就能确保只有客户端和服务器端验证都通过时，才会切换标签；任何一步验证失败，都会停留在当前标签并提示用户。

内容的提问来源于stack exchange，提问作者Ankita