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

256

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? : /

Matt
fonte
1
Se você estiver interessado em qualquer nível de compatibilidade entre navegadores, provavelmente precisará usar JavaScript. O atributo que você deseja é selectedIndex.
Luke Sneeringer
4
De acordo com o rascunho do editor atual da especificação HTML5 (6 de agosto de 2011), o elemento select possui um atributo obrigatório. "O atributo necessário é um atributo booleano. Quando especificado, o usuário deverá selecionar um valor antes de enviar o formulário." dev.w3.org/html5/spec/Overview.html#the-select-element
james.garriss

Respostas:

471

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.

mplungjan
fonte
27
Além disso, para que o usuário não possa selecionar a não opção depois de ter sido selecionada: <option selected = "selected" disabled = "disabled" value = ""> Por favor, selecione </option>
CoolAJ86
2
Isso não faz sentido ... Também não vai funcionar em vários navegadores
mplungjan
4
@ CoolAJ86 Funciona bem no Chrome 23, Firefox 16 e IE 10.
KTB
15
Eu vejo 2 votos negativos. Se você sentir vontade de votar abaixo, por favor, comente o porquê
mplungjan
1
A paráfrase da documentação é muito útil; graças
skia.heliou
13

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

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.)

Paul D. Waite
fonte
8
Estou certo de que ele só precisava de um value = "" na primeira entrada - se não houver nenhum atributo de valor ou um valor em todas as opções do necessário deixar de gatilho porque os SELECT retorna um valor real
mplungjan
1
@mplungjan: ah , entendi - bem visto.
Paul D. Waite
1
@ PaulD.Waite Ainda não podemos garantir que os usuários tenham o Javascript ativado? Estou no desenvolvimento da web há apenas 2 anos e nunca me deparei com esse problema.
User137717
2
@ user137717: é a web. Você não pode garantir nada. Você pode, é claro, decidir que não vale a pena ser atendido.
Paul D. Waite
5

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>
james.garriss
fonte
1
@Apostle - Por favor, pare de tentar alterar esta resposta através de edições. Se você acredita que está incorreto, sinta-se à vontade para deixar sua própria resposta.
Brad Larson
@ BradLarson No começo, eu não entendi direito: o código não é uma solução completa para o problema nesta pergunta ou é um exemplo explicativo do último parágrafo desta resposta. Provavelmente segundo neste caso. Acho melhor organizar esse código como um trecho e mostrar o resultado -1. Desculpe, eu não esclareço nos comentários primeiro.
Apóstolo
5

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.

pradipgarala
fonte
1
<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>
yatou
fonte
3
Esta resposta apenas repete um exemplo anterior sem explicação adicional.
James.garriss
1

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

ayush
fonte
0

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>
santosh devnath
fonte
0

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

JBallin
fonte
0

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>
sayyed tabrez
fonte
0

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.

Kudzai Machiridza
fonte
-1

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.

Roger Rocco
fonte
-4

Tente isto

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
user2289459
fonte
-6

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

Definir obrigatório

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

Remover necessário

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