Credit Cards Masks

7 posts, 0 answers
  1. Jugoslav
    Jugoslav avatar
    73 posts
    Member since:
    Mar 2011

    Posted 15 Jan 2013 Link to this post

    I need to set the mask when they start to type e.g.
    if they enter 4 the mask should be 16 digits split into 4 groups of 4 digits each #### #### #### #### - VISA
    if they enter number 51-55 the mask should be same as above - MASTERCARD
    if they enter 6011 or 65 the mask should be same with the previous two - DISCOVER
    if they enter 34 or 37 the last group should be 3 character instead (15 in total) - AMEX

    Thank you

    EDIT: In addition, the very same regex which works for regular textbox does not work (ONLY AMEX) for Masked textbox:
    <telerik:RadMaskedTextBox ID="txtCCNumber" runat="server"
            Mask="#### #### #### ####" ValidationGroup="CardValidate" />
                        <asp:RequiredFieldValidator ID="cardnumbervalidator" runat="server"
                            ControlToValidate="txtCCNumber" ErrorMessage="Card Number is Required!"
                            SetFocusOnError="True" ValidationGroup="CardValidate">!</asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="cardregvalidator" runat="server"
                            ControlToValidate="txtCCNumber" ErrorMessage="Card Number is not valid!"
                            ValidationExpression="^((4\d{3})|(5[1-5]\d{2})|(6011))-?\d{4}-?\d{4}-?\d{4}|3[4,7][\d\s-]{13}$" ValidationGroup="CardValidate">!</asp:RegularExpressionValidator>
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 17 Jan 2013 Link to this post

    Hello Jugoslav,

    I think you're better off using the standard RadTextBox because it almost sounds like it's returning the last digit as a space, thus the reason your regular expression doesn't work for AMEX.
  3. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 21 Jan 2013 Link to this post

    Hello Jugoslav,

    Another solution is to use two RadMaskedTextBoxes. When you choose the card type you can check which one is selected and switch to the RadMaskedTextBoxe which meet the requirement.

    Greetings,
    Kostadin
    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.
  4. Manahil
    Manahil avatar
    2 posts
    Member since:
    Jan 2019

    Posted 23 Jan 2019 Link to this post

    I also wanted to know how I can use MASTERCARD in Telerik?
  5. Brian
    Brian avatar
    20 posts
    Member since:
    Sep 2019

    Posted 05 May Link to this post

    I know this is a but old, but I ran into this while i was looking at radnumeric for CC. Check out if telerik has anything new for it. The RadMonthYearPicker is extremelly helpful with month year requirements.

     

    We used this in the past for AMEX, you can see how other CCs would fit in. You could have buttons like the Telerik demo, but they dont mask the cards in the demo. you could after they click on a card to use

    https://demos.telerik.com/aspnet-ajax/monthyearpicker/overview/defaultvb.aspx?show-source=true

    Take a look at this too

    https://www.regular-expressions.info/creditcard.html

    Also code project has a nice one that someone did. jsut do a search for credit card valildation.

    function SetMask(args) {
     
        myRMTextBox = $find('<%= RadNumericTextBoxCC.ClientID%>');
        var mask;
     
        if (args != 'AMEX') {
            mask = [                       
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadLiteralMaskPart('-'),         // space
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadLiteralMaskPart('-'),         // space
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
            ];
     
        } else {
            mask = [
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadLiteralMaskPart('-'),         // space
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadLiteralMaskPart('-'),         // space
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadLiteralMaskPart('-'),         // space
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
                new Telerik.Web.UI.RadDigitMaskPart(),
            ];
        }
     
        myRMTextBox._length = 0;
        myRMTextBox._setMask(mask);
        myRMTextBox.set_value('');
    }

     

     

  6. Brian
    Brian avatar
    20 posts
    Member since:
    Sep 2019

    Posted 05 May in reply to Brian Link to this post

    RadNumericTextBoxCC is a RadMask
  7. Rumen
    Admin
    Rumen avatar
    14386 posts

    Posted 08 May Link to this post

    Hi Brian,

    Thank you for contributing to this useful topic and for the provided example and sample link!

    We do appreciate this and I am glad to award you with Telerik points.

    Keep up to good work and stay safe!

    Regards,
    Rumen
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top