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

Credit Cards Masks

6 Answers 385 Views
Input
This is a migrated thread and some comments may be shown as answers.
Jugoslav
Top achievements
Rank 1
Jugoslav asked on 15 Jan 2013, 09:15 PM
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>

6 Answers, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 2
answered on 17 Jan 2013, 09:56 PM
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.
0
Kostadin
Telerik team
answered on 21 Jan 2013, 10:02 AM
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.
0
Manahil
Top achievements
Rank 1
answered on 23 Jan 2019, 03:01 PM
I also wanted to know how I can use MASTERCARD in Telerik?
0
Brian
Top achievements
Rank 1
Veteran
answered on 06 May 2020, 01:16 AM

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('');
}

 

 

0
Brian
Top achievements
Rank 1
Veteran
answered on 06 May 2020, 01:27 AM
RadNumericTextBoxCC is a RadMask
0
Rumen
Telerik team
answered on 08 May 2020, 08:38 AM

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.
Tags
Input
Asked by
Jugoslav
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 2
Kostadin
Telerik team
Manahil
Top achievements
Rank 1
Brian
Top achievements
Rank 1
Veteran
Rumen
Telerik team
Share this question
or