CODEWITHSUNDEEP
asp.netvalidationuser-controlsrequiredfieldvalidator
EvanGWatkins
EvanGWatkins

Reputation: 1457

Force AJAX validation controls to check at runtime

I have a web application that has a page which holds a form (Built in a details view) as well as a user control. The form on the page is a basic form with a few fields to be input and a checkbox. I have jQuery running on document.ready that hides the division that holds the user control, and if the checkbox in the pages form is checked, the jQuery is fired to show the user control.

Both forms have validation using the asp validation tools.

If I fill out the form, check the box, and fill out the information in the user control and submit, everything works perfectly, however if I fill out the basic form and do not check the checkbox to show the user control, I get validation errors from the user control (because there was a submit and empty values). How can I get around this?

code snips:

 $("#submitMFields").hide();
 $("#submitMFields").toggle(false);
 $("[id$='chkM']").click(function () {
      $("#submitMFields").toggle("slow");
 });

<asp:TemplateField HeaderText="Currency">
                <EditItemTemplate>
                    <asp:DropDownList ID="ddlCurrencyList"
                        runat="server"
                        DataTextField="strCultureName"
                        DataValueField="strCulture"
                        DataSource='<%# CodeLists.Currency() %>'
                        AppendDataBoundItems="true" >
                        </asp:DropDownList>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Additional Info?">
                <EditItemTemplate>
                    <asp:CheckBox runat="server" ID="chkM" />
                    <div id="submitMFields">
                        <cms:Control runat="server" ID="initialM" />
                    </div>
                </EditItemTemplate>
            </asp:TemplateField>
                <asp:CommandField InsertText="Submit" ShowCancelButton="False" 
                    ShowInsertButton="True" />

inside the user control, validation like this is used - 

<asp:RequiredFieldValidator 
                        id="rfvStartDate" 
                        runat="server" 
                        ControlToValidate="txtStart"
                        ErrorMessage="Start Date is Required" 
                        Display="dynamic">*
                        </asp:RequiredFieldValidator>
                        <ajax:ValidatorCalloutExtender 
                        ID="VCEStart" 
                        runat="server" 
                        TargetControlID = "rfvStartDate" />

Upvotes: 1

Views: 507

Answers (1)

rick schott
rick schott

Reputation: 21112

You can control it on the client-side with ClientValidationFunction:

NOTE: my examle is using jQuery, you can use whatever you want for DOM selection(document.getElemenyById..etc)

<asp:RequiredFieldValidator 
                    id="rfvStartDate" 
                    ClientValidationFunction="rfvStartDateClientValidate"      
                    ControlToValidate="txtTitle"
                    runat="server" 
                    ControlToValidate="txtStart"
                    ErrorMessage="Start Date is Required" 
                    Display="dynamic">*
                    </asp:RequiredFieldValidator>
                    <ajax:ValidatorCalloutExtender 
                    ID="VCEStart" 
                    runat="server" 
                    TargetControlID = "rfvStartDate" />

function rfvStartDateClientValidate(sender, args) {
    //example below, put your client-side logic here
    //toggling the fields will only hide the validators will still fire
    //disable them based on the checkbox
    var v = $('#<%=txtStart.ClientID%>');
    if (v.val() == '') {
        args.IsValid = false;  // field is empty
        v.addClass('requiredHighlight');
    }
    else {
        v.removeClass('requiredHighlight');
    }
}

Upvotes: 1

Related Questions