1

Estou com um probleminha em um código que transforma o campo de Telefone para este formato: (51) 96321-5465. Porém, toda vez que clico em Enviar, o formulário diz no campo: "É preciso que o formato corresponda ao exigido." e não deixa enviar o formulário, o código é este:

<!-- Formatar campo telefone -->
<script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function mtel(v){
    v=v.replace(/\D/g,"");             //Remove tudo o que não é dígito
    v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d)(\d{4})$/,"$1-$2");    //Coloca hífen entre o quarto e o quinto dígitos
    return v;
}
function id( el ){
    return document.getElementById( el );
}
window.onload = function(){
    id('telefone').onkeypress = function(){
        mascara( this, mtel );
    }
}
</script> <!-- FIM Formatar campo telefone -->

E onde quero que apareça o campo para informar o telefone:

< div class="campo">
    < label for="telefone">Telefone</label>
    < input type="text" id="telefone" name="telefone" placeholder="Somente números" size="16" maxlength="15"  value="" pattern="[0-9]+$"/>
< /div>

Porr que fica aparecendo esta mensagem e não deixa enviar mesmo o campo não possuindo um required?

7
  • Achei que fosse algo com os "size="16" maxlength="15"" mas não é
    – weise
    Commented 24/05/2017 às 13:28
  • Voce esta usando mascara, entao ele indica um formato inapropriado Commented 24/05/2017 às 13:32
  • Peguei este código de exemplo Rafael, a máscara esta indicando um formato errôneo? como assim? Desculpe, estou iniciando agora em JavaScript
    – weise
    Commented 24/05/2017 às 13:40
  • Remova o atributo pattern="[0-9]+$"
    – KaduAmaral
    Commented 24/05/2017 às 13:48
  • o que voce quer fazer? apenas ter uma mascara no input e verificar se tem numeros suficiente para ser telefone? Commented 24/05/2017 às 13:48

2 Respostas 2

2

DEMO

Não é necessário remover o atributo pattern mas sim adequá-lo.

(^[\d-\)\(]+$)

HTML

<div class="campo">
<label for="telefone">Telefone</label>
<input type="text" id="telefone" name="telefone" placeholder="Somente números" size="16" maxlength="15"  value="" pattern="(^[\d-\)\(]+$)"/>

  • \d dígito o mesmo que [0-9]
  • -\)\( caracteres aceitos
1
  • Realmente funciona Leo Caracciolo, muito obrigado por sua contribuição, muito grato, tenha uma ótima tarde.
    – weise
    Commented 24/05/2017 às 16:54
1

Você está usando o atributo pattern para validar os dados do input. Removendo-o tudo ficará certo, e a validação ocorrerá apenas via Javascript:

<div class="campo">
    <label for="telefone">Telefone</label>
    <input type="text" id="telefone" name="telefone" placeholder="Somente números" size="16" maxlength="15"  value="">
</div>

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 .