Validate fields with Javascript

Question

I need to validate some fields at runtime, so their sum doesn’t exceed 100%. I was able to check if the value to distribute is 0, IE, the guy can not fill any value in the fields in this situation.

See the image:

0 field that identifies the value "R$100,000,00" is the basis for Textbox, the total of all Textbox cannot exceed 100%, in the case of the image, has already reached 100% because there are 2 fields, each of them consuming 50% of the total.

The topic is to help so that when the guy fills the fields and the total is equal to 100, does not allow to fill any more field, if by chance, the value to distribute is 200 for example and the guy put in one of the fields 500, return error msg until it is corrected.

My Javascript:

function PreencherPorcentagem(campo){
if (campo.value === "") {
    return;
}

var porcentagem = 0;
var idCampo = campo.id
var idPadrao = 'ctl00_ContentPlaceHolder1_rpPratifAcis_';//parte do id que sempre se repete na grid                       

var fields = idCampo.replace(idPadrao,"").split('_');//array para separar segunda parte do id. Ex: ctl03_txtClienteAgro
var idPrincipal = fields[0];//id único do campo
var nomeCampo = fields[1];                                  

var valorCampo = parseFloat(document.getElementById(campo.id).value.replace(".", "").replace(".", "").replace(".", ""));

//Caso entre na function, altera hidden field para true para separar linhas alteradas na hora de validar método de salvar
document.getElementById(idPadrao + idPrincipal + '_hdLinhaAlterada').value = true;

if (idCampo.indexOf('Cliente') != -1) {

    var valorClienteSge = 0;               
    valorClienteSge = parseFloat(document.getElementById(idPadrao + idPrincipal + '_hdClienteSge').value.replace(".", "").replace(".", "").replace(".", ""));

    if ((valorClienteSge === 0 && valorCampo === 0) || valorCampo === 0) {
        porcentagem = 0;
    }
    else if (valorClienteSge === 0 && valorCampo !== 0) {
        alert("Porcentagem não pode ser maior que 100%.");
        document.getElementById(campo.id).value = ""
        return;
    }
    else {
        porcentagem = ((valorCampo / valorClienteSge) * 100);
    }                                             

}
else if (idCampo.indexOf('Recurso') != -1) {

    var valorRecursoSge = 0;
    valorRecursoSge = parseFloat(document.getElementById(idPadrao + idPrincipal + '_hdRecursoSge').value.replace(".", "").replace(".", "").replace(".", "").replace(",00", ""));

    if ((valorRecursoSge === 0 && valorCampo === 0) || valorCampo === 0) {
        porcentagem = 0;
    }
    else if (valorRecursoSge === 0 && valorCampo !== 0) {
        alert("Porcentagem não pode ser maior que 100%.");
        document.getElementById(campo.id).value = ""
        return;
    }
    else {
        porcentagem = ((valorCampo / valorRecursoSge) * 100);
    }

}

//Preenche o campo da porcentagem
porcentagem = (Math.floor(porcentagem * 100) / 100);
document.getElementById(idPadrao + idPrincipal + "_"+  nomeCampo.replace("txt", "txtPorcentagem")).setAttribute("value", porcentagem.toString().replace(".", ",") + "%");

}

Answer 1

I solved so xD :

function PreencherPorcentagem(campo) {

            if (campo.value === "") {
                return;
            }

            var porcentagem = 0;
            var idCampo = campo.id
            var idPadrao = 'ctl00_ContentPlaceHolder1_rpPratifAcis_';//parte do id que sempre se repete na grid                       

            var fields = idCampo.replace(idPadrao, "").split('_');//array para separar segunda parte do id. Ex: ctl03_txtClienteAgro
            var idPrincipal = fields[0];//id único do campo
            var nomeCampo = fields[1];

            var valorCampo = parseFloat(document.getElementById(campo.id).value.replace(".", "").replace(".", "").replace(".", ""));

            //Caso entre na function, altera hidden field para true para separar linhas alteradas na hora de validar método de salvar
            document.getElementById(idPadrao + idPrincipal + '_hdLinhaAlterada').value = true;


            if (idCampo.indexOf('Cliente') != -1) {

                var valorClienteSge = 0;
                valorClienteSge = parseFloat(document.getElementById(idPadrao + idPrincipal + '_hdClienteSge').value.replace(".", "").replace(".", "").replace(".", ""));

                var A = document.getElementById(idPadrao + idPrincipal + '_txtClienteAgro');
                var B = document.getElementById(idPadrao + idPrincipal + '_txtClienteComercio');
                var C = document.getElementById(idPadrao + idPrincipal + '_txtClienteIndustria');
                var D = document.getElementById(idPadrao + idPrincipal + '_txtClienteServico');

                var valorClienteAgro        = parseFloat(A.value.replace(".", "").replace(".", "").replace(".", ""));
                var valorClienteComercio    = parseFloat(B.value.replace(".", "").replace(".", "").replace(".", ""));
                var valorClienteIndustria   = parseFloat(C.value.replace(".", "").replace(".", "").replace(".", ""));
                var valorClienteServico     = parseFloat(D.value.replace(".", "").replace(".", "").replace(".", ""));
                
                if ((valorClienteSge === 0 && valorCampo === 0) || valorCampo === 0) {
                    porcentagem = 0;
                }
                else if ((valorClienteAgro + valorClienteComercio + valorClienteIndustria + valorClienteServico) > valorClienteSge) {
                    alert("O valor preenchido não pode ser superior ao valor disponível.");

                    A.style.borderColor = "red";
                    B.style.borderColor = "red";
                    C.style.borderColor = "red";
                    D.style.borderColor = "red";
                }
                else if (valorClienteSge === 0 && valorCampo !== 0) {
                    alert("Porcentagem não pode ser maior que 100%.");
                    document.getElementById(campo.id).value = ""

                    return document.getElementById("myInput").style.backgroundColor = "Red";
                }
                else if (valorRecursoSge === 0 && valorCampo !== 0) {
                    document.getElementById(campo.id).value = ""

                    return document.getElementById("myInput").style.backgroundColor = "Red";
                } else {
                    porcentagem = ((valorCampo / valorClienteSge) * 100);
                }

            }
            else if (idCampo.indexOf('Recurso') != -1) {

                var valorRecursoSge = 0;
                valorRecursoSge = parseFloat(document.getElementById(idPadrao + idPrincipal + '_hdRecursoSge').value.replace(".", "").replace(".", "").replace(".", "").replace(",00", ""));

                var Um      = document.getElementById(idPadrao + idPrincipal + '_txtRecursoAgro');
                var Dois    = document.getElementById(idPadrao + idPrincipal + '_txtRecursoComercio');
                var Tres    = document.getElementById(idPadrao + idPrincipal + '_txtRecursoIndustria');
                var Quatro  = document.getElementById(idPadrao + idPrincipal + '_txtRecursoServico');

                var valorRecursoAgro        = parseFloat(Um.value.replace(".", "").replace(".", "").replace(".", ""));
                var valorRecursoComercio    = parseFloat(Dois.value.replace(".", "").replace(".", "").replace(".", ""));
                var valorRecursoIndustria   = parseFloat(Tres.value.replace(".", "").replace(".", "").replace(".", ""));
                var valorRecursoServico     = parseFloat(Quatro.value.replace(".", "").replace(".", "").replace(".", ""));

                

                
                if((valorRecursoSge === 0 && valorCampo === 0) || valorCampo === 0) {
                    porcentagem = 0;
                }
                else if ((valorRecursoAgro + valorRecursoComercio + valorRecursoIndustria + valorRecursoServico) > valorRecursoSge) {
                    alert("O valor preenchido não pode ser superior ao valor disponível.");

                    Um.style.borderColor = "red";
                    Dois.style.borderColor = "red";
                    Tres.style.borderColor = "red";
                    Quatro.style.borderColor = "red";
                }
                else if (valorRecursoSge === 0 && valorCampo !== 0) {
                    alert("Porcentagem não pode ser maior que 100%.");
                    return document.getElementById(campo.id).value = ""
                    document.getElementById("myInput").style.backgroundColor = "Red";
                }
                else {
                    porcentagem = ((valorCampo / valorRecursoSge) * 100);
                }

            }


            //Preenche o campo da porcentagem
            porcentagem = (Math.floor(porcentagem * 100) / 100);
            document.getElementById(idPadrao + idPrincipal + "_" + nomeCampo.replace("txt", "txtPorcentagem")).setAttribute("value", porcentagem.toString().replace(".", ",") + "%");
        
            //Preenche o campo da porcentagem
            porcentagem = (Math.floor(porcentagem * 100) / 100);
            document.getElementById(idPadrao + idPrincipal + "_" + nomeCampo.replace("txt", "txtPorcentagem")).setAttribute("value", porcentagem.toString().replace(".", ",") + "%");
        }