回发前如何在客户端调用RequiredFieldValidator答案

【问题标题】：How to call RequiredFieldValidator on client before postback回发前如何在客户端调用RequiredFieldValidator
【发布时间】：2010-03-22 00:26:42
【问题描述】：

我继承了一些使用 div 将页面分成标签的代码。在第一页上有许多必填字段和正则表达式验证器。问题是用户可以切换到另一个选项卡，触发回发并在第一页上使验证器失败，从而使事情变得一团糟。

我想要做的是在用户选择另一个选项卡时在第一页上执行验证，从而防止他们在第一页有效之前移动到新选项卡。

<ul>                        
     <li><a href="#tab1">Tab 1</a> </li>
     <li><a href="#tab2" onclick="return isValid();">Tab 2</a></li> 
     <li><a href="#tab3" onclick="return isValid();">Tab 3</a></li> 
</ul>

isValid 需要触发验证器的地方。

谢谢！

更新： codeka 提供的答案非常接近，但是，因为我需要同时提供 href 和 onclick 属性（以避免弄乱显示），选项卡（锚）开关仍在使用即使验证失败。这是我解决这个问题的方法。免责声明：前面有丑陋的代码

<ul>                        
    <li><a id="tab1Tab" href="#tab1" style="display:none"/><a onclick="isValid('tab1');">Tab 1</a></li>
    <li><a id="tab2Tab" href="#tab2" style="display:none"/><a onclick="isValid('tab2');">Tab 2</a></li>
    <li><a id="tab3Tab" href="#tab3" style="display:none"/><a onclick="isValid('tab3');">Tab 3</a></li>
</ul>

function isValid(tab) {
    var valid = Page_ClientValidate();
    var tabId = (valid ? tab : "tab1") + "Tab";
    $("#" + tabId).click();
}

注意使用 jQuery 来实现与点击事件的跨浏览器兼容性。这仅在其他选项卡上没有验证器的情况下才有效，根据 Thomas 的回答，如果添加任何内容，我将需要在 isValid 中使用验证组和额外的逻辑。

【问题讨论】：

标签： asp.net validation

【解决方案1】：

ASP.NET 创建一个全局 javascript 函数 Page_ClientValidate，您可以调用它来触发验证器：

function isValid() {
    return Page_ClientValidate();
}

【讨论】：

+1 谢谢，只要其他选项卡上没有其他验证器，这应该可以工作，我最好现在检查一下 :)
你也可以通过你要验证的验证组，例如：Page_ClientValidate("Registration");
这非常接近，验证器正在触发 onclick，但即使返回了 false，锚点仍在移动到另一个选项卡。

【解决方案2】：

您可以尝试为每个标签使用一个验证组。在从一个选项卡单击到另一个选项卡时，您会调用类似这样的方法，其中选项卡名称代表验证组：

function TabValidate( tabName ) {
    if ( Page_ClientValidate( tabName ) ) {
        //do stuff
    }
}

添加我在评论中提到了这一点，但我想我会把它添加到我的帖子中。如果其他选项卡上没有任何其他验证器，则另一种解决方案是简单地标记其他选项卡上的其他 .NET 控件，这些控件可以使用 CausesValidation="false" 触发回发（例如，带有 AutoPostBack="true" 的 DropDownLists）

【讨论】：

+1 谢谢，其他选项卡上没有验证器，但信息很好。
如果其他选项卡上没有任何其他验证器，那么另一种解决方案是简单地标记其他选项卡上的其他 .NET 控件，这些控件可以使用 CausesValidation="false" 触发回发（例如 DropDownLists使用 AutoPostBack="true")。