3
I am trying to make a mask for CPF and CNPJ within the same field, the user can choose whether to fill the CPF or CNPJ through two Radiobuttons, but the problem is that I can’t change the mask of the field when I switch between an option or another. I wanted when the user clicked on Cpf the mask to assume the Cpf format and the same when clicking on cnpj. I am making the page using ASP.net and also Jquery-Mask-Plugin. I don’t know for what reason, but the Mask() function is not working in my code, so I chose to use the data-Mask attribute in the input itself. Here is my code:
$(document).ready(function () {
var $txtCpf = $("#<%=txtCPF.ClientID %>");
if ($("#<%=selectModeInsc.ClientID %> input").val() == "CPF"){
$txtCpf.attr("data-mask", "999.999.999-99");
}
$("#<%=selectModeInsc.ClientID %> input").click(function () {
if (valor == "CNPJ") {
$txtCpf.removeAttr("data-mask");
$txtCpf.attr("data-mask", "99.999.999/0001-99");
}
});
});<div class="col-lg-3">
<div class="form-group">
<asp:RadioButtonList
ID="selectModeInsc" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="CPF" Value="CPF" Selected="True"/>
<asp:ListItem Text="CNPJ" Value="CNPJ"/>
</asp:RadioButtonList>
<asp:TextBox runat="server" ID="txtCPF" class="form-control" MaxLength="14" ></asp:TextBox>
</div>
</div>Note: I have tried several ways, this code above is one of the times I have implemented.
Does the Mask function not work? Did you add the right jquery? Are there any errors in the console? What you are doing assigning data-Mask will not add a mask to your input, it will only add a date attribute with that value, unless you treat, or have a plugin that does, the conversion of that property into mask. Such is the case?
– Aline
I added the link to the plugin, already tried with an external link and also copied the code to a file in a project folder, but still the Mask function does not work. The data-Mask attribute works, with it I can leave it in the format cnpj or Cpf, the problem is that I can’t remove the attribute and put it in the other format when I change the radiobutton.
– Vinícius Santos
That’s exactly what I said: you change the date-Mask, but that doesn’t mean you applied the Mask. Normally for the plugin to assign/reassign values, you need to call an init function or something like that. You call something like: $(".Cpf"). Mask(), in the ready of the document?
– Aline
I thought the data-Mask attribute had to do with the plugin, but there isn’t, it was missing there too. The problem is that the plugin script is not working anyway, I already made a code that put the function $txtCpf.Mask(""). I created another web page form and it worked, but this page does not work. Could it be some scritp that is loaded on the master page (a page that loads the default layout)?
– Vinícius Santos
You are including the js of Mask, assigning in load:
$(".classe").mask("999-999-999-99")and does not give any error in the console? Only does not appear the mask?– Aline
It doesn’t present any errors, but I managed to make it work another way. I appreciate the effort in helping me. Thank you!!!
– Vinícius Santos