Illusion Illusion - 12 days ago 5
jQuery Question

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

Answer

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

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