CODEWITHSUNDEEP
jquerytwitter-bootstrap-3maskingdata-masking
Yunus Aslam
Yunus Aslam

Reputation: 2466

Live Update data-mask attribute for correct data masking

I am using boot-strap data masking on my form. I have a select drop down where the user can select different Card Types. For example American Express, Discover, Visa....

When the user selects American Express then I wan the text input for credit card number to mask the input as "5555-555555-55555". When any other Credit Card type then I want the inout mask should be "5555-5555-5555-5555". 16 digits for credit card other than American Express and 15 digits for American Express along with hyphens at correct place.

I have this in my code till now

$(document).on("change", "#creditcardtype", function(){
    if($(this).val() == "American Express"){
        $("#Cnumber").attr("data-mask","9999-999999-99999");
    }else{
        $("#Cnumber").attr("data-mask", "9999-9999-9999-9999");
    }
});

This code updates the data mask for the first time and does not update the next time if the card type is changed. Any help please ??

Upvotes: 1

Views: 1930

Answers (1)

Majeed
Majeed

Reputation: 144

Instead of changing attributes, re-initialize masking on the selected field. For Example 

$(element).mask('099.099.099.099');

Upvotes: 1

Related Questions