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

Question

I have an asp.net webform with a page that has hidden fields on. 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. If the fields are not displayed first off the validation doesn't kick in (which is correct). My issue is, is that when the user navigates back to the page and clicks my 'Next' button, nothing happens at all. I have identified that for what ever reason the page is trying to now validate and I don't know how to stop this.

HTML for drop down list

<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 for radio buttons

<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

Chaged my JQuery to:

$(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('');
            }
        };