"By Onchange" form validation with javascript

Question

Good afternoon! I am trying to validate a form by "Onchange" with javascript, the script worked correctly but is presenting 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 solve this?

The form with the script is here: http://jsbin.com/tumasupika/1/edit?html,css,js,output

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');
            }       
    }
}

Answer 1

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

Another thing would be to remove the return false for him to display ALL fields with problems, thus the .focus() will be on the last field of for so if you want the focus to always be on the first problem is just reverse the for.

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

And correct the if when it is 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 the onchange place onchange=valIndividual(this).

This way you can even change the function val for 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));
    }
}