1
resposta

adicionei um estilo css no meu input que está vazio, como faço pra tirar o estilo após inserir algo?

Consegui validar meu campo, e marcara borda daquele campo CSS, até aqui OK! Após digitar no input no campo marcardo, como faço pra tirar o campo que foi marcado porque já digitei algo naquele input e não está mais nulo.

function validaPaciente(paciente) {

    let erros = []
    let minhaTd = document.querySelector('#input-nome')

    if (paciente.nome.length == 0) {
        erros.push("Informe o nome do paciente!");
        minhaTd.classList.add("alerta-campo-erro");
    }
    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")
    }

    return erros;
}

MEU CSS

.alerta-campo-erro-tirar {
    border: none;
}
1 resposta

Fala Dayson, tudo bem?

É bem simples! Do mesmo modo que você fez para adicionar (utilizando o classList.add) você pode remover (utilizando o classList.remove), você pode colocar no else da validação:

function validaPaciente(paciente) {

    let erros = []
    let minhaTd = document.querySelector('#input-nome')

    if (paciente.nome.length == 0) {
        erros.push("Informe o nome do paciente!");
        minhaTd.classList.add("alerta-campo-erro");
    } else {
        minhaTd.classList.remove("alerta-campo-erro");
    }
    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")
    }

    return erros;
}

E essa lógica você pode aplicar para o restante dos ifs!

Qualquer dúvida estamos a disposição :D

Abraços e bons estudos