0

Exemplo: tenho 6 checkboxes diferentes. Todas delas estão com name="checkbox[]", uma delas devem ser marcada com 1 ou true.

Aqui está um exemplo em jsfiddle: https://jsfiddle.net/vh8d9un8/14/

O botão "SUBMIT" não está funcionando.

Update - Tentativa 1 (Não funciona)

Aqui está jsfiddle: http://jsfiddle.net/VwPaR/1029/

  <div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Material Design Switch Demos</div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">
      Bootstrap Switch Default
      <div class="material-switch pull-right">
        <input id="someSwitchOptionDefault" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionDefault" class="label-default"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Primary
      <div class="material-switch pull-right">
        <input id="someSwitchOptionPrimary" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionPrimary" class="label-primary"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Success
      <div class="material-switch pull-right">
        <input id="someSwitchOptionSuccess" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionSuccess" class="label-success"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Info
      <div class="material-switch pull-right">
        <input id="someSwitchOptionInfo" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionInfo" class="label-info"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Warning
      <div class="material-switch pull-right">
        <input id="someSwitchOptionWarning" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionWarning" class="label-warning"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Danger
      <div class="material-switch pull-right">
        <input id="someSwitchOptionDanger" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionDanger" class="label-danger"></label>
      </div>
    </li>
  </ul>
</div>

JS:

 $("#myform").validate({
                ignore: ":hidden",
                rules: {
                    "checkbox": { required: true, minlength: 1 },
},
messages: {
"checkbox[]": "<span style=\"color: #a94442;\">Uma das opções deve ser marcada *</span>"
},

Alguma solução ?

2 Respostas 2

2

Fiz um teste utilizando o seu fiddle de exemplo e acredito que identifiquei o problema.

Encontre a declaração abaixo no seu arquivo CSS:

.material-switch > input[type="checkbox"] {
    display: none;
}

Faça a substituição pela seguinte declaração:

.material-switch > input[type="checkbox"] {
    visibility: hidden;
    position: absolute;
}

Depois você vai precisar alterar um pouco a organização do código para exibir a mensagem de uma forma mais agradável.

1
  • Funcionou aqui. Na linha .material-switch > input[type="checkbox"] { visibility: hidden; position: absolute; } não vai funcionar. Remover apena na linha: ` position: absolute;` trabalhou aqui. Commented 7/02/2017 às 5:15
0

Eu mexi um pouco no teu fiddle, tratando os itens de uma maneira um pouco diferente, mas acredito que alcance o resultado que tu procura:

https://jsfiddle.net/vh8d9un8/15/

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .