0

Quero colocar uma máscara no número de telefone mas não está funcionando, já tentei de todas as formas, com diferentes modos de chamar o arquivo jQuery e jQuery.mask. Vou mostrar como tá meu código, estou fazendo algo errado? (em outro projeto eu fiz exatamente dessa jeito e funciona...)

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

2
  • Você quer fazer uma máscara de telefone fixo/celular que se adapte, correto? 30/08/2018 às 11:40
  • Anne, caso alguma resposta tenha resolvido já, pode marcar como aceita clicando no V verdinho do lado dos pontos da escolhida. Você pode deixar em aberto mais um tempo caso ainda queira mais alternativas, mas é bom que depois de resolvida a contento marque alguma para fechar o assunto. Saiba mais em "Como e por que aceitar uma resposta"
    – Largato
    30/08/2018 às 14:28

2 Respostas 2

3

Anne. Você não chama a sua função, por isso a máscara não aparece no campo de telefone.

Veja como é fácil resolver: basta retirar a seguinte linha de código $('#phone').mask(SPMaskBehavior, spOptions) da função checaForm(). Além de retirar a função da biblioteca jQuery Mask Plugin, que você está usando.

Este é o resultado final.

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>

1
  • foi isso mesmo, eu resolvi. obrigada pela ajuda! :)
    – Anne
    30/08/2018 às 12:53
1

Eu tenho um código pronto que utilizo, vou disponibilizar:

$("#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");
        });

Enfim, no seu código, não é aconselhável fazer o uso do evento KeyPress (ou Keydown, ou semelhantes), costuma causar problemas de limpar o input conforme você digita cada número. Além disso, não encontrei nenhum problema.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .