0

Estou tentando aplicar essa máscara no meu formulário mas não está dando certo: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html

Fiz tudo conforme ensinado mas a máscara não funciona, estou tentando aplica-lá no input do CPF, segue meu código: https://pastebin.com/i92RnLHS

O input do CPF está na linha 39 e o javascript está na linha 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>

1 Resposta 1

0

Seu problema é que você está chamando o código

 $(document).ready(function(){
     $('#cpf').mask('000.000.000-00');
 });  

antes de carregar o Jquery, só mover essas duas linhas para antes da execução do código acima.

  <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>     
3
  • Na verdade pode estar no "rodapé" mesmo, mas basta a tag <script> vir antes do scrip que ele criou. Entre usar no <head> e no final da página vai de cada um, mas parece que é uma broa prática vir no final para não travar o carregamento da página por problema no script
    – hugocsl
    Commented 19/01/2018 às 17:20
  • @hugocsl Bem observado, eu geralmente falo para as pessoas colocarem no HEAD por ser costume, geralmente fica <scripts> ficam lá Commented 19/01/2018 às 17:22
  • Nossa brother brigadão ai hein... coisa simples e eu aqui me matando, subi os scripts para o head do html e funcionou perfeitamente... vlwww Commented 19/01/2018 às 17:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .