Masked text box triggers regular expression validator when empty

6 posts, 1 answers
  1. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 16 Aug 2012 Link to this post

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

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Aug 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 17 Aug 2012 Link to this post

    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.
  5. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 17 Aug 2012 Link to this post

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


  6. Answer
    Martin
    Admin
    Martin avatar
    811 posts

    Posted 22 Aug 2012 Link to this post

    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.
  7. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 22 Aug 2012 Link to this post

    Glad to hear i'm not nuts, and its not just me :-)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017