1
resposta

Por que meu if não cai como true, página de Cadastro(Formulário)

Gostaria de saber porque o if não cai como verdadeiro, sendo que coloquei na variavel chamando querySelectorAll, pegando todas as classes do formulário conforme mostro no código abaixo.

Coloquei um console.log só para ter certeza que tá realmente chamando as classes, e realmente está chamando sim!

A variavel "campoEmbranco" tá chamando todos os input do html, todas são classes. E a variavel "avisoDePreenchimento" é um paragrafo para sinalizar o usuário que não foi preenchido.

A ideia é o seguinte, se o usuário deixou um campo em branco, a frase dele deve cair no if sinalizando "Faltando preencher os campos em Branco" O problema é que não está indo pro if vai direto pro else, aparecendo o sweetalert e direcionando para página de login, conforme o código.

let campoEmBranco = document.querySelectorAll(".form-control");
console.log(campoEmBranco);
let avisoDePreenchimento = document.querySelector(".my-1010");

document.querySelector(".btn-primary").addEventListener('click', () => {

    if(campoEmBranco.value == ""){
        avisoDePreenchimento.innerHTML=("Faltando preencher os campos em Branco")

    }else{
        document.querySelector('.needs-validation').addEventListener("submit", function(event){
        event.preventDefault();
        });

        Swal.fire({
            position: 'center',
            icon: 'success',
            title: 'Dados cadastrados',
            showConfirmButton: false,
            timer: 2000
        })

        // função para redirecionar para página de login depois que cair no falso (else)
        setTimeout(() => {
            window.location.href = 'login.html'
        }, 3000)

    }


})
1 resposta

Olá Matheus, tudo bem?

Pelo que pude perceber no seu código, você está utilizando o querySelectorAll para pegar todos os campos do formulário e armazenando em uma variável chamada campoEmBranco. No entanto, acredito que você esqueceu de um detalhe importante: o querySelectorAll retorna uma lista de elementos, e não um único elemento.

Dessa forma, você precisa percorrer essa lista de elementos e verificar se algum deles está vazio. Você pode fazer isso utilizando um loop for, por exemplo. Ficaria mais ou menos assim:

let campoEmBranco = document.querySelectorAll(".form-control");
console.log(campoEmBranco);
let avisoDePreenchimento = document.querySelector(".my-1010");

document.querySelector(".btn-primary").addEventListener('click', () => {

    let preenchido = true;

    for(let i = 0; i < campoEmBranco.length; i++){
        if(campoEmBranco[i].value == ""){
            preenchido = false;
            break;
        }
    }

    if(!preenchido){
        avisoDePreenchimento.innerHTML=("Faltando preencher os campos em Branco")

    }else{
        document.querySelector('.needs-validation').addEventListener("submit", function(event){
        event.preventDefault();
        });

        Swal.fire({
            position: 'center',
            icon: 'success',
            title: 'Dados cadastrados',
            showConfirmButton: false,
            timer: 2000
        })

        // função para redirecionar para página de login depois que cair no falso (else)
        setTimeout(() => {
            window.location.href = 'login.html'
        }, 3000)

    }


})

Note que eu adicionei um loop for para percorrer a lista de campos e verifiquei se algum deles está vazio. Se algum estiver vazio, a variável preenchido recebe o valor false e o código cai no if que exibe a mensagem de aviso.

É possível fazer isso também usando o método array forEach(), mas vou deixar essa ideia no ar para você pensar sobre ela e como ela pode ser aplicada da mesma forma que o for()

E caso esse método que lhe passei acima não funcionar em seu projeto, peço que me comunique para que eu tente lhe ajudar de uma forma diferente.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓.