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