3

Boa tarde! Estou tentando validar um formulário por "OnChange" com javascript, o script funcionou corretamente porém está apresentando o seguinte erro:

Quando tento preencher qualquer campo do formulário sem que eu tenha preenchido os campos anteriores ele retorna para o primeiro campo.

Sou iniciante em javascript, como posso resolver isso?

O formulário com o script está aqui: http://jsbin.com/tumasupika/1/edit?html,css,js,output

Script de validação:

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

1 Resposta 1

2

Sua função é de validar o form como um todo, não individualmente, então o correto seria você remover do onchange e ficar somente no onclickdo seu botão ou então no onsubmit do form.

Outra coisa seria remover o return false para que ele exiba TODOS campos com problemas, dessa forma o .focus() vai ficar no último campo do for então se você quer que o foco seja sempre no primeiro com problema é só inverter o for.

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

E corrigir o if quando for input, ficando assim

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

Se quiser validar individualmente, crie uma nova função, por exemplo:

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

E no onchange coloque onchange=valIndividual(this).

Dessa forma você pode até alterar a função val pra algo do tipo:

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));
    }
}
7
  • Entendi @Maicon Carraro, muito obrigado, porém eu queria validar cada campo individualmente.
    – Odair
    11/06/2015 às 15:46
  • Pra validar cada campo individualmente, você vai precisar verificá-los pelo id ou name. 11/06/2015 às 15:51
  • Muito obrigado @EduardoSilva
    – Odair
    11/06/2015 às 15:56
  • 1
    @Odair Atualizei minha resposta com a validação individual, dê uma olhada. 11/06/2015 às 15:57
  • 1
    @Odair Fiz uma nova sugestão pra sua função de validar todos :) 11/06/2015 às 16:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .