Some way to break the code

Question

I’m having trouble interrupting the code when entering an invalid value.

For example, when the user inserts a value other than numbers into the age field, an error message should appear.

to make this test I made this function:

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;
  
}

(then insert the "age" return normally into the appropriate row/column.)

At first it is working, when the age is inserted correctly, I can insert a row there in the table (HTML) normally.

But when the age is different from number, the error flap appears but the line is created anyway.

I wonder if there are any commands that make the code "stop there".

The rest of the code:

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;
}

Answer 1

I noticed some things in your code that caught my attention and some of them were the amount of constants you were using, starting from that observation I made some changes to your code and I believe your answer lies in those changes.

Modified code:

/**
 * 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;
}

The first change was in the function criarIdade. I removed all the constants you had declared in the scope of this function, reducing it to a single If where I basically check whether the value of the input that was passed as a function parameter is NaN if the function is true criarIdade returns false otherwise it returns the value of the input that in our case is a inteiro because it is an age.

The second change was in function CriarLinha where you had 5 constants as the values that would form a line at the end. I removed these constants and created a single constant that I called infosrmacoesDaLinha which is an object containing all line information.

The third change was the creation of a function to validate the line where I called this function validarLinha(linha: Objeto). validarLine is a function that takes our line as a parameter and this parameter has to be an object, if the parameter passed is not of type Object to function validarLinha returns false. Otherwise it validates the line information and returns true if everything is ok if it finds some value that wasn’t meant to be there, it returns false.

An example was age validation, where if the age is false the function returns false.

The fourth change was in function CriarLinha where I only added one If to check the function return validarLinha if the function validate line returns false the function createLine will also return false, if returned true the function createLine will return the content.

The fifth and last change was in the save function where I added a If to check the content where if this content variable is not of type string, the code will not add that row to your table, otherwise the line will be added correctly