0
I’m trying to apply this mask on my form but it’s not working: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html
I did everything as taught but the mask does not work, I’m trying to apply it to the input of the CPF, follow my code: https://pastebin.com/i92RnLHS
CPF input is on line 39 and javascript is on line 170.
<!doctype html>
<title>Formulário de Cadastro</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<header id="cabecalho">
<hgroup >
<h1>Formulário de Cadastro</h1>
<h2>Feito com Bootstrap</h2>
</hgroup>
</header>
</div>
</div>
<!-- INICIO FORMULARIO -->
<div class="center-block formulario">
<form class="form-horizontal" id="needs-validation" novalidate>
<div class="form-group">
<input class="form-control" placeholder="Nome" type="text" required>
<div class="invalid-feedback alinhamento">
Por favor, digite seu nome.
</div></div>
<div class="form-group">
<input class="form-control" placeholder="Sobrenome" type="text" required>
<div class="invalid-feedback alinhamento">
Por favor, digite seu sobrenome.
</div></div>
<div class="form-group">
<input class="form-control" id="cpf" type="text" placeholder="CPF" required>
<div class="invalid-feedback alinhamento">
Por favor, digite seu CPF.
</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Data de Nascimento" required>
<div class="invalid-feedback alinhamento">
Por favor, digite sua data de nascimento.
</div>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Telefone">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Celular">
</div>
<div class="form-group">
<input class="form-control" placeholder="Endereço" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Número" type="number">
</div>
<div class="form-group">
<input class="form-control" placeholder="Complemento" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Bairro" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="CEP" type="text" required>
<div class="invalid-feedback alinhamento">
Por favor, digite seu CEP.
</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Cidade" type="text">
</div>
<div class="form-group">
<select class="form-control" name="estado">
<option selected="" value="">Selecione o Estado (UF)</option>
<option value="Acre">Acre</option>
<option value="Alagoas">Alagoas</option>
<option value="Amapá">Amapá</option>
<option value="Amazonas">Amazonas</option>
<option value="Bahia">Bahia</option>
<option value="Ceará">Ceará</option>
<option value="Distrito Federal">Distrito Federal</option>
<option value="Espírito Santo">Espírito Santo</option>
<option value="Goiás">Goiás</option>
<option value="Maranhão">Maranhão</option>
<option value="Mato Grosso">Mato Grosso</option>
<option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
<option value="Minas Gerais">Minas Gerais</option>
<option value="Pará">Pará</option>
<option value="Paraíba">Paraíba</option>
<option value="Paraná">Paraná</option>
<option value="Pernambuco">Pernambuco</option>
<option value="Piauí">Piauí</option>
<option value="Rio de Janeiro">Rio de Janeiro</option>
<option value="Rio Grande do Sul">Rio Grande do Sul</option>
<option value="Rio Grande do Norte">Rio Grande do Norte</option>
<option value="Rondônia">Rondônia</option>
<option value="Roraima">Roraima</option>
<option value="Santa Catarina">Santa Catarina</option>
<option value="São Paulo">São Paulo</option>
<option value="Sergipe">Sergipe</option>
<option value="Tocantins">Tocantins</option></select>
</div>
<div class="form-group">
<input class="form-control" placeholder="Email" type="email" required>
<div class="invalid-feedback alinhamento">
Por favor, digite seu Email.
</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Login" type="text" required>
<div class="invalid-feedback alinhamento">
Por favor, digite um login.
</div>
</div>
<div class="form-group">
<input placeholder="Senha" class="form-control" type="password" required>
<div class="invalid-feedback alinhamento">
Por favor, digite uma senha.
</div>
</div>
<div class="form-group">
<input placeholder="Confirme a senha" class="form-control" type="password" required>
<div class="invalid-feedback alinhamento">
Por favor, redigite sua senha.
</div>
</div>
<div class="form-group">
<button class="btn-lg btn-primary form-control" type="submit">Enviar</button>
</div><br/>
<!-- FIM DOS CAMPOS DO FORMULÁRIO -->
</form>
<script>
(function () {
'use strict';
window.addEventListener('load', function () {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
<script>
$(document).ready(function(){
$('#cpf').mask('000.000.000-00');
});
</script>
</div>
</div><br/>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>
</body>
Actually may be in the "footer" same, but just the tag
<script>come before the scrip he created. Enter<head>and at the end of the page goes from each one, but it seems that it is a practical broa to come at the end not to crash loading the page by problem in the script– hugocsl
@hugocsl Well noted, I usually tell people to put in HEAD because it’s custom, usually it gets <scripts> stay there
– PauloHDSousa
Our brother Rigadão ai huh... simple thing and I here killing myself, I climbed the scripts to the head of html and it worked perfectly... vlwww
– Daniel Fortunato