Jquery - I can't apply a mask in a field

Question

I'm new using Jquery, and I'm trying to apply a mask in a field but i get the following error:

TypeError: $(...).mask is not a function

Here is my HTML

<div class="col-md-6">
    <div class="form-group">
        <label>CPF</label>
        <input type="text" maxlength="17" id="cpf" name="cpf" class="form-control cpf" />
    </div>
</div>

And here is my script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#cpf").mask("999.999.999-99");
});
</script>

I already try to do $(document).ready(function($){} But i get no success. Does anyone have an ideia ? I'm kind lost after alot of tries

Have you tried to use `.cpf` class instead `#cpf`?? – Carlos Parra May 04 '16 at 03:38 — Carlos Parra, May 04 '16 at 03:38

score 1 · Answer 1 · answered May 04 '16 at 03:45

The main problem is the "https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js" link. I'm getting a "refused to execute from ... because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled". The first two lines do not include the protocol.

The solution (works in my test anyway, ping me if you have problems / questions):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js" type="text/javascript"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js" type="text/javascript"></script>

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

Maybe this can help you. I think you need a jQuery mask plug in. I saw several but this post will steer you in the right direction JQuery apply input mask to field onfocus and remove onblur so to avoid problems with placeholder text

edited May 23 '17 at 10:33

Community

1
1

answered May 04 '16 at 03:25

WinginSue

60
6

You should include the relevant information from that link in your answer. Otherwise, this answer is better suited as a comment to the original question. – Wes Foster May 04 '16 at 03:27
The OP has this in his code `` – j08691 May 04 '16 at 03:33

score 0 · Answer 3 · answered May 04 '16 at 03:32

Are you trying to access the libraries locally?... because if you are you need to add the http protocol or https to the jquery library and the jquery form validator

You can't access the libraries locally with out them and thus, $()mask is not recognized as a function

like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>

Gerard · Answer 4 · 2016-05-04T04:06:23.620

0

Use the following

<input type="text" pattern="[0-9]{3}\.[0-9]{3}\.[0-9]{3}\-[0-9]{2}" value="" name="cpf" id="cpf" maxlength="17" placeholder="CPF">

JSFiddle here

edited May 04 '16 at 04:06

answered May 04 '16 at 03:37

Gerard

15,418
5
30
52

have you tried the code above what did it result into? – guradio May 04 '16 at 03:52
When you enter the wrong format and press enter you will be notified with a message. And yes, I tried the code. – Gerard May 04 '16 at 03:54
with just the code?or there are other things that needs to be done?with just the code i doubt it will work. with out any added explanation this is not to be considered an answer but a comment – guradio May 04 '16 at 03:56

score 0 · Answer 5 · answered May 04 '16 at 03:43

Probably you should use class selector $('.cpf').mask(); instead id selector. This should work:

$(document).ready(function(){

    $(".cpf").mask("000.000.000-00");
});

Also, you can use this other way:

<input type="text" name="field-name" data-mask="000.000.000-00" />

score 0 · Answer 6 · edited May 23 '17 at 12:10

$(document).ready(function() {

  $("#cpf").mask("999.999.999-99");
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<div class="col-md-6">
  <div class="form-group">
    <label>CPF</label>
    <input type="text" maxlength="17" id="cpf" name="cpf" class="form-control cpf" />
  </div>
</div>

<script src="https://rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>

use the link about instead of your link

use rawgit.com check here for more info

Jquery - I can't apply a mask in a field

6 Answers6