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.