导航回页面时隐藏字段验证

Question

我有一个 asp.net webform 页面有隐藏字段。 One of the fields is displayed when the user ether selects an option from a dropdown list and the other when a radio button is selected, I have this working fine.如果字段没有首先显示，则验证不会启动（这是正确的）。我的问题是，当用户导航回页面并单击我的 'Next' 按钮时，什么也没有发生。我已经确定出于何种原因该页面正在尝试验证，但我不知道如何阻止它。

HTML 用于下拉列表

<div class="form-group">
    <asp:Label ID="Step03WebTypeLabel" class="col-sm-4 control-label" runat="server" Text="Website type *" AssociatedControlID="Step03WebTypeDD"></asp:Label>
    <div class="col-sm-4">
        <asp:DropDownList ID="Step03WebTypeDD" runat="server" class="form-control">
            <asp:ListItem Value="- - Please select - -">- - Please select - -</asp:ListItem>
            <asp:ListItem Value="Content only (With contact us page)">Content only (With contact us page)</asp:ListItem>
            <asp:ListItem Value="Content only (Without contact us page)">Content only (Without contact us page)</asp:ListItem>
            <asp:ListItem Value="e-Commerce">e-Commerce</asp:ListItem>
            <asp:ListItem Value="Social media">Social media</asp:ListItem>
            <asp:ListItem Value="Blog">Blog</asp:ListItem>
            <asp:ListItem Value="Other">Other</asp:ListItem>
        </asp:DropDownList>
    </div>
    <div class="col-sm-offset-4 col-sm-8">
        <asp:RequiredFieldValidator InitialValue="- - Please select - -" Display="Dynamic" runat="server" ID="RequiredWebType" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step03WebTypeDD" ErrorMessage="Please select an option which best describes your website type." />
    </div>
    <div class="col-sm-12">
        <div id="content">
            <h3>Content only website</h3>
            <p>A content only website is a website which has no functionality at all. It's a website that only contains information, images and document downloads. Some content only websites do have a 'Contact Us' page.</p>
        </div>
        <div id="eCom">
            <h3>e-Commerce website</h3>
            <p>An e-Commerce website is a website where users can shop and can pay for goods online. These website generally contain a cart, payment systems and some have register/login functionality.</p>
        </div>
        <div id="Social">
            <h3>Social media website</h3>
            <p>A social media website is a website where users can interact with each other online for example upload pictures and post messages examples of a social media website is Facebook and Twitter. These websites generally contain upload functionality and users have to register/login to use the full functionality of the site.</p>
        </div>
        <div id="Blog">
            <h3>Blog website</h3>
            <p>A blog website is a website where users can upload posts/messages for other users to comment on. These websites generally contain upload functionality and users have to register/login to use the full functionality of the site.</p>
        </div>
    </div>
</div>
<div class="form-group" id="hiddenOtherField">
    <asp:Label ID="Step03OtherFieldLabel" class="col-sm-4 control-label" runat="server" Text="Please specify *" AssociatedControlID="Step03OtherField"></asp:Label>
    <div class="col-sm-4">
        <asp:TextBox ID="Step03OtherField" runat="server" class="form-control" style="max-width: 100%"></asp:TextBox>
    </div>
    <div class="col-sm-offset-4 col-sm-8">
        <asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="reqStep03OtherField" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step03OtherField" ErrorMessage="Please specify your website's type." />
    </div>
</div>

HTML 用于单选按钮

<div class="form-group" id="hiddenSpecificPages" style="display: none">
    <asp:Label ID="Step03SpecificPagesLabel" class="col-sm-4 control-label" runat="server" Text="Please specify all specific page URL's *" AssociatedControlID="Step03SpecificPagesField"></asp:Label>
    <div class="col-sm-5" style="padding-right: 0px">
        <asp:TextBox ID="Step03SpecificPagesField" runat="server" class="form-control" TextMode="MultiLine" Rows="10" style="max-width: 100%"></asp:TextBox>
    </div>
    <div class="col-sm-offset-4 col-sm-8">
        <asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="reqStep03SpecificErrorMessage" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step03SpecificPagesField" ErrorMessage="Please list all the page URL's you would like us to look at." />
    </div>
</div>

JQuery

    if ($("#MainContent_Step03WebTypeDD").val() == "Other")
    {
        $("#hiddenOtherField").show();
        ValidatorEnable(document.getElementById("<%= reqStep03OtherField.ClientID %>"), true);
    }
    else {
        $("#hiddenOtherField").hide();
        ValidatorEnable(document.getElementById("<%= reqStep03OtherField.ClientID %>"), false);
        $("#MainContent_Step03OtherField").val('');
    }
$(function ()
{
    $("input[name='ctl00$MainContent$Step03PgSelection']").click(function ()
    {
        if ($("#MainContent_Step03SelectionPgsRadioButton").is(":checked"))
        {
            $("#hiddenSpecificPages").show();
            ValidatorEnable(document.getElementById("<%= reqStep03SpecificErrorMessage.ClientID %>"), true);
        }
        else
        {
            $("#hiddenSpecificPages").hide();
            ValidatorEnable(document.getElementById("<%= reqStep03SpecificErrorMessage.ClientID %>"), false);
        }
    });
});

Answer 1

将我的 JQuery 更改为：

$(function () {
            $("#MainContent_Step03WebTypeDD").change(function ()
            {
                ToggleDropdown();
            });

            ToggleDropdown();
        });

        function ToggleDropdown() {
            if ($("#MainContent_Step03WebTypeDD").val() == "Other")
            {
                $("#hiddenOtherField").show();
                document.getElementById("<%=reqStep03OtherField.ClientID%>").style.visibility = "visible"; 
                document.getElementById("<%=reqStep03OtherField.ClientID%>").enabled = true;
            }
            else {
                $("#hiddenOtherField").hide();
                document.getElementById("<%=reqStep03OtherField.ClientID%>").style.visibility = "hidden";
                document.getElementById("<%=reqStep03OtherField.ClientID%>").enabled = false;
                $("#MainContent_Step03OtherField").val('');
            }
};

 $(function ()
        {
            $("input[name='ctl00$MainContent$Step03PgSelection']").click(function ()
            {
                ToggleSection();
            });

            ToggleSection();
        });

        function ToggleSection()
        {
            if ($("#MainContent_Step03SelectionPgsRadioButton").is(":checked"))
            {
                $("#hiddenSpecificPages").show();
                document.getElementById("<%=reqStep03SpecificErrorMessage.ClientID%>").style.visibility = "visible";
                document.getElementById("<%=reqStep03SpecificErrorMessage.ClientID%>").enabled = true;
            }
            else
            {
                $("#hiddenSpecificPages").hide();
                document.getElementById("<%=reqStep03SpecificErrorMessage.ClientID%>").style.visibility = "hidden";
                document.getElementById("<%=reqStep03SpecificErrorMessage.ClientID%>").enabled = false;
                $("#MainContent_Step03SpecificPagesField").val('');
            }
        };

导航回页面时隐藏字段验证

Hidden Field Validates When Navigate Back To Page

javascript

asp.net

jquery

webforms