-2

Estou tentando fazer uma formulário teste para aprender a fazer um formulário maior. Mas meu código JS não está funcionando como eu esperava. A ideia é: que a pessoas preencha os dados, nome, sobrenome, e-mail, telefone e gênero. E que se ela não colocar um nome ou não colocar o sobrenome ou não colocar nenhum dos dois, o botão "Enviar" continue desabilitado, ou seja, só habilita se a pessoa colocar os 2. Segue meu HTML:

Seu cadastro
<div class="bloco">
    <form method="get" action="">
        <fieldset>
            <legend><b>Seu Cadastro</b></legend>
            <!-- <p>Por favor coloque seus dados corretamente.</p> -->
            <br>
            <div class="inputBloco">
                <label for="nome">Nome</label>
                <input type="text" name="nome" placeholder="Ex.: Ana" id="nome" onchange="validateInputs()" class="inputUser">
            </div>
            <br>
            <div class="inputBloco">
                <label for="sobrenome">Sobrenome</label>
                <input type="text" name="sobrenome" placeholder= "Ex.: Silva" id="sobrenome" class="inputUser">
            </div>
            <br>
            <div class="inputBloco">
                <label for="email">E-mail</label>
                <input type="email" name="email" placeholder= "Ex.:[email protected]" id="email" class="inputUser">
            </div>
            <br>
            <div class="inputBloco">
                <label for="telefone">Telefone</label>
                <input type="tel" name="telefone" placeholder= "Ex.:91989895454" id="telefone" class="inputUser">
            </div>
            <br>
            <div class="inputBloco">
                <label for="genero">Gênero</label>
                <input type="text" name="genero" placeholder="Feminino/Masculino/Agênero/Não-binário/Outros" id="genero" class="inputUser">
            </div>
            <br>
            <div>
                <button type="submit" id="enviar" disabled= "true">Enviar</button>
            </div>
        </fieldset>
    </form>

</div>

<script src="interacaoCadastrinho.js"></script>

Segue meu código JS:

function validateInputs() {
const nome = document.getElementById("nome").value;
const sobrenome = document.getElementById("sobrenome").value;
const numeroTelefone = document.getElementById("telefone").value;
if ((nome === null || nome === " ") || (sobrenome ===   null || sobrenome === " ")) {
    document.getElementById("enviar").disabled = true;
}else{
    document.getElementById("enviar").disabled = false;
}

}

E meu CSS:

    font-family: "Courier New", "Lucida Console", monospace;
    background-image: linear-gradient(to right, rgb(36, 82, 85), rgb(60, 60, 60));
    color:lightgray;

}
.bloco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(0,0,0, 0.7);
    padding: 15px;
    border-radius: 15px;
}
fieldset {
    border: 5px ridge rgb(36, 82, 85);
    border-radius: 7px;

}
legend {
    border: 1px ridge rgb(36, 82, 85);
    border-radius: 7px;
    padding: 10px;
    text-align: center;
    background-color: rgb(36, 82, 85);
}
.inputBloco {
    position: relative;
}
.inputUser {
   width: 94%;
   text-align: left;
   transform: translate(+1%, +2%);
   background: rgb(60, 60, 60, 0.3);
   border-radius: 3px;
   color: lightgray;
   letter-spacing: 1px;
}
button {
    background-image: linear-gradient(to left, rgb(36, 82, 85), rgb(60, 60, 60));
    width: 96%;
    transform: translate(+2%, +2%);
    border: none;
    padding: 6px;
    color: lightgray;
    font-family: "Courier New", "Lucida Console", monospace;
    font-size: 16px;
    border-radius: 3px;
    cursor: pointer;
}
button:hover {
    opacity: 0.7;
    color: black;
}```

 
1
  • 1
    A sua função de validação só executa se o campo nome for alterado. Pela sua descrição, deveria ser executada quando qualquer campo for alterado. Comece repensando isso.
    – bfavaretto
    13/09 às 19:55

2 Respostas 2

0

você pode fazer assim

if(nome.trim() && sobrenome.trim()){
// condição verdadeira
}else{
// condição falsa
}

uma string vazia é um valor falsy então quando usado em um if ele é considerado como falso e o bloco n é executado. para resolver o problema de caso o usuário colocar espaço vazio eu utilizei o método trim() que remove os espaços do começo e fim.

-2

Faltou colocar no input sobrenomne o onchange="validateInputs()"

No JS você coloca isso dai no If, ou retira o === "" e coloca ! (negação no nome e no sobrenome)

if ((nome === "" || nome === " ") || (sobrenome === "" || sobrenome === " "))

ou

if ((!nome || nome === " ") || (!sobrenome || sobrenome === " "))

1
  • Resolvido com sua ajuda. Com relação ao onchange="validateInputs(), foi desatenção , é claro que tinha que estar no sobrenome também. Já com relação ao ! e null, foi um erro conceitual, vou estudar mais. 14/09 às 17:31

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 .