1
resposta

Select obrigatorio

Como fariamos no seguinte caso para a tag select:

Precisamos que o primeiro campo seja Selecione e em seguida venham as opções.
porém o usuário precisa escolher uma das opções mas não pode escolher a opção Selecione pois ela está ali apenas para indicar o que o usuário deve fazer e não possui valor.

1 resposta

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:

  1. A função validarFormulario() é executada ao enviar o formulário.
  2. Ela verifica se o <select> possui algum valor selecionado.
  3. 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