jQuery does not format the date field

Asked

Viewed 44 times

1

I am studying javascript and jQuery and decided to make a simple page for validation of a data field. I used the plugin Masked input and limited the field to 10 characters. I am working with 3 files:

My 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>

And a file with the function to validate dates:

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

I read the other posts here in the OS and tried to apply the solutions that solved the problems of others, but in my case there is still something missing. the field simply does not insert "/" when I try to enter the date.

javascript jquery
  • 1

    Why don’t you use datepicker for that? https://jqueryui.com/datepicker/

  • 1

    Thanks @Lodi For some reason, datepicker was the only thing that worked so far, although it takes a while to load the page.

  • 1

    Anyway if you check the jQuery Masked Input repository you will see that the project has been dead for at least 4 years. Nor do the authors advise you to use them anymore, so it probably won’t even work with jQuery 3.3.1.

3 answers

3

When your mask function is executed, the input does not yet exist in your document.

You need to put your JS at the end of the document or postpone code execution using some event like DOMContentReady.

In your case the simplest would be:

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

  • Even if it did, it didn’t work. Although I haven’t tested with events.

3


Using the 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>

  • I will try to redo everything because, bizarrely, no alternative other than datepicker works. Already put the result

0

Following the above guidelines and using a part file for the script, it worked. I only had to call the file created, setmascara.js , after the declaration of the <form>

Thus remaining:

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

Browser other questions tagged javascript jquery

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