field validation with javascript?

Navigation
0

Good evening guys, I'd like to know how to do the field validations by javascript for the name, email, and phone fields. for the fields name, cpf or cnpj and phone I was able to not allow numbers for the name and letters for the phone number however I want to delimit the size for the name, and format the phone and also delimit the size, and for the email field I want that when entering the email when changing the field for example it appears error or alert if it does not have the @.

But I want to do this only by taking the field ID, web2py generates the automatic html and does not modify it after it is done, I tried to use 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]/, "");
};
    
asked by anonymous 17.10.2018 / 01:35

1 answer

0

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

For validation of fill and alert message I validated with the same regex in function validacao_telefone however this function is applied in the event onblur that is when the element loses focus.

For email that is only validation, the validation_email function that is validated with email regex ( link ) was created, this function was applied to the event onblur of the email input.

I've made changes to the color of the text in moments that are invalid for red, and in moments that are valid for black, you can change that 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'>
    
17.10.2018 / 19:01
Formatting Angular Data Page number with DOMPDF and LARAVEL