jQuery Mask does not work

Asked

Viewed 1,036 times

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>

1 answer

0


Your problem is that you are calling the code

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

before loading Jquery, just move these two lines to before executing the above code.

  <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>     
  • 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 Well noted, I usually tell people to put in HEAD because it’s custom, usually it gets <scripts> stay there

  • 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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.