Validation of form “by OnChange” with javascript

Good afternoon!
I am trying to validate a form by “OnChange” with javascript, the script worked correctly however it is displaying the following error:

When I try to fill in any form field without having filled in the previous fields it returns to the first field.

I’m a beginner in javascript, how can I resolve this?

The form with the script is here: link

Validation script:

function val(){
    var campo = document.getElementsByClassName('valida');
    var alerta = document.getElementsByClassName('alerta');
    //exucuta o laço
    for(i=0;i<campo.length;i++){
        var tipo = campo.item(i).getAttribute('data-type');

        if(tipo == "text" || tipo == "number" || tipo == "select"){
            if(campo.item(i).value === "" || campo.item(i).value.length < 8){
                alerta.item(i).setAttribute('style', 'background-position:-525px');
                campo.item(i).setAttribute('style', 'background-color:#fff;border:1px solid #f00');
                campo.item(i).focus();
                return false;
                break;}
                alerta.item(i).removeAttribute('style');
                campo.item(i).setAttribute('style', 'background-color:#fff');
        }

        else if(tipo == "email"){
            if(campo.item(i).value.length < 10 || campo.item(i).value.indexOf('@')==-1 || campo.item(i).value.indexOf('.')==-1 || campo.item(i).value.indexOf('.com')==-1){
                alerta.item(i).setAttribute('style', 'background-position:-525px');
                campo.item(i).setAttribute('style', 'background-color:#fff;border:1px solid #f00');
                campo.item(i).focus();
                return false;
                break;}
                alerta.item(i).removeAttribute('style');
                campo.item(i).setAttribute('style', 'background-color:#fff');
            }       
    }
}

Its function is to validate form as a whole, not individually, so the correct one would be to remove onchange and stay only in onclick of your button or else onsubmit form .

Another thing would be to remove return false so that it displays ALL fields with problems, so .focus() will stay in the last field of for so if you you want the focus to always be on the first problem, just reverse for .

for(i=campo.length-1;i >= 0;i--)

And fix if when input, thus

function val(){
    //pega os campos para digitação
    var campo = document.getElementsByClassName('valida');
    //pega os campos
    var alerta = document.getElementsByClassName('alerta');
    //exucuta o laço
    for(i=campo.length-1;i >= 0;i--){
        //pega o tipo de elemento
        var tipo = campo.item(i).getAttribute('data-type');

        //se for text...
        if(tipo == "text" || tipo == "number" || tipo == "select"){
            if(campo.item(i).value === "" || campo.item(i).value.length < 8){
                alerta.item(i).setAttribute('style', 'background-position:-525px');
                campo.item(i).setAttribute('style', 'background-color:#fff;border:1px solid #f00');
                campo.item(i).focus();
            } else {
                alerta.item(i).removeAttribute('style');
                campo.item(i).setAttribute('style', 'background-color:#fff');
            }
        }

        //se for email...
        else if(tipo == "email"){
            if(campo.item(i).value.length < 10 || campo.item(i).value.indexOf('@')==-1 || campo.item(i).value.indexOf('.')==-1 || campo.item(i).value.indexOf('.com')==-1){
                alerta.item(i).setAttribute('style', 'background-position:-525px');
                campo.item(i).setAttribute('style', 'background-color:#fff;border:1px solid #f00');
                campo.item(i).focus();
            } else {
                alerta.item(i).removeAttribute('style');
                campo.item(i).setAttribute('style', 'background-color:#fff');
            }
        }       
    }
}

If you want to validate individually, create a new function, for example:

function valIndividual(campo){
    //pega o tipo de elemento
    var tipo = campo.getAttribute('data-type');

    //se for text...
    if(tipo == "text" || tipo == "number" || tipo == "select"){
        if(campo.value === "" || campo.value.length < 8){
            campo.setAttribute('style', 'background-position:-525px');
            campo.setAttribute('style', 'background-color:#fff;border:1px solid #f00');
            campo.focus();
        } else {
            campo.removeAttribute('style');
            campo.setAttribute('style', 'background-color:#fff');
        }
    }

    //se for email...
    else if(tipo == "email"){
        if(campo.value.length < 10 || campo.value.indexOf('@')==-1 || campo.value.indexOf('.')==-1 || campo.value.indexOf('.com')==-1){
            campo.setAttribute('style', 'background-position:-525px');
            campo.setAttribute('style', 'background-color:#fff;border:1px solid #f00');
            campo.focus();
        } else {
            campo.removeAttribute('style');
            campo.setAttribute('style', 'background-color:#fff');
        }
    }       
}

And in% with% put% with%.

In this way you can even change the onchange function to something like:

function val(){
    //pega os campos para digitação
    var campo = document.getElementsByClassName('valida');
    //exucuta o laço
    for(i=campo.length-1;i >= 0;i--){
        valIndividual(campo.item(i));
    }
}