asp.net 隐藏时不验证模态形式

Question

我有模态表单 (bootstrap)，我正在使用 asp.net RequiredFieldValidtors 进行数据输入验证。此验证 应仅在模式可见时触发 并且用户正在向模式中输入新值。

我遇到的问题是，当未显示模型表单时会触发验证，从而阻止我的主页接受来自的新数据输入。我的模式仅用于添加新值，不属于我主页上正常工作流程的一部分。

我已经坚持了两天了，尝试了很多不同的东西，就是想不通。

关于如何在保持 RequiredFieldValidator 规则不变的情况下处理此问题的任何建议？

谢谢

编辑 - 添加模态表单代码。

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <ContentTemplate>
        <div class="modal fade" id="modNewStakeholder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Add Stakeholder</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">First Name:</label>
                            <asp:TextBox class="form-control focus" ID="tFirstName" runat="server" AutoComplete="off" placeholder="First name is required"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rftFirstName"
                                runat="server" ErrorMessage="Required Field"
                                ControlToValidate="tFirstName" Display="Dynamic"
                                ValidationGroup="ValGroupNewStake"></asp:RequiredFieldValidator>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Last Name:</label>
                            <asp:TextBox class="form-control" ID="tLastName" runat="server" AutoComplete="off" placeholder="Last name is required"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rftLastName"
                               runat="server" ErrorMessage="Required Field" ControlToValidate="tLastName" Display="Dynamic"
                               ValidationGroup="ValGroupNewStake"></asp:RequiredFieldValidator>
                        </div>
                        <div class="form-group">
                            <label class="control-label">E-Mail:</label>
                            <asp:TextBox class="form-control" ID="tEmail" runat="server" AutoComplete="off" placeholder="Email must contain @expeditors.com"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rftEmail" runat="server" ControlToValidate="tEmail" Display="Dynamic"
                                ValidationGroup="ValGroupNewStake"
                                ErrorMessage="Required Field">
                            </asp:RequiredFieldValidator>

                            <asp:RegularExpressionValidator ID="rftEmailAt" runat="server" ControlToValidate="tEmail" Display="Dynamic"
                                ErrorMessage="Invalid Email, must contain @"
                                ValidationGroup="ValGroupNewStake"
                                ValidationExpression="^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$">
                            </asp:RegularExpressionValidator>

                            <asp:RegularExpressionValidator ID="rftEmailDomaain" runat="server" ControlToValidate="tEmail" Display="Dynamic"
                                ErrorMessage="Invalid Email, must be an @abc.com domain"
                                ValidationGroup="ValGroupNewStake"
                                ValidationExpression="^.+@[Aa][Bb][Cc][.][Cc][Oo][Mm]$">
                            </asp:RegularExpressionValidator>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="btn-group" role="group" aria-label="...">
                            <button type="button" class="btn btn-success btn-sm" id="cmdOk_AddSholder" runat="server" onserverclick="cmdOk_AddSholder_ServerClick" ValidationGroup="ValGroupNewStake" causesvalidation="false">Ok</button>
                            <button type="button" class="btn btn-danger btn-sm" id="cmdCancel_AddSholder" runat="server" data-dismiss="modal" onserverclick="cmdCancel_AddSholder_ServerClick">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="cmdOk_AddSholder" EventName="serverclick" />
    </Triggers>
</asp:UpdatePanel>

Answer 1

我整理了一个非常简单的示例来说明我的应用程序是如何执行此操作的。 Modal 只是一个 ascx 控件并且 而不是 有一个 updatepanel。它实际上只是一个变得可见的控件，但我们使用 CSS 和 JavaScript 使其成为模态。相同的逻辑应该仍然适用，因为我从一个功能模式中制作了这个示例。

Modal.ascx

验证器有 ValidationGroup 并且被禁用。按钮也分配给 ValidationGroup：

<div id="approvalModal" style="display: none;">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Enabled="false"
        ControlToValidate="TextBox1" ValidationGroup="testValidationgGroup" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
    <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="testValidationgGroup" />
</div>

Modal.ascx.vb

在属性:

中启用验证器

Partial Class Modal
    Inherits System.Web.UI.UserControl

    Public WriteOnly Property Enable() As Boolean
        Set(value As Boolean)
            RequiredFieldValidator1.Enabled = value
        End Set
    End Property

End Class

PageWithModal.aspx（注意：使用jQuery）

<script>
    function setupTestModal() {
        var modal = $('#approvalModal');
        if (modal.css('display') == 'none') {
            modal.show();
        }
    }
</script>

<asp:Button ID="ShowModal" runat="server" Text="Show Modal" OnClick="ShowModal_Click" />
<uc1:Modal runat="server" ID="testModal" />

PageWithModal.aspx.vb

请注意，当您单击 ShowModal 按钮时，不会触发验证。但是，当模态可见时，验证器已启用。

Protected Sub ShowModal_Click(sender As Object, e As EventArgs)
    testModal.Enable = True
    Dim script = String.Concat("setupTestModal();")
    ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(), "Popup", script, True)
End Sub

asp.net 隐藏时不验证模态形式

asp.net Do not validate Modal form when hidden

asp.net

validation

bootstrap-modal