Live Update data-mask attribute for correct data masking

Question

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 ??

Answer 1

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

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