3

Cenário: O cliente hoje tem um lugar no sistema, especifico para cadastrar campos pra um processo que será automatizado esses campos que são cadastrados podem ser (selects, checkbox, radio, textarea e text) logo em seguida o cliente pode cadastrar os campos ligados a uma atividade desse processo por exemplo atividade verificar documentação tem os campos: campo_1(select), campo_2(text) e nesses campos são atribuídos condições de liberação; para liberar o campo_1 no formulário da atividade o campo_2 tem que ter o valor X

Estou com um problema que é o seguinte, tenho uma validação de campos que é responsável para liberar outros campos, tem um tópico que foi respondido pra essa situação que dará uma base bem concreta do que estou falando

Configuração de validação em campos dinâmicos

porém agora surgiu a necessidade da mesma ideia só que para grupos condicionais por exemplo:

grupo 1 (campo_1 = "PH" , campo_2 = 3, campo_3 = 4)

grupo 2 (campo_1 = "PH", campo_2 = 3, campo_3 = 5)

notamos acima que a unica diferença entre os dois grupos é o campo_3 que esta com o valor 5 no grupo dois, ficando a seguinte condição

grupo 1 [OR || AND] grupo 2 libera campo_4

Pra essa situação citada utilizamos o operador OR. Nesse caso estamos nos referenciando que o campo_4 só será liberado caso os campos pertencentes ao grupo 1 tenham os valores "PH", 3, 4 OU o grupo 2 tenha os valores "PH", 3, 5 atendendo uma das regras citadas pelo grupo o campo_4 é liberado nesse formulário.

Utilizo hoje o seguinte código para a liberação dos campos.

function iniciaVerificador<?= $i ?>(atividade_campo, atividade_campo_dependente, codigo, regras){
    var campoDependente = '#codigo_'+ atividade_campo_dependente;
    var campoTrigger = '#codigo_'+ atividade_campo;
    var codigoCampo = '#codigo_'+ codigo;

    var checkbox = $(campoTrigger + ' input:checked');
    var select = $(campoTrigger + ' select > option:selected');
    var input = $(campoTrigger + ' input');
    var textarea = $(campoTrigger + ' textarea');


    if (checkbox.length > 0) {
        var inputs = document.querySelectorAll('#codigo_'+atividade_campo+' input[type="radio"], #codigo_'+atividade_campo+' input[type="checkbox"]');
    } else if (select.length > 0) {
        var inputs = document.querySelectorAll('#codigo_'+atividade_campo+' select');
    } else if(input.length > 0) {
        var inputs = document.querySelectorAll('#codigo_'+atividade_campo+' input');
    } else {
        var inputs = document.querySelectorAll('#codigo_'+atividade_campo+' textarea');
    }

    $(inputs).on('change', function(){
        verificador<?= $i ?>(regras, checkbox,select,input,textarea);
    });
    $(inputs).on('keyup', function(){
        verificador<?= $i ?>(regras, checkbox,select,input,textarea);
    });

    verificador<?= $i ?>(regras, checkbox,select,input,textarea);

}

function verificador<?= $i ?>(regras, checkbox,select,input,textarea) {
    Object.keys(regras).forEach(function (regra) { // iterar as regras que foram atribuidas na variavel regras

        var regrasLocais = Object.keys(regras[regra]); // regras que tem que cumprir pra liberação
        var target = $('[id="' + regra + '"]'); //Tragetoria da regra, nesse caso div
        var valores = regrasLocais.map(function (nome) { // mapear regras com o input respectivo guardando o seu valor

            if (checkbox.length > 0) {
                var input_text = $('[id="'+ nome +'"] input[type="radio"], [id="'+ nome +'"] input[type="checkbox"]');

                if(input_text.length > 0) {
                    var array_check = [];
                    for (var ck=0; ck < input_text.length; ck++) {
                        if(input_text[ck].checked){
                            array_check.push(input_text[ck].value);
                        }
                    }
                    return array_check.join();
                }
            }

            var input_text = $('[id="'+ nome +'"] input, [id="'+ nome +'"] select > option:checked, [id="'+ nome +'"] input:checked, [id="'+ nome +'"] textarea ');

            if(input_text.length > 0) {
                var value = [];
                input_text.each(function(){
                    if($(this).is(':checked') || $(this).is(':selected') || $(this).is(':text') || $(this).is('textarea')){
                        value.push($(this).val());

                        if($(this).is(':selected')){
                            value.push('select');
                        }

                    }
                });

                return value.join();
            } else {
                return '';
            }
        });

        var valida = valores.filter(function (value, i) { // verificar quais inputs têm o valor == ao que é esperado pela regra
            var original = regras[regra][regrasLocais[i]];
            var arrsplint = value.split(",");
            var arrOriginal = original.split(",");

            if($.inArray('select',arrsplint, 0) != -1){
                var removeItem = 'select';
                var arrsplint = $.grep(arrsplint, function(valueArr) {
                    return valueArr != removeItem;
                });

                var removeItem = '';
                var arrsplint = $.grep(arrsplint, function(valueArr) {
                    return valueArr != removeItem;
                });



                var arrsplint = arrsplint.join();
                var count = 0;
                var returnValue = [];

                arrOriginal.forEach(function (valueOriginal) {

                    if(arrsplint == valueOriginal){
                        returnValue[count] = true;
                    } else {
                        returnValue[count] = false;
                    }

                    count++;
                });

                if($.inArray(true,returnValue, 0) != -1){
                    return 1;
                }else {
                    return 0;
                }
            }

            return value.toUpperCase() == original.toUpperCase();
        });

        if (valida.length == regrasLocais.length) {
            target.removeClass('invalido'); // se todas as verificações tiverem passado
            target.removeAttr("style");

            target.addClass('corfundo');
            target.removeClass('mudacor');

            var x = 0;
            var clear = setInterval(function(){

                target.addClass('mudacor');
                target.removeClass('corfundo');

                if (++x === 1) {
                    window.clearInterval(clear);
                }
            }, 1000);


        } else {
            target.addClass('invalido'); // caso falhe a validação
            target.val('');
            target.prop('checked', false);
        }
    });
}

$(function () {
    var regras = {
        <?= $condicaoRegra; ?>
    };
    iniciaVerificador<?= $i ?>(<?php echo $condicaoCampo->atividade_campo ?>, <?php echo $condicaoCampo->atividade_campo_dependente ?>, <?php echo $condicaoCampo->codigo ?>, regras );
});

Hoje essa regra funciona perfeitamente para campos N-N e especificamente para a condição AND, nessa nova necessidade agora precisa que seja atribuído também tanto a condição AND como a OR e que seja atendido por grupos

1 Resposta 1

2

Conseguir resolver a pergunta, ela será nas regras devemos colocar a seguinte condição para o objeto

var objRegras = {1:{campo_4:{campo_2: "PH"}}, 2:{campo_4:{campo_2: "KM"}}};

Onde é seguido de grupos o campo que vai ser liberado e em seguida os campos que devem ser preenchidos para liberar o campo informado.

tento o objeto de regras basta agora pecorrer o objeto e armazenar os valores que serão digitados para verificar se é real nesse caso o campo_2 recebendo PH ou KM será liberado o campo_4 então pra essa situação temos que verificar em cada laço se a condição aplicada é verdadeira então criamos um objeto para armazenar as condições, guardando true OR false e em seguida realizo um .join e um .replace para trocando toda as (virgulas) que são geradas pelo .join pelas condições que queremos realizar, nessa situação foi relacionado a condição OR depois de montar ficaria da seguinte forma true || false então agora basta apenas colocamos essa condição dentro de um eval() onde o eval ele executa uma string como uma condição. segue o codigo. com as renovações dos laços.

$(function () {
    //adiciono as regras.
    var regras = <?= $condicaoRegra; ?>;
    //inicio a função para verificar os campos
    iniciaVerificadorGrupo<?= $i ?>(<?php echo $condicaoCampo->atividade_campo ?>, <?php echo $condicaoCampo->atividade_campo_dependente ?>, <?php echo $condicaoCampo->codigo ?>, regras, <?php echo $condicaoCampo->grupo; ?> );
 });


          //funçao relacionada para iniciar o verificador, pegando os tipos de campos (select,checkbox,radio,textarea,input)
function iniciaVerificadorGrupo<?= $i ?>(atividade_campo, atividade_campo_dependente, codigo, regras, grupo){
var campoDependente = '#codigo_'+ atividade_campo_dependente;
var campoTrigger = '#codigo_'+ atividade_campo;
var codigoCampo = '#codigo_'+ codigo;

var checkbox = $(campoTrigger + ' input:checked');
var select = $(campoTrigger + ' select > option:selected');
var input = $(campoTrigger + ' input');
var textarea = $(campoTrigger + ' textarea');

if (checkbox.length > 0) {
    var inputs = document.querySelectorAll('#codigo_'+atividade_campo+' input[type="radio"], #codigo_'+atividade_campo+' input[type="checkbox"]');
} else if (select.length > 0) {
    var inputs = document.querySelectorAll('#codigo_'+atividade_campo+' select');
} else if(input.length > 0) {
    var inputs = document.querySelectorAll('#codigo_'+atividade_campo+' input');
} else {
    var inputs = document.querySelectorAll('#codigo_'+atividade_campo+' textarea');
}


$(inputs).on('change', function(){

    var campoDependente = '#codigo_'+ atividade_campo_dependente;
    var campoTrigger = '#codigo_'+ atividade_campo;
    var codigoCampo = '#codigo_'+ codigo;

    var checkbox = $(campoTrigger + ' input:checked');
    var select = $(campoTrigger + ' select > option:selected');
    var input = $(campoTrigger + ' input');
    var textarea = $(campoTrigger + ' textarea');

    verificadorGrupo<?= $i ?>(regras, checkbox,select,input,textarea,grupo);
});

$(inputs).on('keyup', function(){

    var campoDependente = '#codigo_'+ atividade_campo_dependente;
    var campoTrigger = '#codigo_'+ atividade_campo;
    var codigoCampo = '#codigo_'+ codigo;

    var checkbox = $(campoTrigger + ' input:checked');
    var select = $(campoTrigger + ' select > option:selected');
    var input = $(campoTrigger + ' input');
    var textarea = $(campoTrigger + ' textarea');

    verificadorGrupo<?= $i ?>(regras, checkbox,select,input,textarea,grupo);
});

verificadorGrupo<?= $i ?>(regras, checkbox,select,input,textarea,grupo);

}

//executa o verificador do grupo, onde fica as questões para liberar os campos ou não
function verificadorGrupo<?= $i ?>(regras, checkbox,select,input,textarea,grupo) {

var mapCondicao = new Array(regras.length);
var retornaCondicaoUnica = new Array();
var valores;
var valida;
var interetor = 0;
var keyCampoDependente;
var target;
var regraVariosElementosPertecentesAUmGrupo = new Array();
var posElementoPrincipal;


//pecorro as regras com o map
$.map(regras, function(regra,keyR){

    //realizo um for de regra para pegar os valores das condições
    for(var key in regra){

        keyCampoDependente = Object.keys(regra[key]);//pego as chaves
        target = $('[id="' + key + '"]'); //qual campo vai ser liberado
        valores = keyCampoDependente.map(function (nome) {

            if (checkbox.length > 0) {
                var input_text = $('[id="'+ nome +'"] input[type="radio"], [id="'+ nome +'"] input[type="checkbox"]');

                if(input_text.length > 0) {
                    var array_check = [];
                    for (var ck=0; ck < input_text.length; ck++) {
                        if(input_text[ck].checked){
                            array_check.push(input_text[ck].value);
                        }
                    }
                    return array_check.join();
                }
            }

            var input_text = $('[id="'+ nome +'"] input, [id="'+ nome +'"] select > option:checked, [id="'+ nome +'"] input:checked, [id="'+ nome +'"] textarea ');

            if(input_text.length > 0) {
                var value = [];
                input_text.each(function(){
                    if($(this).is(':checked') || $(this).is(':selected') || $(this).is(':text') || $(this).is('textarea')){
                        value.push($(this).val());

                        //verifico se esta selecionado caso esteja selecionado adiciono no array o 'select'
                        if($(this).is(':selected')){
                            value.push('select');
                        }
                    }
                });

                //retorno os valores com join para separar todos por virgula
                return value.join();
            } else {
                return '';
            }
        });


        //crio array para a condição
        var retornaCondicao = [];

        //realizo um filtro de valores
        valida = valores.filter(function (value, i) {

            //pego o valor original da regra, o que eu preciso para liberar o campo
            var original = regra[key][keyCampoDependente[i]];
            var arrsplint = value.split(",");
            var arrOriginal = original.split(",");

            //verifico valor select
            if($.inArray('select',arrsplint, 0) != -1){
                var removeItem = 'select';

                //removo o valor select
                var arrsplint = $.grep(arrsplint, function(valueArr) {
                    return valueArr != removeItem;
                });

                //removo vazio caso exista
                var removeItem = '';
                var arrsplint = $.grep(arrsplint, function(valueArr) {
                    return valueArr != removeItem;
                });

                //dou um join com os valores
                var arrsplint = arrsplint.join();
                var count = 0;
                var returnValue = [];

                //pego o valor orginal pecorro os dados para guardar se os valores estão iguais para retornar true
                arrOriginal.forEach(function (valueOriginal) {
                    if(arrsplint == valueOriginal){
                        returnValue[count] = true;
                    } else {
                        returnValue[count] = false;
                    }
                    count++;
                });


                if($.inArray(true,returnValue, 0) != -1){
                    retornaCondicao[[keyR],[i]] = 1;
                    return 1;
                }else {
                    retornaCondicao[[keyR],[i]] = 0;
                    return 0;
                }
            }

            if(value.toUpperCase() == original.toUpperCase()){
                retornaCondicao[[keyR],[i]] = 1;
                return true;
            } else {
                retornaCondicao[[keyR],[i]] = 0;
                return false;
            }
        });


        if($.inArray(0,retornaCondicao, 0) != -1){
            retornaCondicaoUnica[interetor] = false;
            interetor = interetor + 1;
        } else {
            retornaCondicaoUnica[interetor] = retornaCondicao;
            interetor = interetor + 1;
        }
    }
});

retornaCondicaoUnica.forEach(function(elemento, pos){
    if(retornaCondicaoUnica[pos] !== false){
        posElementoPrincipal = pos;
        for(var posEle in elemento){
            if(elemento[posEle] == 1){
                regraVariosElementosPertecentesAUmGrupo[posEle] = true;
            } else {
                regraVariosElementosPertecentesAUmGrupo[posEle] = false;
            }
        }
    }
});

if($.inArray(false,regraVariosElementosPertecentesAUmGrupo, 0) != -1){
    retornaCondicaoUnica[posElementoPrincipal] = false;
} else {
    retornaCondicaoUnica[posElementoPrincipal] = true;
}

var ret = replaceAll(retornaCondicaoUnica.join(), ',', ' || ');

if (eval(ret)) {
    target.removeClass('invalido'); // se todas as verificações tiverem passado
    target.removeAttr("style");

    target.addClass('corfundo');
    target.removeClass('mudacor');

    var x = 0;
    var clear = setInterval(function(){

        target.addClass('mudacor');
        target.removeClass('corfundo');

        if (++x === 1) {
            window.clearInterval(clear);
        }
    }, 1000);
} else {
    target.addClass('invalido'); // caso falhe a validação
}
                                }

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 .