1

Estou estudando javascript e jQuery e resolvi fazer uma página simples para validação de um campo tipo data. Utilizei o plugin masked input e limitei o campo à 10 caracteres. Estou trabalhando com 3 arquivos:

Meu index:

<html>
<head>
    <title>Teste jquery data</title>
</head>
<meta charset="utf-8">
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="jquery.maskedinputs.js" type="text/javascript"></script>
<script src="mascaras.js" type="text/javascript"></script>
<body>
    <form method="POST" action="#"> 
        <label>Data: </label>
        <input type="form_text" name="data" maxlength=10 id="data">
        <input type="submit" class="Enviar" name="data" >
    </form>     
</body>

E um arquivo com a função para validar datas:

jQuery(function($)(
$("#data").mask("99/99/9999");
));

Li os outros posts aqui do SO e tentei aplicar as soluções que resolveram os problemas dos demais, mas no meu caso ainda tem algo faltando. o campo simplesmente não insere "/" quando tento digitar a data.

3
  • 1
    por que não usa o datepicker para isso? jqueryui.com/datepicker
    – Lodi
    13/02/2019 às 13:46
  • 1
    Obrigado @Lodi Por alguma razão, o datepicker foi a única coisa que funcionou até o momento, embora demore a carregar a página.
    – the_piper
    13/02/2019 às 14:26
  • 1
    De qualquer maneira se você verificar o repositório do jQuery Masked Input verá que o projeto está morto há pelo menos 4 anos. Nem os autores aconselham mais a usá-los, então é provável que nem funcione com o jQuery 3.3.1. 13/02/2019 às 16:00

3 Respostas 3

3

Utilizando o plugin jQuery-Mask-Plugin

<html>
<head>
    <title>Teste jquery data</title>
</head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<body>
    <form method="POST" action="#"> 
        <label>Data: </label>
        <input type="form_text" name="data" maxlength=10 class="data" id="data">
        <input type="submit" class="Enviar" name="data" >
    </form>     
</body>

<script>
$(document).ready(function() {   
	set_mascara();
});

function set_mascara() {
   $('.data').mask("00/00/0000", {selectOnFocus: true});
}
</script>

1
  • Eu vou tentar refazer tudo pois, bizarramente, nenhuma alternativa além do datepicker funciona. Já posto o resultado
    – the_piper
    13/02/2019 às 15:42
3

Quando sua função de máscara é executada, o input ainda não existe no seu documento.

Você precisa colocar seu JS no fim do documento ou postergar a execução do código usando algum evento como DOMContentReady.

No seu caso o mais simples seria:

<html>
    <head>
        <meta charset="utf-8">
        <title>Teste jquery data</title>
    </head>
    <body>
        <form method="POST" action="#"> 
            <label>Data: </label>
            <input type="form_text" name="data" maxlength=10 id="data">
            <input type="submit" class="Enviar" name="data" >
        </form>     
        <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
        <script src="jquery.maskedinputs.js" type="text/javascript"></script>
        <script src="mascaras.js" type="text/javascript"></script>
    </body>
</html>
1
  • Mesmo procedendo assim, não funcionou. Embora eu não tenha testado com eventos.
    – the_piper
    13/02/2019 às 14:27
0

Seguindo as orientações acima e usando um arquivo a parte para o script, funcionou. Só precisei chamar o arquivo criado, setmascara.js , após a declaração do <form>

Ficando assim:

<html>
<head>
    <title>Teste Jquery</title>
</head>
<script src="jQuery331.js" type="text/javascript"></script>
<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<meta charset="UTF-8">
    <body>
       <form method="POST" action="#">
        <label>Insira aqui a data :</label>
        <input type="form_text" name="data" maxlength=10 class="data" id="data">
        <input type="submit" class="Enviar" name="data" >
       </form>
       <script src="setmascara.js" type="text/javascript"></script>
    </body>

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 .