2
respostas

form versão jQuery

Galera estou com a idéia de converter todo o projeto de JS vanila para jQueri. Comecei com o arquivo form.js. Esta funcionando,mas acho que posso melhorar, se alguem tiver sugestões para enriquecer agradeço.

let botaoAdicionar = $("#adicionar-paciente");
botaoAdicionar.on("click", function (event) {
    event.preventDefault();
    let form = $("#formulario");
    var paciente = obtemPacienteDoFormulario();
    //console.log(paciente);

    let mensagemErro = validaPaciente();
    if (mensagemErro.length > 0) {
        exibeMensagemDeErros(mensagemErro)
        return
    }
    adicionaPacienteNaTabela(paciente);
    form.trigger("reset");
    $("#mensagem-error").html("");
});

function validaPaciente() {
    //console.log(paciente.nome);

    let error = [];
    if ($("#nome").val().length == 0) {
        error.push("Nome em Branco, favor digitar novamente!");
    }
    if (!validaPeso($("#peso").val())) {
        error.push("Peso inválido!");
    }
    if (!validaAltura($("#altura").val())) {
        error.push("Altura inválida!");
    }
    if ($("#gordura").val().length == 0) {
        error.push("A gordura não pode ser em branco!");
    }
    if ($("#altura").val().length == 0) {
        error.push("A altura não pode ser em branco!");
    }
    if ($("#peso").val().length == 0) {
        error.push("A peso não pode ser em branco!");
    }
    return error;

}

function adicionaPacienteNaTabela(paciente) {
    let pacienteTr = montaTr(paciente);
    let tabela = $("#tabela-pacientes");
    tabela.append(pacienteTr);
}

function obtemPacienteDoFormulario() {
    let paciente = {
        nome: $("#nome").val(),
        peso: $("#peso").val(),
        altura: $("#altura").val(),
        gordura: $("#gordura").val(),
        imc: calculaImc($("#peso").val(), $("#altura").val())
    };
    return paciente;
}

function montaTr(paciente) {
    let pacienteTr = $("<tr>");
    pacienteTr.addClass("paciente");
    pacienteTr.append(montaTd(paciente.nome, "info-nome"));
    pacienteTr.append(montaTd(paciente.peso, "info-peso"));
    pacienteTr.append(montaTd(paciente.altura, "info-altura"));
    pacienteTr.append(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.append(montaTd(paciente.imc, "info-imc"));
    return pacienteTr;
}

function montaTd(dado, classe) {
    let td = $("<td>");
    td.text(dado);
    td.addClass(classe);
    return td;
}

function exibeMensagemDeErros(mensagemErro) {
    let ul = $("#mensagem-error");
    ul.html("");
    mensagemErro.forEach(function (erro) {
        let li = $("<li>");
        li.text(erro);
        console.log(erro);

        ul.append(li);
    });
}

insira seu código aqui

2 respostas

Boa tarde, Ivan! Como vai?

A uma primeira vista, o que eu percebi de mais grave foi que em diversos momentos vc faz algo como $("#nome") para recuperar algum campo do seu formulário. Se um dia esse seletor mudar vc vai precisar refatorar uma grande parte do seu código. Sendo assim, o ideal é que vc encapsulasse esses caras direto numa constante apenas uma vez! E depois, sempre que precisasse, utilizasse a sua constante para fazer referência ao campo em questão!

Exemplo prático:

const campoNome = $('#nome');

// Restante do código omitido.

if ( campoNome.val().length == 0 ) {
     error.push("Nome em Branco, favor digitar novamente!");
}

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Obrigado pela dica mestre. Vou alterar.