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