Validation configuration in dynamic fields with groups

Question

Scenario: The client today has a place in the system, specific to register fields for a process that will be automated these fields that are registered can be (selects, checkbox, radio, textarea and text) soon after the client can register the fields linked to an activity of this process for example activity check documentation has the fields: field_1(select), field_2(text) and in these fields are assigned release conditions; to release the field_1 in the form of the activity the field_2 has to have the value X

I have a problem that is the following, I have a field validation that is responsible for releasing other fields, there is a topic that has been answered for this situation that will give a very concrete basis of what I am talking about

Validation configuration in dynamic fields

but now the need for the same idea has arisen only for conditional groups for example:

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

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

note above that the only difference between the two groups is the field 3 with the value 5 in group two, with the following condition

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

For this situation we used the OR operator. In this case we are referencing that field 4 will only be released if the fields belonging to group 1 have the values "PH", 3, 4 OR group 2 has the values "PH", 3, 5 meeting one of the rules cited by the group the field 4 is released in this form.

Today I use the following code for the field release.

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

Today this rule works perfectly for fields N-N and specifically for the AND condition, in this new need now needs to be assigned both the AND condition and the OR condition and to be met by groups

Answer 1

Manage to solve the question, it will be in the rules we must put the following condition to the object

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

Where is followed by groups the field that will be released and then the fields that must be filled in to release the informed field.

try the rule object now just scan the object and store the values that will be typed to check if it is real in this case the field receiving PH or KM will be released the field_4so for this situation we have to check in each loop if the applied condition is true then create an object to store the conditions, guarding true OR false and then I perform a .join and a .replace to exchange all (commas) that are generated by .join by the conditions we want to achieve, in that situation was related to condition OR after mounting would look like this true || false so now just put this condition inside a eval() where Eval executes a string as a condition. follows the code. with loop renewals.

$(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
}
                                }