Javascript (Function) Verificação de campos preenchidos retornar ação anterior

[Mizrain Phelipe Sá]

Tenho uma função que verifica se os campos do meu formulário foram preenchidos ou não pegando pelo seu valor. 

 

Caso tenha sido preenchido determinados campos e executado uma ação em que aparece a progressBar.

 

Nesta função tenho 4 Ifs que fazem a verificação e vai acrescentando mais um numero de campos para ver se foi preenchido ou não e então exibe a progressBar correspondente.

 

O problema é se todo o formulário foi preenchido ativando o quarto If e exibindo a "progressBar100", se depois disso o valor do campo "verInq1" for excluído a barra que passa a ser exibida no lugar da "progressBar100" será a "progressBar0" ao invés de ser a "progressBar75". Isso acontece em todos os Ifs.

 

Então eu queria fazer a verificação ao contrário também, em ordem decrescente onde se o último If não foi validado então ele retornasse o terceiro If e assim por diante.

 

HTML das progressBar.

 

<div style="margin-bottom: 1.5em;">
    <div id="InqProgress0" class="progress barProgressAbas">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div id="InqProgress25" class="progress barProgressAbas ocultaProgressAbas">
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
    </div>
    <div id="InqProgress50" class="progress barProgressAbas ocultaProgressAbas">
        <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
    </div>
    <div id="InqProgress75" class="progress barProgressAbas ocultaProgressAbas">
        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
    </div>
    <div id="InqProgress100" class="progress barProgressAbas ocultaProgressAbas">
        <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
    </div>
</div>

 

Meu JS para checar o valor e executar ação.

 

function progressBarInq() {
            let progressBar0 = document.getElementById("InqProgress0");
            let progressBar25 = document.getElementById("InqProgress25");
            let progressBar50 = document.getElementById("InqProgress50");
            let progressBar75 = document.getElementById("InqProgress75");
            let progressBar100 = document.getElementById("InqProgress100");

            //25%
            let verInq1 = document.getElementById("InqueritoCircunscricaoPolicial");            
            //50%
            let verInq5 = document.getElementById("NumeroDoIP");            
            //75%
            let verInq8 = document.getElementById("DataDoRelatorio");                          
            //100%
            let verInq11 = document.getElementById("NumeroDoProcesso");                        

            if (verInq1.value) {
                progressBar0.style.display = "none";
                progressBar25.style.display = "block";
                progressBar50.style.display = "none";
                progressBar75.style.display = "none";
                progressBar100.style.display = "none";
            } 
            if (verInq1.value && verInq5.value) {
                progressBar0.style.display = "none";
                progressBar25.style.display = "none";
                progressBar50.style.display = "block";
                progressBar75.style.display = "none";
                progressBar100.style.display = "none";
            } 
            if (verInq1.value && verInq5.value && verInq8.value) {
                progressBar0.style.display = "none";
                progressBar25.style.display = "none";
                progressBar50.style.display = "none";
                progressBar75.style.display = "block";
                progressBar100.style.display = "none";
            } 
            if (verInq1.value && verInq5.value && verInq8.value && verInq11.value) {
                progressBar0.style.display = "none";
                progressBar25.style.display = "none";
                progressBar50.style.display = "none";
                progressBar75.style.display = "none";
                progressBar100.style.display = "block";
            } 

        }    

        progressBarInq();

 

[Ansi C]

Penso que se contar quantos campos estão preenchidos poderia usar a métrica no SWITCH e resolve seu problema.

function progressBarInq( ){
        let progressBar0   = document.getElementById( "InqProgress0" );
        let progressBar25  = document.getElementById( "InqProgress25" );
        let progressBar50  = document.getElementById( "InqProgress50" );
        let progressBar75  = document.getElementById( "InqProgress75" );
        let progressBar100 = document.getElementById( "InqProgress100" );

  
        let verInq01 = document.getElementById( "InqueritoCircunscricaoPolicial" );            
        let verInq02 = document.getElementById( "NumeroDoIP" );            
        let verInq03 = document.getElementById( "DataDoRelatorio" );
        let verInq04 = document.getElementById( "NumeroDoProcesso" );

  
        progressBar0.style.display   = "none";  
        progressBar25.style.display  = "none";
        progressBar50.style.display  = "none";
        progressBar75.style.display  = "none";
        progressBar100.style.display = "none";

        var status = 0;
  
        if (verInq01.value) status = status + 1;
        if (verInq02.value) status = status + 1;
        if (verInq03.value) status = status + 1;
        if (verInq04.value) status = status + 1;
  
        switch (status) {
        case      4:
           progressBar100.style.display = "block";
           break;
            
        case      3:
           progressBar75.style.display  = "block";
           break;
            
        case      2:
           progressBar50.style.display  = "block";
           break;
            
        case      1:
           progressBar25.style.display  = "block";
           break;

        default:
           progressBar0.style.display   = "block";
           break;
        }
}
progressBarInq( );