页面验证不适用于 JavaScript 代码

Question

我为面板内的下拉列表设置了 requiredFieldValidator。如果下拉列表中没有选择数据，btnSubmitReport 可以很好地验证和显示 *.选择数据并单击 btnSubmitReport 以显示数据后，它仍然可以正常工作。现在，如果您取消选择下拉菜单并点击 btnSubmitReport 它不再进行验证。这是因为第一次单击 btnSubmitReport_Click 时，它会检查是否 Page.IsValid 并调用 JavaScript 代码，但随后的调用只是调用 JavaScript 代码并且没有调用 btnSubmitReport_Click 来查看页面是否有效。请建议。这是aspx页面上的示例代码：

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testValidator.aspx.cs"
    MasterPageFile="~/Site.master" Inherits="textXslt.testValidator" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script src="Styles/Reports.js" type="text/javascript"></script>
    <h3>
        <asp:Label ID="lblHeader" runat="server" Text="Reporting Filter"></asp:Label>
    </h3>
    <div style="text-align: right">
        <input id="lnkShowFilter" type="button" value="Show Filter" onclick="ShowF()" class="btn" />
        <input id="lnkHideFilter" type="button" value="Hide Filter" onclick="HideF()" class="btn" />
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="divFilter">
        <asp:UpdatePanel ID="uplMain" runat="server">
            <ContentTemplate>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server">
                    <table>
                        <tr>
                            <td valign="top">
                                <table>
                                    <tr>
                                        <td>
                                            <asp:CheckBox ID="chkBusiness" runat="server" Text="Business Division" CssClass="chkbox" />
                                        </td>
                                        <td>
                                            <asp:DropDownList ID="ddlBusiness" runat="server" AppendDataBoundItems="true" AutoPostBack="true"
                                                CausesValidation="True" OnSelectedIndexChanged="ddlBusiness_SelectedIndexChanged"
                                                ValidationGroup="grpSubmit" Width="350px">
                                                <asp:ListItem Selected="True" Value="-1">--- SELECT ---</asp:ListItem>
                                                <asp:ListItem>Orange</asp:ListItem>
                                                <asp:ListItem>Apple</asp:ListItem>
                                                <asp:ListItem>Mango</asp:ListItem>
                                            </asp:DropDownList>
                                            </asp:DropDownList>
                                            <asp:RequiredFieldValidator ID="rfvBusiness" runat="server" ControlToValidate="ddlBusiness"
                                                Enabled="true" ToolTip="Please select a Business." ErrorMessage="*" InitialValue="-1"
                                                ForeColor="Red" CssClass="required" Display="Dynamic" ValidationGroup="grpSubmit">
                                            </asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </asp:PlaceHolder>
                <hr size="1" />
                <div style="text-align: center">
                    <table style="width: 10%">
                        <tr>
                            <td>
                                <asp:Button ID="btnHome" runat="server" Text="Home" OnClick="btnHome_Click" CssClass="btn" />
                            </td>
                            <td>
                                <asp:Button ID="btnSubmitReport" runat="server" Text="Submit" OnClick="btnSubmitReport_Click"
                                    ValidationGroup="grpSubmit" CssClass="btn" />
                            </td>
                        </tr>
                    </table>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div id="divResult">
        <asp:UpdatePanel ID="uplGrid" runat="server">
            <ContentTemplate>
                Here go Results of grid
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

下面是代码：

    protected void btnSubmitReport_Click(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
            btnSubmitReport.Attributes["onclick"] = "javascript:SubmitF();";
        }
        //then do rest of the processing to display grid results
    }

这是 Reports.js 文件：

    function ShowF() {
    $('#lnkShowFilter').hide();
    $('#divFilter').show();
    $('#lnkHideFilter').show();
    $('#divResult').hide();
    $('#MainContent_lblHeader').text("Reporting Filter");
}

function HideF() {
    $('#lnkShowFilter').show();
    $('#divFilter').hide();
    $('#lnkHideFilter').hide();
    $('#divResult').show();
    $('#').show();
    $('#MainContent_lblHeader').text("Report Result");
}

function SubmitF() {
   // alert("SubmitF");
    $('#lnkShowFilter').show();
    $('#divFilter').hide();
    $('#lnkHideFilter').hide();
    $('#divResult').show();
    $('#MainContent_lblHeader').text("Report Result");
}

Answer 1

好吧，我能够通过使用客户端验证来解决这个问题。所以我创建了一个函数

    <script type="text/javascript">
        function ValidateAndShowPopup() {
            if (Page_ClientValidate('grpSubmit')) {
                SubmitF();
            }
        }

并将 OnclientClick 和 OnClick 添加到提交按钮

 <asp:Button ID="btnSubmitReport" runat="server" Text="Submit" OnClick="btnSubmitReport_Click" ValidationGroup="grpSubmit" OnClientClick="ValidateAndShowPopup()" CssClass="btn" />