11
respostas

Validar um input e colocar na tabela - JavaScript

Olá, estou tentando resolver um teste prático, mas descobri uma dificuldade minha: Me perco no entendimento do que cada coisa está fazendo quando eu refatoro um código(crio uma função pra usar em mais de um lugar e passo parametros)

Estou tentando validar um cadastro simples, todos os dados são inseridos quando a pessoa clica em "cadastrar", mas a validação não está sendo inserida.

Poderiam me ajudar a resolver e entender oq está acontecendo? Para não dar um copy past em todos os arquivos, coloquei em alguns links para teste... Só copiar e colar o código salvar o nome do arquivo de acordo com o titulo (titulo: teste.html, salvar o código desse link como teste.html)

teste.html http://text-share.com/view/614669fa validaMotorista.js http://text-share.com/view/8e73aa6d criaMotorista.js http://text-share.com/view/410a2f9bM criaPassageiro.js http://text-share.com/view/66e6ef3d teste.css http://text-share.com/view/55f6758b

Se puderem me ajudar, agradeço. Estou tentando algo prático "sozinho" pela primeira vez, aceito sujestão de melhorias e afins.

Valeu xD

11 respostas

Você quer algo neste estilo?

JsFiddle

OBS: No momento estou sem tempo e removi boa parte do seu HTML. Fiz somente a parte de Cadastro de Passageiro.

Mudei um pouco seu JS, mas nada que faça você ficar confuso, pois você mesmo disse que fica um pouco perdido quando está refatorando.


Sugestão

Perceba que em seu código você está sempre passando uma String para o document.querySelector.

document.querySelector("#adiciona-passageiro")

Agora imagina se você mudar o id para adicionar-passageiro. Será preciso fazer um replace em todos os lugares que possui o antigo id.

Eu gosto de criar um Objeto Literal e guardar os elementos do DOM dentro dele.

Exemplo

const DOMStrings = {
    btn: '#btn-passageiro',
    adicionaPassageiro: '#adiciona-passageiro',
    tabelaPassageiro: '#tabela-passageiros'
}

Caso eu faça alterações no HTML, será preciso alterar apenas em um lugar no meu JS.


Poderia lhe passar muitas sugestões, mas recomendo que faça os cursos de JS Avançado. Você irá aprender bastante com o Professor Flávio.

Então, o meu problema é no Cadastro de Motorista mesmo, a validação esta nele rs, se ele estiver de ferias, mudar para inativo.

Sim, ainda estou no começo de JS, mas tinha que entregar isso até terça, então não da tempo de aprender tudo E aplicar o teste hahah:

"Neste sistema será possível cadastrar motoristas com Nome, Data de Nascimento, CPF, Modelo do carro, Status e Sexo, todos os campos são obrigatórios. Quando um motorista entrar em período de férias será possível alterar seu status de Ativo, para Inativo e o sistema deve conter uma consulta aos motoristas já cadastrados. Para o cadastro de passageiros o sistema precisa de Nome do Passageiro, Data de Nascimento, CPF e Sexo, todos os campos são obrigatórios. Nosso cliente também precisará consultar os passageiros já cadastrados no sistema. Por fim será possível registrar e consultar uma lista de corridas. Para registrar uma corrida será necessário informar qual o motorista, qual o passageiro e o valor da corrida. O sistema deve bloquear o registro de corridas para motoristas Inativos."

Apenas uma dúvida, é necessário fazer tudo em JS?

Como você sabe, JS fica no Front e caso atualizar a página, irá perder os dados.

Pretende enviar algum dado para o Back?

Então... O correto seria validar no js e enviar pro banco, mas eu não sei fazer isso ainda hahaha :(

Ainda estou iniciando na área

No momento, qual linguagem de back-end que você mais se sente confortável?

A princípio, você pode pegar o meu exemplo de Passageiro e aplicar em Motorista, contudo, será necessário adicionar / atualizar os campos.


A tag form está errada incompleta

<form id="adiciona-motorista" class="hidden-lg-down">

Quando você não informa o method, implicitamente será GET. Como você quer salvar informação, será preciso setar o method para post.

É necessário informar também a action para saber onde enviar as informações.

Exemplo

<form method="post" action="cadastra-motorista.php">

No seu nível não recomendo fazer tudo em JS, pois será um pouco trabalhoso. Eu imagino que você precisará montar uma estrutura de dados para Ativo e Inativo, sendo que será preciso pegar o ID do item correto.

Recomendo você fazer em PHP. Será fácil e rápido.

Esses detalhes de Ativo, Inativo, será mais fácil se você fazer um SELECT no BD usando PHP e levar os dados para o Front.

No Front pode deixar dois botões e fazer um if, verificando se o usuário está ativo ou inativo, fazendo com que ele veja o botão contrário a seu Status.

Consegui arrumar aqui, porem agora estou com problema na logica do validaFerias

function validaFerias(ferias, status) {
    var status;
    if (ferias == "SIM") {
        $status = "Inativo";
        status = $status;

    }else if (ferias != "NÃO" && ferias != "SIM") {

    $status = "verificar Ferias";
    status = $status;
    status = status;
    //tdferias.classList.add('bg-danger');
    //tdStatus.classList.add('bg-danger');

    } else {
        $status = "Ativo";
        status = $status;
    }
    return status;
}

Em nenhum momento cai no ultimo else. Mesmo não estando de ferias e ativo, ele cai no verificar ferias.

Sim, também acho mais facil fazer isso no bd. Mas como eu ainda não aprendi e tenho q entregar ate terça, so me resta o js,

Só falta ele cair no ativo agora, como disse ali em cima

` else if (ferias != "NÃO" && ferias != "SIM") `Mas no meu entendimento, se ferias for diferente de não(seria sim entao) E ferias diferente de SIM(seria não no caso) esse else if ia ficar esperando alguma outra coisa, mas como não tem, ele não deveria cair nesse if e entao cair no ultimo else pelo meu entendimento foi isso, se não caisse nem em sim e nem em não, ele pularia esse else if e cairia pro ultimo else

Comentei o else IF e agora funcionou aqui, mas ainda nao entendi o pq dessa parte da logica estar errada e não cair no ultimo else

Isso que você quer?

function validaFerias(ferias) {
    let status;

    if (ferias.toLowerCase() !== 'não' && ferias.toLowerCase() !== 'sim') {
        return status = 'Verificar férias'
    } else if (ferias.toLowerCase() === 'sim') {
        return status = 'Inativo'        
    }

    return status = 'ativo'

}

Exemplo

Se você digitar sim o resultado será: Inativo

Se você digitar não o resultado será: Ativo

Se você digitar qualquer coisa que não seja sim / não o resultado será: Verificar férias

Valeu brother.

Você acha que só com os cursos basicos aqui da alura de mysql e js eu consigo consigo escrever um código melhor(sei que está pessimo e muito verboso) e essas integrações, e tudo mais?

Ainda estou bem no começo, acho que ja deu pra perceber hauauh

Foi mal qualquer coisa e obrigado por ajudar

Consegui sim, contudo será necessário aprender alguma linguagem de Back-end => PHP, Java, Nodejs (usa javascript), C#, etc...

Alura é bom porque te dá um Norte, mas é apenas isto. A maioria dos projetos são simples, mas você percebe que eles tentam mostrar as partes / conceitos importantes.

Eu não gosto de alguns padrões que eles usam, então eu sempre procuro mais sobre o assunto no Youtube, Stackoverflow, etc.

Cara, só para você saber, eu aprendi JS recentemente, na marra kkk. Terminei recentemente um projeto de faculdade (faço Análise e Desenvolvimento de Sistemas) usando VueJS e NodeJS como API.

Fiz o sistema em 1 mês e depois eu refiz ele, pois percebi que tinha aprendido mais sobre a linguagem.

Recomendo que você escolha uma Stack e foque nela. Eu perdi muito tempo escolhendo linguagens... Passei por PHP, Java, depois voltei para PHP, voltei para Java...

Hoje estou com PHP (Laravel) e JS (VueJS).

Finalizando... Treine, treine, treine todos os dias. (Se você tiver algum amigo / mentor que programador, será de grande ajuda).

Site para praticar lógica: https://www.hackerrank.com


Sobre o outro post (MySQL), você precisa fazer o comando fora do shell MySQL, ou seja, precisa ser feito diretamente no CMD / Terminal.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software