0

Eu uso bootstrap toogle desse exemplo: http://www.bootstraptoggle.com/

Tenho 4 checkbox, uma delas devem ficar com true.

Como fazer isso com jquery validate ?

Segue código:

<label for="checkbox[]" generated="true"></label>
<label class="checkbox-inline">
    <input id="checkbox1" class="checkbox[]" type="checkbox" data-onstyle = "success" data-offstyle = "danger" data-on = "Sim" data-off = "Não" data-size = "mini">
</label>

<label class="checkbox-inline">
    <input id="checkbox2" class="checkbox[]" type="checkbox" data-onstyle = "success" data-offstyle = "danger" data-on = "Sim" data-off = "Não" data-size = "mini">
</label>

<label class="checkbox-inline">
    <input id="checkbox3" class="checkbox[]" type="checkbox" data-onstyle = "success" data-offstyle = "danger" data-on = "Sim" data-off = "Não" data-size = "mini">
</label>

<label class="checkbox-inline">
    <input id="checkbox4" class="checkbox[]" type="checkbox" data-onstyle = "success" data-offstyle = "danger" data-on = "Sim" data-off = "Não" data-size = "mini">
</label>

Javasxcript:

$(document).ready(function () {

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

Não acontece nada. Não sei o que estou fazendo de errado.

3
  • Eu acho que é o nome da classe, tenta mudar, para não ficar com "[ ]"
    – Miguel
    17/01/2017 às 19:26
  • Sim, tenta lá Matheus
    – Miguel
    17/01/2017 às 19:28
  • @Miguel, não funcionou 17/01/2017 às 19:29

1 Resposta 1

2

Esta é uma solução sem o plugin validate. Checar pelo menos um, tive de mudar o nome da classe dos inputs porque me estava a dar um erro.

unrecognized expression: .checkbox[]:checked

Mudei para checkbox

$('input[type="submit"]').on('click', function(e) {
  e.preventDefault();
  if($('.checkbox:checked').length > 0) {
      $(this).parents('form').submit();
      return;
  }
  alert('check em pelo menos um');
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <label for="checkbox[]" generated="true"></label>
<label class="checkbox-inline">
    <input id="checkbox1" class="checkbox" type="checkbox" data-onstyle = "success" data-offstyle = "danger" data-on = "Sim" data-off = "Não" data-size = "mini">
</label>

<label class="checkbox-inline">
    <input id="checkbox2" class="checkbox" type="checkbox" data-onstyle = "success" data-offstyle = "danger" data-on = "Sim" data-off = "Não" data-size = "mini">
</label>

<label class="checkbox-inline">
    <input id="checkbox3" class="checkbox" type="checkbox" data-onstyle = "success" data-offstyle = "danger" data-on = "Sim" data-off = "Não" data-size = "mini">
</label>

<label class="checkbox-inline">
    <input id="checkbox4" class="checkbox" type="checkbox" data-onstyle = "success" data-offstyle = "danger" data-on = "Sim" data-off = "Não" data-size = "mini">
</label>
  <input type="submit">
</form>

2
  • O que faz e.preventDefault(); ? 17/01/2017 às 20:11
  • 1
    @MatheusMiranda faz com que o formulário não seja submetido antes das verificações/validações
    – Miguel
    17/01/2017 às 20:12

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 .