Oi, Geraldo! Tudo bem?
Para garantir que o usuário escolha uma das opções do <select> e não deixe a opção "Selecione...", você pode utilizar o atributo required e definir a primeira opção como desabilitada, impedindo que ela seja enviada. Além disso, um pequeno script em JavaScript pode complementar a validação com uma mensagem personalizada.
Veja o exemplo:
<label for="estadoCivil">Estado Civil:</label>
<select name="estadoCivil" id="estadoCivil" required>
<option value="" disabled selected>Selecione...</option>
<option value="casado">Casado</option>
<option value="solteiro">Solteiro</option>
<option value="divorciado">Divorciado</option>
<option value="uniaoEstavel">União Estável</option>
</select>
Explicação:
- O atributo required obriga o preenchimento antes do envio do formulário.
- A opção inicial
<option value="" disabled selected> impede que o usuário envie essa seleção, pois ela não possui valor e está desabilitada.
Validação adicional com JavaScript:
<form id="meuFormulario" onsubmit="return validarFormulario()">
<label for="estadoCivil">Estado Civil:</label>
<select name="estadoCivil" id="estadoCivil" required>
<option value="" disabled selected>Selecione...</option>
<option value="casado">Casado</option>
<option value="solteiro">Solteiro</option>
<option value="divorciado">Divorciado</option>
<option value="uniaoEstavel">União Estável</option>
</select>
<button type="submit">Enviar</button>
</form>
<script>
function validarFormulario() {
const select = document.getElementById("estadoCivil");
if (!select.value) {
alert("Por favor, selecione uma opção válida.");
return false; // Impede o envio do formulário
}
return true; // Permite o envio
}
</script>
O que este script faz:
- A função
validarFormulario() é executada ao enviar o formulário. - Ela verifica se o
<select> possui algum valor selecionado. - Caso esteja vazio, exibe um alerta e impede o envio.
Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado