ajax MaskedEditValidator isValidEmpty disables all webcontrols

Question

Or so it should, the point is : if it will just tell you that it's not valid to leave current field empty, you could finish other fields and might forget that one ..

point is cleared.

now , say I want to cancel the whole deal I will not fill this form at all !

Luckily there's a "cancel" image button

that hides the form, but it's also disabled.

Is there any work around other than pretend you're about to fill the form and then hit cancel as soon as the invalidEmpty-Error clears ?

MaskedEditExtender

<cc1:MaskedEditExtender enabled="true" MaskType="Date" ID="insertDate_MaskedEditExtender" runat="server"
    TargetControlID="TBXinsertDate"  InputDirection="LeftToRight"  CultureName="en-GB" 
    UserDateFormat="None" Mask="99/99/9999" MessageValidatorTip="true"  OnFocusCssClass="maskedFocus" ErrorTooltipEnabled="true" ErrorTooltipCssClass="toolTipForInvalid"
</cc1:MaskedEditExtender>

MaskedEditValidator

<cc1:MaskedEditValidator Enabled="false" IsValidEmpty="false" ID="insertDate_MskValidator"  ControlExtender="insertDate_MaskedEditExtender" ControlToValidate="TBXinsertDate" runat="server"
    InvalidValueBlurredMessage="invalid date" EmptyValueBlurredText="requierd fileld"  ErrorMessage="Error" 
    MaximumValue="01/01/2015" MinimumValue="01/01/2008" MinimumValueBlurredText="please enter year above 2008" MaximumValueBlurredMessage="max year value is 2015" 
    CssClass="dateInValid">
</cc1:MaskedEditValidator>

Default state of validator Enabled = false because I am turning it to enabled via onClick of a button event from code behind .

  insertDate_MskValidator.Enabled = true;

stage 1 -

validator-enabled = false

form is hidden

stage 2 -

validator-enabled = true + Form visible

stage 3 -

cancel or submit

Submit will do if form is valid. Cancel is no option if you step in one of text box

Is there any way you could think of ?

Answer 1

i have found a remarkable way (so i think ! ) to get around it so you can now use the Validation attribute - isValidEmpty=false ( current field is a required field )

but now you can still cancel form when field is empty even though it is not available by default

fixed the issue of : when leaving an empty field, cause surrounding controls to be disabled .

all i needed to do is when the event of onblur is firing the validation

i am binding a function to target textbox onblur() that executes a setTimeOut function that execute a delay to disable the Validator as follows :

   function setTDisableValidation() {
        setTimeout('disableValidation()', 3500);
    }

    function disableValidation() {
        var myVal = document.getElementById('insertDate_MskValidator');
        myVal.disabled = true;
        myVal.ValidEmpty = true;

    }

            <asp:TextBox ID="TBXinsertDate" runat="server" ToolTip="insert date" Width="76px" onblur="setTDisableValidation();">
                    </asp:TextBox>

i am not a javascript expert not even in asp.net (yet...) so i think this code could be refactored / optimised so it will be more elegant and will accept any control given as parameter

Answer 2

<asp:TextBox ID="tbEffectiveTo" runat="server" Text='<%# Bind("EffectiveTo", "{0:MM/dd/yyyy}")%>' Width="8em" ToolTip="MM/DD/YYYY"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender ID="meeEffectiveTo" runat="server" TargetControlID="tbEffectiveTo" Mask="99C99C9999" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus"  OnInvalidCssClass="MaskedEditError" MaskType="None" ClearMaskOnLostFocus="false" Filtered="/" PromptCharacter=" " />
<ajaxToolkit:MaskedEditValidator ID="mevEffectiveTo" runat="server" ControlExtender="meeEffectiveTo" ControlToValidate="tbEffectiveTo" Display="Dynamic" IsValidEmpty="true" ValidationExpression="^\s{10}|(0[1-9]|1[012])/(0[1-9]|[12][0-9]|3[01])/(20\d\d)$" InvalidValueMessage="Invalid Date"></ajaxToolkit:MaskedEditValidator>
<ajaxToolkit:CalendarExtender ID="ceEffectiveTo" runat="server" Enabled="True" TargetControlID="tbEffectiveTo" CssClass="EffectiveDateCalendar" Format="MM/dd/yyyy"></ajaxToolkit:CalendarExtender>