CODEWITHSUNDEEP
c#jqueryhtmlasp.netrequiredfieldvalidator
Mickey Dhami
Mickey Dhami

Reputation: 100

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

Upvotes: 0

Views: 3614

Answers (2)

Mickey Dhami
Mickey Dhami

Reputation: 100

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

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

Upvotes: 1

VDWWD
VDWWD

Reputation: 35514

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>

Upvotes: 0

Related Questions