Improve company productivity with a Business Account.Sign Up

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1206
  • Last Modified:

Masked Input Jquery

I have an ordering screen which our customer service dept uses, and when a customer comes back to reorder we pre populate the credit card data, and exclude the CCV.

I would like to MASK the Credit Card #, BUT would like to show the last 4 digits

Ideal display: XXXX XXXX XXXX 1234

Current: 1234 1234 1234 1234

If the field is empty (new order, or the info in removed the field, I currently use masking from

This also need to pass validation:

$('#OrderCcNumber').bind('input modified', function() {
        $(' img').css({opacity:0.5});
        switch (this.value.substr(0, 1)) {
            case '3':
                $(this).mask('9?999 999999 99999', {placeholder:"X", allow: true});
            case '4':
                //$(this).mask('9?999 9999 9999 9999', {placeholder:"X", allow: true});
                $(this).mask('9?999 9999 9999 9999', {placeholder:"X", allow: true});
            case '5':
                $(this).mask('9?999 9999 9999 9999', {placeholder:"X", allow: true});
            case '6':
                $(this).mask('9?999 9999 9999 9999', {placeholder:"X", allow: true});

Open in new window

PHP (Cake)
echo $this->Form->input('Order.cc_number', array(
    'class' => 'required cc',
    'label' => 'Card Number',
    'data-validate' => '{messages:{cc:"Please enter a valid credit card number."}}'

Open in new window

  • 2
  • 2
1 Solution
I would just trigger a change on the input at page load (after your masking plugin has been initiated)


Saves messing about with anything else.
xtreme109Author Commented:
problem is it does not retain the existing value

I have tried what you said.

So currently there is jquery in place to detect which credit card type (based off of the first digit), and will mask with "X"'s the format of the card number.

However if a card number already exist in the textbox on the load of the page, i would like to retain the value of the credit card number, But mask the partial credit card number.

Problem is that typical "masking" is to show format, not disguise the input.
I thought your masking was masking as you type.
In that case at the server place the CC in an hidden input.
In the OrderCcNumber input mask the number yourself i.e. replace it with x's bar the last 4 digits.  So there is no number in the input

When the form is submitted just do a check against the OrderCcNumber input and the name of the hidden input. If OrderCcNumber  consists of xxxx xxxx etc and the hidden input is set then you use the value in the hidden input else use OrderCcNumber value.
xtreme109Author Commented:
thanks for the direction!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now