validation of fields with javascript?

Question

Good evening people, I would like to know how to validate the fields by javascript for the name fields, email and phone. for the name, Cpf or cnpj and phone fields I managed not to allow numbers for the name and letters for the phone number but I want to delimit the size for the name, and format the phone and delimit the size too, and for the email field I want that when typing the email when changing field for example it appears error or Alert if you do not have the @.

But I want to do this by taking only the Id of the field, web2py generates the automatic html and not to modify after it was done, I tried using Jquery Mask and there was no success. if possible without 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]/, "");
};

Answer 1

The function mascara_phone puts the mask to the phones according to the regex, validating phones and mobiles with or without ddd. This function is applied to the onkyup event.

For the validation of fill and warning message Validei with the same regex in the function validac_phone but this function is applied in the onblur event that is when the element loses focus.

For the email that is only validation, the validation function was created which is validated with email regex (https://emailregex.com/ ), this function was applied to the onblur event of the email input.

I put text color changes at times that is invalid to red, and at times valid to black, you can change this part to show the message you want.

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