1
resposta

Continua adicionando os pacientes mesmo com campos invalidos

Alguém sabe onde pode ser o erro?

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
    event.preventDefault();

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

    var pacienteTr = montarTr(paciente);

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

    var erros = validaPaciente(paciente);

    if(erros.length > 0){
        exibemensagensDeErros(erros)
        return;
    }

    form.reset();
    document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

});

function exibemensagensDeErros(erros){
    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";
    erros.forEach(function(erro){
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    })
}

function obtemPacienteDoFormulario(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 montarTr(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.classList.add(classe);
    td.textContent = dado;

    return td;
    }

function validaPaciente(paciente) {

    var erros = []

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

    if (!validaPeso(paciente.peso)) {
        erros.push("peso é inválido")
    }
    if (!validaAltura(paciente.altura)){
        erros.push("altura é inválida")
    } 

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

    if(paciente.peso.length == 0){
        erros.push("O peso não pode ser em branco")
    }
    if( paciente.altura.length == 0){
        erros.push("A altura não pode ser em branco")
    }

        return erros;
    }
1 resposta

Olá Guilherme, tudo bem?

Consegui achar o erro. Foi algo bem sutil no começo do código, mais especificamente nesse trecho:

    document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

Logo abaixo de form.reset();.

Basicamente você apenas esqueceu de criar a variável ul para pode em baixo limpar o conteúdo dela com o método innerHTML.

    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

Bom, resumindo o trecho do seu código ficaria assim:

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

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

      var pacienteTr = montaTr(paciente);
      var erro = validaPaciente(paciente);
      console.log(erro);

      if(erro.length > 0) {
        exibeMensagensDeErro(erro);
        return;
      }

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

    form.reset();

    document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

})

Espero ter ajudado, forte abraço!