Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Mensagens de erro aparecem em uma só <li>

Não estou encontrando onde está o erro, as mensagens de erro aparecem lado a lado e não listadas uma abaixo da outra, segue o código:


var botaoAdicionar = document.querySelector("#adicionar-paciente");

botaoAdicionar.addEventListener("click", function(event){

    event.preventDefault();

    var form = document.querySelector("#form-adiciona")

    var paciente = obtemDadosFormulario(form);

    var pacienteTr = montaTr(paciente);

    var erros = validaPaciente(paciente);

    if(erros.length > 0){
        var mensagemErro = document.querySelector("#mensagens-erro");
        mensagemErro.textContent = erros;
        return;
    }

    var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);

    form.reset();

    var mensagensErro = document.querySelector("#mensagens-erro");
    mensagensErro.innerHTLM = "";

})

function obtemDadosFormulario(form) {

    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calculaImc(form.peso.value, form.altura.value)
    }

    return paciente;

}

function montaTr(paciente) {

    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr

}

function montaTd(dado, classe) {

    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add("classe");

    return td;

}

function validaPaciente(paciente) {

    var erros = [];

    if(!validaPeso(paciente.peso)){
        erros.push("O Peso é inválido!");
    }

    if(!validaAltura(paciente.altura)){
        erros.push("A Altura é inválida!");
    }    

    if(paciente.nome.length == 0) {
        erros.push("O nome não pode estar em branco!");
    }

    if(paciente.gordura.length == 0) {
        erros.push("A gordura não pode estar em branco!");
    }

    if(paciente.altura.length == 0) {
        erros.push("A altura não pode estar em branco!");
    }

    if(paciente.peso.length == 0) {
        erros.push("O peso não pode estar em branco!");
    }

    return erros;
}

function exibeMensagensDeErro(erros) {
    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

    erros.forEach(function(erro) {
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    });

}
2 respostas
solução!

Encontrei o erro!

No evento do botão, onde deveria haver a validação com a função que exibe as mensagens de erro eu havia colocado:

 if(erros.length > 0){
        var mensagemErro = document.querySelector("#mensagens-erro");
        mensagemErro.textContent = erros;
        return;
    }

porém dessa forma eu estava retornando os erros diretamente no ul, então eu fiz a modificação:

    if(erros.length > 0){

        exibeMensagensDeErro(erros);
        return;
    }

agora a validação faz uso da função criada para adicionar uma li para cada erro encontrado.

Oi Guilherme tudo bem?

Que bom que encontrou o erro!!! Continue assim e bons estudos!!!