jQuery mask is not working

Question

jQuery mask is not working

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I want to put a mask on the phone number but it is not working, I've tried it anyway, with different ways to call the jQuery and jQuery.mask file. I'll show you how my code is, am I doing something wrong? (in another project I did exactly that 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>

javascript jquery html5

asked by anonymous 30.08.2018 / 13:37

2 answers

1

I have a ready code that I use, I will make it 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 event (or Keydown, or similar), it often causes problems with clearing the input as you type each number. Also, I did not find any problems.

30.08.2018 / 13:48

Remove elements from arrays that are not in 2 PHP arrays array in a php foreach

score 3 · Accepted Answer

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

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

This is the end 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><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script><divclass="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>