Jquery-Mask plugin does not work

Asked

Viewed 458 times

1

I’m having trouble inserting a mask into an input, follow my codes:

My login screen I want to insert the mask:

    <?php
/*
* Create by Andre Tohouca Lacomski on 28/03/2019
*/
defined('BASEPATH') OR exit ('No direct script access allowed');
 ?>

<div class="col-md-6 col-md-offset-3" ng-controller='ctrLogin'>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="center">Autenticação</h3>
    </div><br>
    <div class="panel-body">
      <form>
        <div class="input-group">
          <span class="input-group-addon">CPF:</span>
          <input class="form-control cpfInput" ng-model="cpf">
        </div><br>
        <div class="input-group">
          <span class="input-group-addon">Senha: </span>
          <input class="form-control" type="password" ng-model="senha">
        </div><br>
          <label class="radio-inline">
            <input ng-model="tipo" type="radio" name="optradio" value="candidato" checked>Candidato </label>
          <label class="radio-inline">
            <input ng-model="tipo" type="radio" name="optradio" value="professor">Professor </label>
          <label class="radio-inline">
            <input ng-model="tipo" type="radio" name="optradio" value="admin">DIRPPG </label><br><br>
        <button class="btn btn-primary col-md-offset-5 col-xs-offset-5" type="submit" ng-click="login(cpf, senha, tipo)">Login</button>
      </form><br>
      <a class="pull-left" href="#!/candidato/cadastro_candidato">Criar conta</a>
      <a class="pull-right" href="#!recuperarsenha">Esqueceu a Senha?</a>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.cpfInput').mask('999.999.999-99');
});
</script>

I installed jquery and jquery-Mask via npm and call them in my home like this:

<!-- Jquery and Bootstrap-->
<script src="<?php echo base_url();?>node_modules/jquery/dist/jquery.js"></script>
<script src="<?php echo base_url();?>node_modules/jquery/dist/jquery.min.js"></script>
<script src="<?php echo base_url();?>node_modules/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
<script src="<?php echo base_url();?>node_modules/jquery-mask-plugin/dist/jquery.mask.js"></script>
<script src="<?php echo base_url();?>node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

I don’t know if I’m calling it wrong because I followed a few tips and failed. In the other system I use the mask works normal.

Note: It is no use to change the npm for:

 <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>
  • Vc tb is loading 2x the same library: "jquery.js" and "jquery.min.js", "jquery.mask.min.js" and "query.mask.js"... the difference is that one is minimized and the other is not minimized

  • I get it, that I didn’t know

2 answers

1

In the new version is 0 instead of 9, see below:

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

<script>
  jQuery(document).ready(function(){
    jQuery('.cpfInput').mask('000.000.000-00');
  });
</script>

<input class="cpfInput">

  • When I test in separate file it works, but when along with my project it stops working. I’m using Angular may be there is conflict because both jquery and angular use $

  • @Andrelacomski tries to change the $ for jQuery

  • Still unsuccessful

  • @Andrelacomski when inspecting the project, can you see the imported jquery? A possible test to do is also to try to run some direct jquery command on the console.

  • @Andrélins it matters the jquery, I’m searching more about, because it’s not only this error that occurs in the project. My radio input does not check in the field I choose

1


I solved the problem by placing my jquery link before bootstrap and angular. Thank you all for your answers!

Browser other questions tagged

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