jQuery mask is not working

Question

I want to put a mask on the phone number but it’s not working, I’ve tried all the different ways to call the jQuery file and jQuery.mask. I’ll show you my code, am I doing something wrong? (in another project I did exactly this way and it works...)

<script type="text/javascript">
  
  function checaForm()
  {
    var nome = $('#name').val();
    var email = $('#email').val();
    var celular = $('#phone').val();

    if(nome == "")
    {
      alert("Por favor digite um nome.");
      return false;
    }

    if(email == "")
    {
      alert("Por favor digite um email.");
      return false;
    }

    
    var re = /[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/igm;
    if (!re.test(email))
    {
      alert('O e-mail digitado é inválido.');
      return false;
    }


    if(celular == "")
    {
      alert("Por favor digite seu celular.");
      return false;
    }

    if(celular.substr(5,1) == '3'){
       alert("Número de celular inválido.");
       return false;
    }

    if(celular.length <= 10){
       alert("Digite seu número completo, com ddd.");
       return false;
     }


  

  var behavior = function (val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
options = {
    onKeyPress: function (val, e, field, options) {
        field.mask(behavior.apply({}, arguments), options);
    }
};

$('#phone').mask(behavior, options);
    }   
</script>

<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.mask.js"></script>

<div class="modal-body">
    
    <form id="formcall" class="contact100-form validate-form">
                <div class="wrap-input100 validate-input">
                    <input id="name" class="input100" type="text" name="name" placeholder="Seu nome">
                    <span class="focus-input100"></span>
                    <label class="label-input100" for="name">
                        <span class="lnr lnr-user m-b-2"></span>
                    </label>
                </div>


                <div class="wrap-input100 validate-input">
                    <input id="email" class="input100" type="text" name="email" placeholder="Seu e-mail">
                    <span class="focus-input100"></span>
                    <label class="label-input100" for="email">
                        <span class="lnr lnr-envelope m-b-5"></span>
                    </label>
                </div>


                <div class="wrap-input100 validate-input">
                    <input id="phone" class="input100" type="text" name="phone" placeholder="Seu celular">
                    <span class="focus-input100"></span>
                    <label class="label-input100" for="phone">
                        <span class="lnr lnr-smartphone m-b-2"></span>
                    </label>
                </div>


                <div class="container-contact100-form-btn" style="text-align: center;">
                    <button id="envligacao" class="btn btn-primary btn-circle btn-translate--hover mt-4" onClick="return checaForm();">
                        Me ligue agora
                    </button>
                </div>
            </form>
    </div>

Answer 1

Anne. You do not call your function, so the mask does not appear in the phone field.

Here’s how easy it is to solve: just remove the following line of code $('#phone').mask(SPMaskBehavior, spOptions) of function checaForm(). In addition to removing the jQuery Mask Plugin library function, you are using.

This is the final result.

var SPMaskBehavior = function (val) {
  return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
spOptions = {
  onKeyPress: function(val, e, field, options) {
      field.mask(SPMaskBehavior.apply({}, arguments), options);
    }
};

function checaForm()
  {
   // Código da função aqui 
  }   

// Vai definir a máscara para o campo phone no formulário
$('#phone').mask(SPMaskBehavior, spOptions);

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<div class="modal-body">
    <form id="formcall" class="contact100-form validate-form">
        <div class="wrap-input100 validate-input">
            <input id="name" class="input100" type="text" name="name" placeholder="Seu nome">
            <span class="focus-input100"></span>
            <label class="label-input100" for="name">
                <span class="lnr lnr-user m-b-2"></span>
            </label>
        </div>
        <div class="wrap-input100 validate-input">
            <input id="email" class="input100" type="text" name="email" placeholder="Seu e-mail">
            <span class="focus-input100"></span>
            <label class="label-input100" for="email">
                <span class="lnr lnr-envelope m-b-5"></span>
            </label>
        </div>
        <div class="wrap-input100 validate-input">
            <input id="phone" class="input100" type="text" name="phone" placeholder="Seu celular">
            <span class="focus-input100"></span>
            <label class="label-input100" for="phone">
                <span class="lnr lnr-smartphone m-b-2"></span>
            </label>
        </div>
        <div class="container-contact100-form-btn" style="text-align: center;">
            <button id="envligacao" class="btn btn-primary btn-circle btn-translate--hover mt-4"
                    onClick="return checaForm();">
                Me ligue agora
            </button>
        </div>
    </form>
</div>

Answer 2

I have a code ready that I use, I will make available:

$("#telefone")
          .mask("(99) 9999-9999?9")
          .focusout(function () {  
             var phone = this.value.replace(/\D/g, '');
             $(this).unmask().mask(phone.length > 10 ? "(99) 99999-999?9" : "(99) 9999-9999?9");
        });

Anyway, in your code, it is not advisable to make use of the Keypress (or Keydown, or similar) event, usually causes problems to clean the input as you type each number. Besides, I didn’t find any problem.