Posso aplicar o atributo necessário aos campos <select> no HTML5?

Como posso verificar se um usuário selecionou algo de um <select> campo no HTML5?

Vejo <select>que não suporta o novo requiredatributo ... tenho que usar JavaScript então? Ou há algo que estou perdendo? : /

Obrigatório : mantenha o primeiro valor vazio - trabalhos necessários em valores vazios

Pré - requisitos : DOCTYPE html5 correto e um campo de entrada nomeado

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

Conforme a documentação (a lista e o negrito são meus)

O atributo necessário é um atributo booleano.
Quando especificado, o usuário deverá selecionar um valor antes de enviar o formulário.

Se um elemento selecionado

• tem um atributo obrigatório especificado,
• não possui um atributo múltiplo especificado,
• e possui um tamanho de exibição 1 (não possui SIZE = 2 ou mais - omita-o se não for necessário);
• e se o valor do primeiro elemento da opção na lista de opções do elemento selecionado (se houver) for a sequência vazia (ou seja, presente comovalue="" ),
• e o nó pai desse elemento de opção é o elemento de seleção (e não um elemento do grupo de opções),

essa opção é a opção de rótulo do espaço reservado do elemento de seleção.

O <select>elemento suporta o requiredatributo, conforme a especificação:

• http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

Qual navegador não respeita isso?

(É claro que você precisa validar no servidor de qualquer maneira, pois não pode garantir que os usuários tenham o JavaScript ativado.)

Você pode usar o selectedatributo para o elemento option para selecionar uma opção por padrão. Você pode usar o requiredatributo para o elemento select para garantir que o usuário selecione algo.

Em Javascript, você pode verificar a selectedIndexpropriedade para obter o índice da opção selecionada ou verificar a valuepropriedade para obter o valor da opção selecionada.

De acordo com a especificação HTML5, selectedIndex"retorna o índice do primeiro item selecionado, se houver, ou -1 se não houver um item selecionado. E value" retorna o valor do primeiro item selecionado, se houver, ou a sequência vazia, se houver nenhum item selecionado. "Então, se selectedIndex = -1, você sabe que eles não selecionaram nada.

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>

Sim, está funcionando:

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

você deve manter a primeira opção em branco.

<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>

primeiro você deve atribuir um valor em branco na primeira opção. ou seja, selecione aqui. o necessário apenas funcionará.

Coloque o valor do primeiro item da caixa de seleção em branco.

Então, quando você publica o FORM, obtém um valor em branco e, dessa maneira, você saberia que o usuário não selecionou nada no menu suspenso.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

Você precisa definir o valueatributo de optionpara a sequência vazia:

<select name="status" required>
    <option selected disabled value="">what's your status?</option>
    <option value="code">coding</option>
    <option value="sleep">sleeping</option>
</select>

selectirá retornar o valuedo selecionado optionpara o servidor quando o usuário pressiona submitno form. Um vazio valueé igual a uma textentrada vazia -> aumentando a requiredmensagem.

w3schools

O atributo value especifica o valor a ser enviado para um servidor quando um formulário é enviado.

Exemplo

tente isso, isso vai funcionar, eu tentei isso e isso funciona.

<!DOCTYPE html>
<html>
<body>

<form action="#">
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>

Funciona perfeitamente se o valor da primeira opção for nulo. Explicação: O HTML5 lerá um valor nulo no envio do botão. Se não for nulo (atributo value), presume-se que o valor selecionado não seja nulo; portanto, a validação teria funcionado, ou seja, verificando se há dados na tag de opção. Portanto, não produzirá o método de validação. No entanto, acho que o outro lado fica claro, se o atributo value estiver definido como null, ou seja, (value = ""), o HTML5 detectará um valor vazio na primeira ou melhor, na opção selecionada padrão, fornecendo a mensagem de validação. Obrigado por perguntar. Feliz por ajudar. Fico feliz em saber se eu fiz.

No html5, você pode usar a expressão completa:

<select required="required">

Não sei por que a expressão curta não funciona, mas tente esta. Isso vai resolver.

Tente isto

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

Você também pode fazer isso dinamicamente com o JQuery

Definir obrigatório

$("#select1").attr('required', 'required');

Remover necessário

$("#select1").removeAttr('required');