<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Prova1</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body>
<div class = "conteiner-fluid">
<fieldset>
<legend>Prova</legend>
<form action="">
<div class="row">
<div class="col-12">
<label for="nome" class="generic-label">Nome</label>
<input type="text" id="nome" name="nome" class="generic-input" placeholder="Insira seu nome" required>
</div>
</div>
<div class="row" style="margin-top :10px">
<div class="col-2">
<label class="generic-label">Tipo Pessoa</label>
<input type ="radio" name="tipo" id="tipo-fisica" value="1" checked/>
<label for="tipo-fisica">Fisica</label>
<input type ="radio" name="tipo" id="tipo-juridica" value="2"/>
<label for ="tipo-juridica">Juridica</label>
</div>
<div class="col-3">
<label for="cpf-cnpj" class="generic-label" id="label-cpf-cnpj">CPF</label>
<input type="text" id="cpf-cnpj" name="cpf-cnpj" placeholder="___.___.___.-___" class="generic-input" required min-length="14">
</div>
<div class="col-2">
<label for="cep" class="generic-label">CEP</label>
<input type="text" id="cep" placeholder="____-___" name="cep" class= "generic-input" required min-length="9">
</div>
<div class="col-3">
<label class="generic-label">Estado</label>
<select name="uf" id="uf" class="generic-input" required>
<option value="MG">MG</option>
<option value="SP">SP</option>
<option value="RJ">RJ</option>
<option value="ES">ES</option>
</select>
</div>
<div class="col-2 btns-group">
<input type="submit" class="btn btn-success">
<input type="reset" class="btn btn-info" value="Limpar" onclick="mudaTipo(1")>
</div>
</div>
</form>
</fieldset>
</div>
<script src="js/jquery.js"></script>
<script src="js/mask.js"> </script>
<script src="js/run.js"> </script>
</body>
</html>
body{
background-color: #f1f1f1;
padding-top :15px;
}
fieldset{
border: solid 2px #cccccc;
padding: 20px;
background-color: #fff;
border-radius:5px;
}
legend{
width : inherit;
padding:5px;
color: #000;
font-weight: 600;
}
.generic-label{
display:block;
font-weight: 600;
}
.generic-input{
width:100%;
padding:5px 10px;
background-color: #f1f1f1;
border: solid 1px #cccccc;
}
.generic-input:focus{
outline:0;
}
.row{
display: flex;
align-items:flex-end;
}
.btn-group .btn{
flex-grow:1;
margin-left:10px:
}
$("input[type=radio][name=tipo]").change(function(){
var tipo = $(this).val();
mudaTipo(tipo);
console.log(tipo);
});
$("#cpf-cnpj").mask('000.000.000-00');
$("#cep").mask(00000-000);
function mudaTipo(value){
$("#cpf-cnpj").val();
$("#cpf-cnpj").select():
if(value==2){
$("#cpf-cnpj").mask('00.000.000/0000-00');
$("#label-cpf-cnpj").text('CNPJ');
$("#cpf-cnpj").attr("placeholder", "___.___.___/___.-___");
$("#cpf-cnpj").attr("minlength","18");
}
else{
$("#cpf-cnpj").mask('000.000.000-00');
$("#label-cpf-cnpj").text('CPF');
$("#cpf-cnpj").attr("placeholder", "___.___.___.-___");
$("#cpf-cnpj").attr("minlength","14");
}
}
Olá, qual a dúvida? Você só postou um trecho de código, sem explicar o que quer.
Abraço.
Minha máscara não está funcionando, o que será ?
Está usando jQuery, certo? Até onde sei, você precisa instalar um plugin para as máscaras funcionarem. Você já fez isso?
Chegou a testar a máscara sem mudá-la no evento change, pra garantir que uma máscara básica funciona?
Abraço.
Entendi
Cara, qual é o plugin do Notpad+++ ?
Oi @Nivaldo_Reis2019, creio eu que não seja uma plugin para notepad++, mas sim para o site, tipo o Bootstrap e o jquery.
<script src="js/mask.js"> </script>
Esse arquivo foi você que crior, ou baixou de algum lugar?
O download do plugin que você quer, acho que é esse:
https://igorescobar.github.io/jQuery-Mask-Plugin/
Outra coisa, aparece alguma mensagem no console?
Se você estiver executando a páginas no Chrome:
Clique no botão direito>Clique em especionar página>console
Acho que esse o caminho, não sei se você já sabe! Ver se aparece uma mensagem!
Como disse o Jelson1 acima, você precisa incorporar o plugin corretamente ao seu site, baixando ele e colocando em uma pasta que o seu arquivo html consegue enxergar. E confira no console se há mensagens de erros. Além do indicado acima, pode pressionar F12 na página para abrir o painel do desenvolvedor.
Abraço.