Search code examples
c#jqueryhtmlasp.netrequiredfieldvalidator

Enable/Disable ASP.Net Required Validator with Jquery

I have a Multiple Select Dropdown list in .aspx page. 

<asp:DropDownList ID="ddlProduct" runat="server" CssClass="form-control ui     fluid dropdown"  multiple="">
</asp:DropDownList>

My Requirement is whichever product I select from dropdown (It is being populated from DB) it should show a Textbox for the product where you should enter total Quantity. Here's code for textboxes

        <label class="control-label">Total Quantity Purchased</label>
            <div class="col-md-12 hideshow1" >
            <asp:TextBox ID="Product1Textbox" runat="server" CssClass="form-control" MaxLength="3"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="1Purchase quantity is required" CssClass="text-danger" ControlToValidate="Product1Textbox"></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Purchase quantity is invalid" ControlToValidate="Product1Textbox" 
                ValidationExpression="\d+"></asp:RegularExpressionValidator>
            </div>
            <div class="col-md-12 hideshow3">
            <asp:TextBox ID="Product2Textbox" runat="server" CssClass="form-control" MaxLength="3"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="2Purchase quantity is required" CssClass="text-danger" ControlToValidate="Product2Textbox"></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ErrorMessage="Purchase quantity is invalid" ControlToValidate="Product2Textbox" 
                ValidationExpression="\d+"></asp:RegularExpressionValidator>
            </div>
             <div class="col-md-12 hideshow4">
            <asp:TextBox ID="Product3Textbox" runat="server" CssClass="form-control" MaxLength="3"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="3Purchase quantity is required" CssClass="text-danger" ControlToValidate="Product3Textbox"></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="Purchase quantity is invalid" ControlToValidate="Product3Textbox" 
                ValidationExpression="\d+"></asp:RegularExpressionValidator>
            </div>

I am using Jquery to Show/Hide the Textboxes. What I want is the RequiredFieldValidator should only be enabled for selected products only.

    <script>
    $('.ui.fluid.dropdown').dropdown();
    $('.ui.fluid.dropdown').change(function () {
        $(".hideshow1").hide();
        ValidatorEnabled($("<%=RequiredFieldValidator1%>"), false);
        $(".hideshow3").hide();
        ValidatorEnabled($("<%=RequiredFieldValidator3%>"), false);
        $(".hideshow4").hide();
        ValidatorEnabled($("<%=RequiredFieldValidator4%>"), false);
        $(".ui.fluid.dropdown option:selected").each(function () {
            var selection = "";
            selection = ".hideshow" + $(this).val();
            $(selection).show();
            ValidatorEnabled($("<%=RequiredFieldValidator1%>"), true);
        });
    });
   </script>

I get this error in console

"Uncaught TypeError: Cannot set property 'visibility' of undefined(…)".

All Textbox Divs are "display: none" by default.

This is my Page. enter image description here enter image description here

Solution

  • Using "#" in front of <%= worked for me

    ValidatorEnabled($("#<%=RequiredFieldValidator1%>"), false);