Chosen: Tornando uma entrada escolhida um campo obrigatório

Criado em 14 fev. 2012  ·  6Comentários  ·  Fonte: harvesthq/chosen

Minha marcação original define o select para ser um campo required , mas Chosen não parece estar de acordo com isso?

Comentários muito úteis

Se você estiver usando Chosen para todos os elementos select , você pode usar este CSS para torná-lo visível (para DOM), mas sem opacidade, sem altura, posição absoluta.

Esses seletores CSS têm como alvo elementos de seleção inválidos, com um deles direcionando multiple adicionando um 15px margin-top para centralizá-lo nos elementos de seleção múltipla.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
    margin-top: 15px !important;
}

Demonstração: http://jsfiddle.net/tripflex/2zdeu9oc/

Todos 6 comentários

@jbrooksuk você já encontrou uma solução para isso? jQuery Validate também não me permite forçar o campo a ser obrigatório.

Eu tenho um patch para isso referenciado em # 515 e pull request em # 900.

Acabei escrevendo uma função auxiliar que realiza essa verificação manualmente nos elementos escolhidos. Vou desenterrá-lo amanhã se puder encontrá-lo, embora, nesse meio tempo, a solução do @CaptainN pareça boa :+1:

Este é um dupe de https://github.com/harvesthq/chosen/issues/515. Estaremos acompanhando por lá. Obrigado.

515 é tecnicamente um engano disso, mas sim, tudo bem.

Se você estiver usando Chosen para todos os elementos select , você pode usar este CSS para torná-lo visível (para DOM), mas sem opacidade, sem altura, posição absoluta.

Esses seletores CSS têm como alvo elementos de seleção inválidos, com um deles direcionando multiple adicionando um 15px margin-top para centralizá-lo nos elementos de seleção múltipla.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
    margin-top: 15px !important;
}

Demonstração: http://jsfiddle.net/tripflex/2zdeu9oc/

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

SFPink picture SFPink  ·  4Comentários

asvetlenko picture asvetlenko  ·  3Comentários

alexfrancavilla picture alexfrancavilla  ·  9Comentários

engintekin picture engintekin  ·  8Comentários

eduardokranz picture eduardokranz  ·  6Comentários