Masked text box triggers regular expression validator when empty

[rootberg]

I have a simple form with two masked text boxes for phone numbers and two regular expression validators that are validating the phone numbers. If the Masked Text Boxes are left alone and never get focus, they do not trigger the validation. But once the Text Box gets focus, it sets the value to be a blank masked value with no numbers. This causes the Regular Expression validators to be triggered when the page is submitted.

Anyone have any ideas on a way around this?

...
<div>
     <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="ProfileUpdateValidationGroup" />
     <dl>
          <dt>Work Phone</dt>
          <dd><telerik:RadMaskedTextBox ID="WorkPhone" runat="server" CssClass="rfdRoundedCorners" Mask="(###) ###-####" PromptChar="" ValidationGroup="ProfileUpdateValidationGroup" HideOnBlur="True" /><asp:RegularExpressionValidator ID="WorkPhoneRegularExpressionValidator" runat="server" ErrorMessage="Please enter a valid phone number for Work Phone" ToolTip="Please enter a valid phone number for Work Phone" ValidationGroup="ProfileUpdateValidationGroup" ControlToValidate="WorkPhone" Display="Static" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" CssClass="Sprite18 Imp">* </asp:RegularExpressionValidator></dd>
          <dt>Mobile Phone</dt>
          <dd><telerik:RadMaskedTextBox ID="MobilePhone" runat="server" Mask="(###) ###-####"  HideOnBlur="true" PromptChar="" CssClass="rfdRoundedCorners" ValidationGroup="ProfileUpdateValidationGroup"  /><asp:RegularExpressionValidator ID="MobilePhoneRegularExpressionValidator" runat="server" ErrorMessage="Please enter a valid phone number for Mobile Phone." ToolTip="Please enter a valid phone number for Mobile Phone." ValidationGroup="ProfileUpdateValidationGroup" ControlToValidate="MobilePhone" Display="Static" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" CssClass="Sprite18 Imp">* </asp:RegularExpressionValidator></dd>
     </dl>
</div>
<telerik:RadButton ID="ButtonSave" runat="server" Text="Save Changes" Style="float: right; top: 0px; left: 0px;" Skin="Office2010Blue"  onclick="ButtonSave_Click" ValidationGroup="ProfileUpdateValidationGroup" />
...

[Princy]

Hi,

I too experienced the same issue. One suggestion is that you can add a RequiredFieldValidator along with RegularExpressionValidator to trigger validation even if RadMaskedTextBoxes never get focused. Please have a look into this demo.

ASPX:

<dt>Work Phone</dt>
<dd><telerik:RadMaskedTextBox ID="WorkPhone" runat="server" CssClass="rfdRoundedCorners" Mask="(###) ###-####" PromptChar="" ValidationGroup="ProfileUpdateValidationGroup" HideOnBlur="True" /><asp:RegularExpressionValidator ID="WorkPhoneRegularExpressionValidator" runat="server" ErrorMessage="Please enter a valid phone number for Work Phone" ToolTip="Please enter a valid phone number for Work Phone" ValidationGroup="ProfileUpdateValidationGroup" ControlToValidate="WorkPhone" Display="Static" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" CssClass="Sprite18 Imp">* </asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="WorkPhoneRequiredFieldValidator"  runat="server" ErrorMessage="Please enter a valid phone number for Work Phone" ToolTip="Please enter a valid phone number for Work Phone" ValidationGroup="ProfileUpdateValidationGroup" ControlToValidate="WorkPhone" Display="Static" CssClass="Sprite18 Imp">*</asp:RequiredFieldValidator>
</dd>

Thanks,
Princy.

[rootberg]

My issue is that the validation is being triggered when the text box is empty. The two phone number fields in question are optional fields for a larger form. So I would not want to add a required field validator as the fields are not required. Hence my frustration that the validation is being triggered as not valid when the fields are empty.

[rootberg]

Ok... now I investigated this further. I replaced one of the RadMaskedTextBoxes text boxes with a RadTextBox and added a new asp text box, and used jQuery (masked input from digitalbush.com) to format the phone numbers. 
I then ran the page, and tested it by giving each text box focus, and then pressed submit. The RadTextBox  and the RadMaskedTextBox failed the validation, even though they were both empty, but the asp text box worked as intended.

here is my code:

...
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script src="../Scripts/jquery.maskedinput-1.3.min.js" type="text/javascript"></script>
</telerik:RadScriptBlock>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server"
    DecoratedControls="Default, Textbox" />
<div>
    <asp:ValidationSummary ID="ValidationSummary1"
       runat="server" ValidationGroup="ProfileUpdateValidationGroup" />
    <dl>
        <dt>
            Phone
        </dt>
        <dd>
            <asp:TextBox ID="Phone" runat="server" />
            <asp:RegularExpressionValidator
                ID="PhoneRegularExpressionValidator" runat="server"
                ErrorMessage="Please enter a valid phone number for Phone"
                ValidationGroup="ProfileUpdateValidationGroup"
                ControlToValidate="Phone"
                Display="Static"
                ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
                >*</asp:RegularExpressionValidator>
        </dd>

        <dt>Work Phone</dt>
        <dd>
            <telerik:RadTextBox ID="WorkPhone" runat="server"
                CssClass="rfdRoundedCorners"
                ValidationGroup="ProfileUpdateValidationGroup" />
            <asp:RegularExpressionValidator
                ID="WorkPhoneRegularExpressionValidator" runat="server"
                ErrorMessage="Please enter a valid phone number for Work Phone"
                ValidationGroup="ProfileUpdateValidationGroup"
                ControlToValidate="WorkPhone"
                Display="Static"
                ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
                >*</asp:RegularExpressionValidator>
        </dd>
        <dt>Mobile Phone</dt>
        <dd>
            <telerik:RadMaskedTextBox ID="MobilePhone" runat="server"
                Mask="(###) ###-####"  HideOnBlur="true" PromptChar=" "
                CssClass="rfdRoundedCorners"
                ValidationGroup="ProfileUpdateValidationGroup"  />
            <asp:RegularExpressionValidator ID="MobilePhoneRegularExpressionValidator"
                runat="server"
                ErrorMessage="Please enter a valid phone number for Mobile Phone."
                ValidationGroup="ProfileUpdateValidationGroup"
                ControlToValidate="MobilePhone"
                Display="Static"
                ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
                >* </asp:RegularExpressionValidator>
        </dd>
    </dl>
</div>
<telerik:RadButton ID="ButtonSave" runat="server" Text="Save Changes"
    Style="float: right; top: 0px; left: 0px;" Skin="Office2010Blue"
    onclick="ButtonSave_Click" ValidationGroup="ProfileUpdateValidationGroup" />
<telerik:RadScriptBlock runat="server">
<script type="text/javascript">
    jQuery(function ($) {
        $("#<%=WorkPhone.ClientID%>").mask("[phone]", { placeholder: " " });
        $("#<%=Phone.ClientID%>").mask("[phone]", { placeholder: " " });
    });
</script>
</telerik:RadScriptBlock>
...

[Martin]

Hello Guys,

I confirm that this is an issue with the official Q2 2012 SP1 (2012.2.724) release. The good news is that our developers managed to fix it for Q2 2012 SP2 release expected in the mid September.

Meanwhile, you can try the latest internal build of the controls that also includes this fix.

Regards,
Martin
the Telerik team

[rootberg]

Glad to hear i'm not nuts, and its not just me :-)