Uncaught Typeerror when using Jquery Mask Plugin

Asked

Viewed 1,044 times

2

I received "Uncaught Typeerror" while using jQuery’s "Mask" function Mask Plugin.

erro no chrome

Here are my includes in the archive editar_usuario.php.

<script type="text/javascript" src="<?php echo $site."js/chama_ajax.js" ?>"></script>
<script type="text/javascript" src="<?php echo $site."js/jquery/jquery-3.2.1.min.js" ?>"></script>
<script type="text/javascript" src="<?php echo $site."js/jquery_mask_plugin/jquery.mask.min.js" ?>"></script>
<script type="text/javascript" src="<?php echo $site."js/validacoes.js" ?>"></script>
<script type="text/javascript" src="<?php echo $site."js/mascaras_edit.js" ?>"></script>
<script type="text/javascript" src="<?php echo $site."js/js.js" ?>"></script>

My masks code is on file mascaras_edit.js:

$(document).ready(function($) {
  $('#cep_edit').mask('00000-000');
  $('#telefone_edit').mask('(00) 0000-0000');
  $('#celular_edit').mask('(00) 00000-0000');
  $('#cnpj_edit').mask('00.000.000/0000-00', {reverse: true});
  $('#cpf_edit').mask('000.000.000-00', {reverse: true});
});

Here is the code (php/html) of the form where the Mask function is being used.

<div class="col-lg-6 form-group" id="cpf_div">
  <label>CPF</label>
  <input class="form-control" type="text" name="cpf_edit" id="cpf_edit" size="40" value="<?php echo $r['cpf'];?>">
</div>
<div class="col-lg-6 form-group">
  <label>Telefone Fixo</label>
  <input class="form-control" type="text" name="telefone_edit" id="telefone_edit" size="40" value="<?php echo $r['telefone'];?>">
</div>
<div class="col-lg-6 form-group">
  <label>Telefone Celular</label>
  <input class="form-control" type="text" name="celular_edit" id="celular_edit" size="40" value="<?php echo $r['celular'];?>">
</div>
<div class="col-lg-6 form-group" id="cep_div">
  <label>CEP</label>
  <input class="form-control" name="cep_edit" id="cep_edit" type="text" maxlength="9" size="40">
</div>

I tried to follow tips from other questions asked but nothing worked. I’m managing to use the plugin in other parts of the code less in the editing form, also tried to use the plugin’s "Masked" function and it didn’t work (in that file).

php javascript jquery

1 answer

3


Make sure the order of the libraries is correct. Loading jQuery should always come first. See below Mask Input working. Check the other files .js are not causing any conflict (see if the console shows any errors).

Also check if this variable $site is returning the correct library path (see source code).

$(document).ready(function($) {
  $('#cep_edit').mask('00000-000');
  $('#telefone_edit').mask('(00) 0000-0000');
  $('#celular_edit').mask('(00) 00000-0000');
  $('#cnpj_edit').mask('00.000.000/0000-00', {reverse: true});
  $('#cpf_edit').mask('000.000.000-00', {reverse: true});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.12/jquery.mask.min.js"></script>
<div class="col-lg-6 form-group" id="cpf_div">
  <label>CPF</label>
  <input class="form-control" type="text" name="cpf_edit" id="cpf_edit" size="40" value="<?php echo $r['cpf'];?>">
</div>
<div class="col-lg-6 form-group">
  <label>Telefone Fixo</label>
  <input class="form-control" type="text" name="telefone_edit" id="telefone_edit" size="40" value="<?php echo $r['telefone'];?>">
</div>
<div class="col-lg-6 form-group">
  <label>Telefone Celular</label>
  <input class="form-control" type="text" name="celular_edit" id="celular_edit" size="40" value="<?php echo $r['celular'];?>">
</div>
<div class="col-lg-6 form-group" id="cep_div">
  <label>CEP</label>
  <input class="form-control" name="cep_edit" id="cep_edit" type="text" maxlength="9" size="40">
</div>

Browser other questions tagged php javascript jquery

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