1
resposta

Problema com adição de espaços vazio

Boa noite, eu não estou conseguindo ver qual problema de lógica que estou tendo: Formulario.js:

let botao = document.getElementById('adicionar-paciente')

botao.addEventListener("click",(e)=>{
    e.preventDefault()

    let form = document.getElementById('form-adiciona')
    let incluirPaciente = obterValoresForm(form)

    let erros = validaPaciente(incluirPaciente)
    console.log(erros);

    if(erros.length>0){
        exibirMsgErro(erros)
    }

    let pacienteTr = montaTr(incluirPaciente)

    let tabela = document.getElementById("tabela-pacientes")
    tabela.appendChild(pacienteTr)
    form.reset()


})

function exibirMsgErro(erros){
    let ul = document.getElementById("msg-error")
    ul.innerHTML=""
    erros.forEach(function(erro){
        let li = document.createElement("li")
        li.textContent = erro
        ul.appendChild(li)
    })
}


function obterValoresForm(form){
    let paciente = {
        nome : form.nome.value,
        altura : form.altura.value,
        peso : form.peso.value,
        gordura : form.gordura.value,
        imc: calculaIMC(form.peso.value,form.altura.value)
    }

    return paciente
}

function montaTr(paciente){

    let criarTR = document.createElement("tr") 
    criarTR.classList.add("paciente")

    let nomeTD = montaTD(paciente.nome,"info-nome") 
    let pesoTD = montaTD(paciente.peso,"info-peso")  
    let alturaTD = montaTD(paciente.altura,"info-altura")  
    let gorduraTD = montaTD(paciente.gordura,"info-gordura")  
    let imcTD = montaTD(paciente.imc,"info-imc")  

    criarTR.appendChild(nomeTD)
    criarTR.appendChild(pesoTD)
    criarTR.appendChild(alturaTD)
    criarTR.appendChild(gorduraTD)
    criarTR.appendChild(imcTD)

    return criarTR

}

function montaTD(dado,classe){
    let td = document.createElement("td")
    td.textContent = dado
    td.classList.add(classe)

    return td
}

function validaPaciente(paciente){

    let arrayErros =[]

    if(paciente.nome.length == ""){
        arrayErros.push("Nome está em branco")
    }

    if(paciente.gordura.length == ""){
        arrayErros.push("% Gordura está em branco")
    }

    if(paciente.altura.length == ""){
        arrayErros.push("A altura está em branco")
    }

    if(paciente.peso.length == ""){
        arrayErros.push("O peso está em branco")
    }

    if(!validaPeso(paciente.peso)){
        arrayErros.push("Peso Inválido")
    }

    if(!validaAltura(paciente.altura)){
        arrayErros.push("Altura Inválida")
    }

    return arrayErros
}
1 resposta

Olá Yago, tudo bem com você?

Peço desculpas pela demora em lhe responder.

O comportamento apresentado, onde um novo paciente é adicionado a tabela sem que todos os campos do formulário sejam preenchidos, está acontecendo devido a não declaração de um retorno (return) na estrutura condicional que verifica da quantidade de erros retornados na validação do formulário usando a função validaPaciente.

Esse retorno é responsável por impedir a execução das linhas de códigos declaradas após ele, impedindo assim a execução da função responsável por adicionar um paciente à tabela.

No arquivo Formulario.js, localize a estrutura condicional if(erros.length>0){} que está dentro do evento click. Adicione um retorno a esta estrutura condicional, ela deve ficar como apresentada abaixo.

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

Salve o arquivo Formulario.js. Agora, basta abrir o arquivo index.html no navegador e usando o formulário realize a tentativa de adição de um novo paciente sem preencher todos os campos do formulário.

Espero ter lhe ajudado. Em caso de dúvidas estou à disposição.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!