This is a migrated thread and some comments may be shown as answers.

Masked text box triggers regular expression validator when empty

5 Answers 382 Views
Input
This is a migrated thread and some comments may be shown as answers.
rootberg
Top achievements
Rank 2
rootberg asked on 16 Aug 2012, 08:46 PM

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" />
...

5 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 17 Aug 2012, 05:31 AM
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.
0
rootberg
Top achievements
Rank 2
answered on 17 Aug 2012, 12:46 PM
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.
0
rootberg
Top achievements
Rank 2
answered on 17 Aug 2012, 02:14 PM
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("(999)999-9999", { placeholder: " " });
        $("#<%=Phone.ClientID%>").mask("(999)999-9999", { placeholder: " " });
    });
</script>
</telerik:RadScriptBlock>
...


0
Accepted
Martin
Telerik team
answered on 22 Aug 2012, 10:15 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
rootberg
Top achievements
Rank 2
answered on 22 Aug 2012, 01:02 PM
Glad to hear i'm not nuts, and its not just me :-)
Tags
Input
Asked by
rootberg
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
rootberg
Top achievements
Rank 2
Martin
Telerik team
Share this question
or