Habilitar o próximo campo de texto, a cada vez que seu antecessor é preenchido

Lógica:

1- Definir a quantidade mínima de caracteres para cada campo

2- Contar os caracteres no momento em que forem digitado

3- Se a quantidade for igual ou superior habilita o próximo campo, do contrário não.

<!DOCTYPE html>
<html>

 <body>
    <center>
        <form name="formulario" onsubmit="return limite(this)">
            <input type="text" value="" maxlength="5" name="nome" onkeyup="limite(this.value)" />
            <br><br>
            <input type="text" value="" maxlength="5" name="sobrenome" onkeyup="limite(this.value)" />
            <br><br>
            <input type="text" value="" maxlength="5" name="idade" onkeyup="limite(this.value)" />
            <br><br>
            <input type="text" value="" maxlength="5" name="celular" onkeyup="limite(this.value)" />
            <br><br>
            <input type="submit" value="Enviar" name="submit" />
        </form>
    </center>
</body>

   <!-- Para o exemplo apresentado aqui, vou apenas verificar se o campo esta ou não vazio. Pois deixo o controle da quantidade de caracteres definida no próprio HTML [maxlength] -->

<script>
    function limite(form) {

        if (formulario.nome.value.length < 1) {
            return false;
        }
        document.formulario.sobrenome.disabled = false;
        return true;

        if (formulario.sobrenome.value.length < 1) {
            return false;
        }
        document.formulario.idade.disabled = false;
        return true;

        if (formulario.idade.value.length < 1) {
            return false;
        }
        document.formulario.celular.disabled = false;

        if (formulario.celular.value.length < 1) {
            return false;
        }
        document.formulario.submit.disabled = false;
        return true;
    }

    var habilitar = '' ? true : false;
    document.formulario.sobrenome.disabled = habilitar;
    document.formulario.sobrenome.disabled = !habilitar;

    document.formulario.idade.disabled = habilitar;
    document.formulario.idade.disabled = !habilitar;

    document.formulario.celular.disabled = habilitar;
    document.formulario.celular.disabled = !habilitar;

    document.formulario.submit.disabled = habilitar;
    document.formulario.submit.disabled = !habilitar;
</script>

</html>

Quase perfeito, mas, ainda falta continuar a verificar se o segundo campo ja fora preenchido e partir para o próximo e etc. E tô parado nesse impasse.

Bom pessoal, o erro que estava enfrentando era que, não tinha necessidade por:

return true;

abaixo de todos o(s) elemento(s):

document.formulario

Basta apenas um [return true;] dentro do script e pronto!

O resultado você pode conferir aqui >> w3schools

1 curtida