0

Olá, sou iniciante em js e estou com problema na seguinte função checkRequired(inputArr), por algum motivo ela retorna undefined. Já tentei de várias maneiras achar o erro utilizando o console.log e fazendo algumas alterações no código, mas não obtive sucesso Se alguém puder me ajudar eu agradeço.

function checkRequired(inputArr){

    let isRequired = true;
    
    inputArr.forEach(function(input){
        if(input.value.trim() === ""){
            showError(input, `Esse campo deve ser preenchido`);
            isRequired = false;
            return isRequired;
        }
        else{
            showSuccess(input);
            isRequired = true;
            return isRequired;
        }
    });
}

function addTransaction(e){
    
    e.preventDefault();

    if(checkRequired([text, amount])){
        
        const transaction = {
            id: generateID(),
            text: text.value,
            amount: +amount.value
        }
        transactions.push(transaction);
        if(checkRequired([text, amount]) === undefined){
            addTransactionDOM(transaction);
        }
        updateValues();
        updateLocalStorage();
        
        text.value = "";
        amount.value = "";
    }
}

2 Respostas 2

3

forEach serve para fazer alguma coisa com cada elemento de um array. Essa "alguma coisa" é um callback: uma função que é passada como argumento para forEach, e executada para cada elemento do array.

O return, no caso, está dentro do callback. Ou seja, isso aqui:

inputArr.forEach(function(input) {
    if (input.value.trim() === "") {
        showError(input, `Esse campo deve ser preenchido`);
        isRequired = false;
        return isRequired;
    } else {
        showSuccess(input);
        isRequired = true;
        return isRequired;
    }
});

Seria equivalente a fazer isso:

function fazAlgo(input) {
    if (input.value.trim() === "") {
        showError(input, `Esse campo deve ser preenchido`);
        isRequired = false;
        return isRequired;
    } else {
        showSuccess(input);
        isRequired = true;
        return isRequired;
    }
}
for (const input of inputArr) {
    fazAlgo(input);
}

Você está chamando a função várias vezes (uma para cada elemento do array). A função retorna, mas o seu retorno é ignorado (não é guardado em nenhum lugar).

E o retorno do callback não é o retorno do forEach. Até porque forEach não retorna nada (ele só serve para executar alguma coisa em todos os elementos).


Pelo que entendi, você quer que checkRequired retorne true se todos os campos estiverem preenchidos, e false se algum deles - qualquer um - estiver vazio. Então bastaria fazer:

function checkRequired(inputArr) {
    for (const input of inputArr) {
        if (input.value.trim() === "") { // se algum campo for vazio, retorna false
            showError(input, `Esse campo deve ser preenchido`);
            return false;
        } else showSuccess(input);
    }
    return true;
}

Você percorre os campos com for...of, e se algum deles for vazio, retorne false (não precisa verificar o restante).

Se chegou ao final do for, é porque todos estão preenchidos, então posso retornar true.

Claro que também pode ser feito com um for "tradicional":

function checkRequired(inputArr) {
    for (let i = 0; i < inputArr.length; i++) {
        let input = inputArr[i];
        if (input.value.trim() === "") { // se algum campo for vazio, retorna false
            showError(input, `Esse campo deve ser preenchido`);
            return false;
        } else showSuccess(input);
    }
    return true;
}

O detalhe é que a função acima é interrompida logo que encontrar um campo não preenchido.

Mas se a ideia é sempre percorrer todos os campos, mostrando a mensagem de sucesso ou de erro para cada um deles, basta fazer assim:

function checkRequired(inputArr) {
    let required = true;
    for (let i = 0; i < inputArr.length; i++) {
        let input = inputArr[i];
        if (input.value.trim() === "") { // se algum campo for vazio, required é false
            showError(input, `Esse campo deve ser preenchido`);
            required = false;
        } else showSuccess(input);
    }
    return required;
}

Repare que não faz sentido setar required = true dentro do else. E se o primeiro campo não está preenchido mas o segundo sim? Se tivesse required = true dentro do else, a função retornaria true, mesmo tendo um campo vazio. A ideia é que, se encontrar um campo vazio, required seja false e não mude mais (pois basta ter um campo vazio para que a verificação falhe). Somente se todos estiverem preenchidos, a função retorna true.

A diferença é que dentro do if não tem mais o return, então a função não é interrompida. Neste caso, serão mostradas as mensagens para todos os campos, estejam eles vazios ou não.

2
  • Opa hkotsubo, muito obrigado pela ajuda. E olhando novamente, realmente o return não pertencia a função checkRequired, e sim a função callback. Eu apenas tirei o return da callback, pus na função e cheguei onde eu queria, também testei a sua solução com o laço for. Não sei qual seria o mais recomendado para essa situação, pq ainda não manjo de refinamento de código. Mas agradeço novamente. Commented 16/07/2020 às 22:36
  • @MarceloCabral Se a resposta resolveu o seu problema, vc pode aceitá-la, veja aqui como e porque fazê-lo. Não é obrigatório, mas é uma boa prática do site, para indicar a futuros visitantes que aquilo resolveu o problema. E quando tiver 15 pontos, vc também poderá votar em todas as respostas que achou úteis. E nesse caso eu acho o for mais simples e claro que forEach, pois não precisa de um callback sendo que dá pra fazer tudo no próprio loop
    – hkotsubo
    Commented 16/07/2020 às 22:44
0

O valor está voltando undefined porque você não está dando retorno na função, que você colocou alguns return mas eles estão retornando o valor para o callback da função forEach e a sua função checkRequired() não tem return, tente isso aqui:

function checkRequired(inputArr){

let isRequired = true;

inputArr.forEach(function(input){
    if(input.value.trim() === ""){
        showError(input, `Esse campo deve ser preenchido`);
        isRequired = false;
        return isRequired
    }
    else{
        showSuccess(input);
        isRequired = true;
        return isRequired;
    }
 });

 return isRequired;
}
1
  • 1
    Opa Jason Rabelo. Olhando novamente aqui, o return não pertencia a função checkRequired(), e sim a callback, testei com o seu código e deu certo. Muito obrigado pela ajuda Commented 16/07/2020 às 22:57

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 .