Search code examples
javascriptasp.netajaxcontroltoolkitmaskededitextendermaskededitvalidator

Disabing MaskedEditValidator and MaskedEditExtender

I made a small table to allow edition, deletion, and insertion of records:

enter image description here

The table (DataGridView, bound) is straightforward: click edit to get to "Edit" mode (which offers a "Cancel"), enter new values and click "Add" to insert a new record.

Each field has a set of rules (between x and y, all numeric), so they are tied to a MaskedEditExtender and a MaskedEditValidator:

(Example for column 1):

<asp:TemplateField HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" HeaderText="First bus #">
    <ItemTemplate>
        <asp:Label runat="server" ID="BusIdStartLabel" Text='<% #Bind("BusIdStart","{0:D4}") %>' />
    </ItemTemplate>
    <EditItemTemplate>
        <ajaxToolkit:MaskedEditExtender runat="server" ID="BusIdStartTextBoxMaskedEditExtender" TargetControlID="BusIdStartTextBox" BehaviorID="EditBusIdStartTextBoxBehavior"
                        MaskType="Number"
                        Mask="9999" PromptCharacter=" "
                        InputDirection="RightToLeft"
                        OnInvalidCssClass="maskedEditError" OnFocusCssClass="maskedEditFocus"
                        AutoComplete="False" ErrorTooltipEnabled="True" MessageValidatorTip="False" />
        <ajaxToolkit:MaskedEditValidator runat="server" ID="BusIdStartTextBoxMaskedEditValidator" ControlToValidate="BusIdStartTextBox" ControlExtender="BusIdStartTextBoxMaskedEditExtender"
                        MinimumValue="0" MaximumValue="9999"
                        IsValidEmpty="False" Display="None"
                        InvalidValueMessage="Enter a value between 0000 and 9999"
                        MaximumValueMessage="Enter a value between 0000 and 9999"
                        EmptyValueMessage="Enter a value between 0000 and 9999" />
        <asp:TextBox runat="server" ID="BusIdStartTextBox" Text='<%  #Bind("BusIdStart","{0:D4}") %>' Width="2.5em" Height="13px" CssClass="rightAlignTextBox" />
    </EditItemTemplate>
    <FooterTemplate>
        <ajaxToolkit:MaskedEditExtender runat="server" ID="BusIdStartTextBoxMaskedEditExtender" TargetControlID="BusIdStartTextBox" BehaviorID="FooterBusIdStartTextBoxBehavior"
                        MaskType="Number"
                        Mask="9999" PromptCharacter=" "
                        InputDirection="RightToLeft"
                        OnInvalidCssClass="maskedEditError" OnFocusCssClass="maskedEditFocus"
                        AutoComplete="False" ErrorTooltipEnabled="True" MessageValidatorTip="False" />
        <ajaxToolkit:MaskedEditValidator runat="server" ID="BusIdStartTextBoxMaskedEditValidator" ControlToValidate="BusIdStartTextBox" ControlExtender="BusIdStartTextBoxMaskedEditExtender"
                        MinimumValue="0" MaximumValue="9999"
                        IsValidEmpty="False" Display="None"
                        InvalidValueMessage="Enter a value between 0000 and 9999"
                        MaximumValueMessage="Enter a value between 0000 and 9999"
                        EmptyValueMessage="Enter a value between 0000 and 9999" />
        <asp:TextBox runat="server" ID="BusIdStartTextBox" Width="2.5em" Height="13px" CssClass="rightAlignTextBox" />
    </FooterTemplate>
</asp:TemplateField>

The problem: Clicking any link of the form (Edit, Delete) triggers the validation of everything. So clicking "Edit" triggers the validation (which returns "invalid") of the "Insert" row. I thought I would disable that with this:

<asp:LinkButton runat="server" ID="ActionEditLink" CommandName="Edit" Text="Edit" OnClientClick="DeactivateValidation()" />

...

function DeactivateValidation() {
    TryDispose('EditBusIdStartTextBoxBehavior');
    TryDispose('FooterBusIdStartTextBoxBehavior');
    //etc.
}

function TryDispose(behaviorId) {
    var behavior = window.$find(behaviorId);
    if (behavior != null)
        behavior.dispose();
}

But the validation is still active afterwards and blocks the links. How do I really deactivate the validation on the client side?

Solution

  • The way to do do so is to use CausesValidation and set it to False:

    <asp:LinkButton runat="server" ID="ActionEditLink" CommandName="Edit" Text="Edit" CausesValidation="False" />
<asp:LinkButton runat="server" ID="ActionCancelLink" CommandName="Cancel" Text="Cancel" CausesValidation="False" />