Enable/Disable ASP.Net Required Validator with Jquery

Question

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.

Mickey Dhami · Accepted Answer · 2016-11-17 20:02:36Z

1

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

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

answered Nov 17, 2016 at 20:02

Mickey Dhami

1002 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VDWWD · Accepted Answer · 2016-11-16 22:36:34Z

0

I recommend using CustomValidators. The below validator will only trigger if the parent <div> display is block and the TextBox empty.

<div style="display: none">
    <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="myGroup"></asp:TextBox>
</div>

<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="TextBox1" ValidateEmptyText="true" ErrorMessage="Value is required" ValidationGroup="myGroup" ClientValidationFunction="myCustomValidation"></asp:CustomValidator>

<script type="text/javascript">
    function myCustomValidation(oSrc, args) {
        if (document.getElementById(oSrc.controltovalidate).parentElement.style.display == "block" && args.Value == "") {
            args.IsValid = false;
        } else {
            args.IsValid = true;
        }
    }
</script>

answered Nov 16, 2016 at 22:36

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

4 Comments

Mickey Dhami Over a year ago

Unfortunately It wont work, As I need Required field Validator. This one is only triggers when you enter something in textbox

VDWWD Over a year ago

Yes it does. It uses the ValidateEmptyText="true" property, so it will always fire, and returns false when the block is visible and the textbox empty. Did you look at the code or tried it?

Mickey Dhami Over a year ago

I tried the code. It wont trigger on Submit button for some reason. Anyways I found what the problem was in my code. Instead of "<%=RequiredFieldValidator1%> "I needed to use "#<%=RequiredFieldValidator1%>" and it worked like charm. Thanks for your help though

VDWWD Over a year ago

Propably because of the ValidationGroup. But if you've got it working then that's great.

Collectives™ on Stack Overflow

Enable/Disable ASP.Net Required Validator with Jquery

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related