Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Masked Input Jquery

Posted on 2014-01-16
4
Medium Priority
?
1,081 Views
Last Modified: 2014-01-16
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 http://digitalbush.com/projects/masked-input-plugin

This also need to pass validation:


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

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

0
Comment
Question by:xtreme109
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39786328
I would just trigger a change on the input at page load (after your masking plugin has been initiated)

$("#OrderCcNumber").change()

Saves messing about with anything else.
0
 
LVL 2

Author Comment

by:xtreme109
ID: 39786414
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.
0
 
LVL 58

Accepted Solution

by:
Gary earned 1500 total points
ID: 39786444
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.
0
 
LVL 2

Author Closing Comment

by:xtreme109
ID: 39786849
thanks for the direction!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question