0

Estou com dificuldade em interromper o código quando entra um valor inválido.

Por exemplo, quando o usuário insere no campo idade um valor que não seja números, deve-se aparecer uma mensagem de erro.

para fazer este teste fiz esta função:

const criarIdade = () => {

    const novoFuncionarioinput = document.querySelectorAll("[data-form-input]");

    const idadeBruta = novoFuncionarioinput[1].value;

    
    
    if (isNaN(idadeBruta)) {
        const idade = "ERRO";
        window.alert("Insira uma idade válida!")
        return idade;
        }

    const idade = idadeBruta;

    return idade;
  
}

(depois insiro o retorno "idade" normalmente na linha/coluna adequada.)

A princípio está funcionando, quando a idade é inserida corretamente, consigo inserir uma linha lá na tabela (HTML) normalmente.

Porém quando a idade é diferente de número, o aleta de erro aparece mas a linha é criada mesmo assim.

Gostaria de saber se há algum comando que faça com que o código "pare por ai".

O restante do código:

export const Salvar = () => {
  event.preventDefault()
  const tablea = document.querySelector("[data-table]");
  const linha = document.createElement("tr");
  const conteudo = CriarLinha();
  linha.innerHTML = conteudo;
  tablea.appendChild(linha);
}

const CriarLinha = () => {

  const novoFuncionarioinput = document.querySelectorAll("[data-form-input]");

  const indice = criarIndice();
  const nome = criarNome();
  const idade = criarIdade();
  const cargo = criarCargo()
  //const salario = criarSalario()

  const conteudo =
    `<th class="coluna">${indice}</th>
    <th class="coluna">${nome}</th>
    <th class="coluna">${idade}</th>
    <th class="coluna">${cargo}</th>
    <th class="coluna">{salario}</th>`

  return conteudo;
}
2
  • throw é provavelmente o que você está procurando.
    – Andre
    Commented 5/06/2021 às 17:29
  • O jeito certo seria não fazer a validação em criarIdade(), mas sim numa função específica que retorne true e false. Aí dependendo do retorno você sabe que é um valor válido e pode continuar o código, com if e else. Commented 5/06/2021 às 17:29

1 Resposta 1

0

Notei algumas coisas no seu código, que me chamaram a atenção e algumas delas foi a quantidade de constantes que você estava usando, partindo dessa observação fiz algumas alterações no seu código e acredito que a sua resposta esteja nessas alterações.

Código modificado:

/**
 * Eu alterei algumas coisas na função criarIdade, para ela ficar como menos linhas de códigos e também fez com que você usasse menos
 * constantes em seu código.
 * 
 * @param input 
 * @returns Se o valor do input for NaN ela vai retornar falso caso contrario ela retorna a idade.
 * 
 * 
*/

const criarIdade = input => {
    return isNaN(input) ? false : input;
}


const Salvar = () => {

    event.preventDefault()
    
    const tablea  =  document.querySelector("[data-table]");
    
    const linha = document.createElement("tr");
    
    const conteudo = CriarLinha();

    if(typeof conteudo === 'string'){
        linha.innerHTML = conteudo;
        tablea.appendChild(linha);
    }
}

const validarLinha = linha => {

    if(typeof linha !== 'object'){
        return false;
    }

    // esse for vai passar por todo o objeto que no nosso caso e a linha.
    for(key in linha){
        if(key == 'idade'){
            if(!linha[key]){
                return false;
            } 
        }
    }

    return true;
}
    
const CriarLinha = () => {

    const novoFuncionarioinput = document.querySelectorAll("[data-form-input]");


    /**
     * Uma outra mudança foi nos valores, troquei as 5 constantes que você tinha por um objeto contendo as 
     * informações da linha.
     * 
    */ 

    const infosrmacoesDaLinha = {
        indice:  criarIndice(),
        nome: criarNome(),
        idade: criarIdade(novoFuncionarioinput[1].value),
        cargo: criarCargo(),
        salario: criarSalario()
    }
    
    //Na função validar linha você pode fazer todas as validações necessárias.
    if(!validarLinha(infosrmacoesDaLinha)){
        Alert("A idade não foi inserida corretamente!");
        return false;
    }

    const conteudo = `
        <th class="coluna">${indice}</th>
        <th class="coluna">${nome}</th>
        <th class="coluna">${idade}</th>
        <th class="coluna">${cargo}</th>
        <th class="coluna">{salario}</th>
    ` 
    
    return conteudo;
}

A primeira alteração foi na função criarIdade. Eu removi todas as constantes que você tinha declarado no escopo dessa função, reduzindo ela para um único If onde eu basicamente verifico se o valor do input que foi passado como parâmetro da função é NaN caso essa verificação seja verdadeira a função criarIdade retorna false caso contrario ela retorna o valor do input que no nosso caso é um inteiro pelo fato de ser uma idade.

A segunda alteração foi na função CriarLinha onde você tinha 5 constantes como os valores que formariam uma linha no final. Eu removi essas constantes e criei uma unica constante que eu chamei de infosrmacoesDaLinha que é um objeto contendo toda as informações da linha.

A terceira alteração foi a criação de uma função para validar a linha onde eu chamei essa função de validarLinha(linha: Objeto). validarLinha é uma função que recebe como parâmetro a nossa linha e esse parâmetro tem que ser um objeto, caso o parâmetro passado não for do tipo Objeto a função validarLinha retorna false. Caso contrario ela valida as informações da linha e retorna true se tudo estiver ok se ela encontrar algum valor que não era para estar ali, ela retorna false.

Um exemplo foi a validação da idade, onde se a idade for igual a false a função retorna false.

A quarta alteração foi na função CriarLinha onde eu adicionei somente um If para verificar o retorno da função validarLinha caso a função validar linha retorne false a função criarLinha também retornara false, caso retornado true a função criarLinha retornara o conteudo.

A quinta e ultima alteração foi na função salvar onde eu adicionei um If para verificar o conteúdo onde caso essa variável conteudo não seja do tipo string, o código não adicionara aquela linha a sua tabela, caso contrario será adicionada a linha corretamente

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .