Erron no Java Script? Não estou conseguindo linkar as máscaras?

<!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.

1 curtida

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.

1 curtida

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 :point_up::point_up: 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!

1 curtida

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.