0

Boa noite gente, eu gostaria de saber como fazer as validações dos campos pelo javascript para os campos de nome,email e telefone. para os campos nome, cpf ou cnpj e telefone eu consegui não permitir números para o nome e letras para o número de telefone porém eu quero delimitar o tamanho para o nome, e formatar o telefone e delimitar o tamanho também, e para o campo email quero que ao digitar o email ao trocar de campo por exemplo ele apareça erro ou alert caso não tenha o @.

Porém quero fazer isso pegando apenas o Id do campo, web2py gera o html automático e não da para modificar depois dele feito, tentei usar Jquery mask e não houve sucesso. se possível sem Jquery.

document.getElementById("Pedido_Nome").onkeyup = somente_letras;

function somente_letras() {
    this.value = this.value.replace(/[^\w\.]|\d/g, '');
};

document.getElementById("Pedido_Telefone").onkeyup = somente_numeros;

function somente_numeros() {
    this.value = this.value.replace(/[^0-9]/, "");
};
1
  • muito Obrigada ajudou bastante. 23/10/2018 às 2:09

1 Resposta 1

-2

A função mascara_telefone coloca a máscara para os telefones de acordo com o regex, validando telefones e celulares com ou sem ddd. Essa função é aplicada ao evento onkyup.

Para a validação de preenchimento e mensagem de alerta validei com os mesmos regex na função validacao_telefone porém essa função é aplicada no evento onblur que é quando o elemento perde o foco.

Para o email que é só validação foi criada a função validacao_email que é validada com regex de email (https://emailregex.com/ ), essa função foi aplicada ao evento onblur do input de email.

Coloquei alterações da cor do texto nos momentos que é inválido para vermelho, e nos momentos válidos para preto, você pode alterar essa parte para mostrar a mensagem que desejar.

const regexTelefoneSemDDD=/^(\d{4})(\d{4})$|^(\d{5})(\d{4})$/g;
    const regeTelefoneComDDD=/^(0\d{2})(\d{5})(\d{4})$|^(0\d{2})(\d{4})(\d{4})|^(\d{2})(\d{4})(\d{4})$|^(\d{2})(\d{5})(\d{4})$|^(\d{3})(\d{5})(\d{4})$/g;
    const regexTelefoneSeparador=/^(\d{4})(\d{1,4})$/g;
    const regexEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/gi;
    
    
    function mascara_telefone (){
        // remove caracteres que não são números
        this.value = this.value.replace(/[^0-9]/gi, "");

        if(this.value.length  >11 ){
            this.value= this.value.substr(0,12);
        }
       
        if(regexTelefoneSemDDD.test( this.value)){
            this.value = this.value.replace(regexTelefoneSemDDD, "$1$3-$2$4");
            this.style.color ='black';
        }else if(regeTelefoneComDDD.test( this.value)){
            this.value = this.value.replace(regeTelefoneComDDD, "($1$4$7$10$13)$2$5$8$11$14-$3$6$9$12$15");
            this.style.color ='black';
        } else if(regexTelefoneSeparador.test( this.value)){
            this.value = this.value.replace(regexTelefoneSeparador, "$1-$2");
            this.style.color ='black';
        }else{
            this.style.color ='red';
        }
    };

    function validacao_telefone (){
       let valor = this.value.replace(/[^0-9]/gi, "");
        if(!(regexTelefoneSemDDD.test( valor) || regeTelefoneComDDD.test(valor))) {
            this.style.color ='red';
            alert("Telefone Inválido");
        }
    }

    function validacao_email(){
        if(! regexEmail.test( this.value)) {
            this.style.color ='red';
            alert("Email Inválido");
        }else{
            this.style.color ='black';
        }
    }

    document.getElementById("telefone").onkeyup  =  mascara_telefone;
    document.getElementById("telefone").onblur  =  validacao_telefone;
    document.getElementById("email").onblur  =  validacao_email;
 

<input id="telefone" maxlength="15" placeholder='telefone'>
<input id="email"  placeholder='e-mail'>

2
  • O código que colocou é uma resposta à questão? Convém detalhar um bocado mais a sua resposta. 17/10/2018 às 17:55
  • É uma resposta sim, fiz a atualização, obrigado. 17/10/2018 às 18:22

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 .