Question

I am trying to enforce 15-minute granularity for time information entered by the user. So, for example, 12:15 PM and 3:45 am and 9:30 A.M. are all acceptable, but 2:35 PM would not be allowed. Server-side validation works, but it would be nice if the user was told their input was invalid when the text box loses focus, before they click the submit button. Here is the code:

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True" UpdateMode="Always">
            <ContentTemplate>
                <asp:TextBox ID="txtStartTime" runat="server" AutoPostBack="True" CausesValidation="True"/>
                <Ajax:MaskedEditExtender ID="txtStartTime_MaskedEditExtender" runat="server" 
                    TargetControlID="txtStartTime" MaskType="Time" AcceptAMPM="True"
                    Mask="99:99">
                </Ajax:MaskedEditExtender>
                <asp:RequiredFieldValidator runat="server" ID="StartTimeRequired" 
                    ValidationGroup="EventAddEditControls" ControlToValidate="txtStartTime" 
                    EnableClientScript="True" SetFocusOnError="True">*</asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
                    ErrorMessage="Invalid time format." ControlToValidate="txtStartTime" 
                    ValidationGroup="EventAddEditControls" SetFocusOnError="True" 
                    EnableClientScript="True" Text="Invalid time format."
                    ValidationExpression="^([1-9]|0[1-9]|1[012]):(00|15|30|45)\s?[aApP]\.?[mM]\.?$" />
                <Ajax:MaskedEditValidator ID="MaskedEditValidator1" ControlToValidate="txtStartTime"
                    ControlExtender="txtStartTime_MaskedEditExtender" IsValidEmpty="False" 
                    ValidationGroup="EventAddEditControls" 
                    ValidationExpression="^([1-9]|0[1-9]|1[012]):(00|15|30|45)\s?[aApP]\.?[mM]\.?$" 
                    EnableClientScript="True" SetFocusOnError="True" Text="Time format is invalid."
                    runat="server"></Ajax:MaskedEditValidator>
            </ContentTemplate>
        </asp:UpdatePanel>

How can I get the MaskedEditExtender to enforce the 15-minute granularity constraint on the client side also (assuming that this is possible)?

Answer 1

This seems overly simple, but it seems to work.

The first thing I did was to comment out the RegularExpressionValidator – you don’t really need both this and the MaskedEditValidator. To prove the point, apply the fix below but don’t comment out the RegularExpressionValidator. Upon a failed validation you will see both errors.

The last thing was to replace the Text property of the MaskedEditValidator with the InvalidValueMessage property:

<Ajax:MaskedEditValidator ID="MaskedEditValidator1" ControlToValidate="txtStartTime"
    ControlExtender="txtStartTime_MaskedEditExtender" IsValidEmpty="False" 
    ValidationGroup="EventAddEditControls" 
    ValidationExpression="^([1-9]|0[1-9]|1[012]):(00|15|30|45)\s?[aApP]\.?[mM]\.?$" 
    EnableClientScript="True" SetFocusOnError="True"
    InvalidValueMessage="Time format is invalid." runat="server">
</Ajax:MaskedEditValidator>

This example gave me the hint regarding the correct property to use.

Doing both of these things resulted in the validation occurring when tabbing out of the control. This also indicates that the MaskedEditValidator was validating all along.