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) 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 release conditions are assigned; to release field_1 in the activity form field_2 must have the value X
I have a problem that is as follows, I have a field validation that is responsible for releasing other fields, there is a topic that has been answered to 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 (field_1="PH", field_2 = 3, field_3 = 4)
group 2
(field_1="PH", field_2 = 3, field_3 = 5 )
We note above that the only difference between the two groups is the field_3 that is with the value 5 in group two, with the following condition
grupo 1 [OR || AND] grupo 2 libera campo_4
For this situation we use the OR operator. In this case we are referring that field_4 will only be released if the fields belonging to group 1 have the values "PH", 3, 4 OR the group 2 has the values "PH", 3, 5 attending one of the rules quoted by the group the field_4 is released in that form. p>
I now use the following code to release the fields.
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 it needs to be assigned both the AND condition and the OR and that is served by groups