Jquery Validate - Check at least 1 checkbox true

0

I use bootstrap toogle for this example: link

I have 4 checkboxes, one of them should be true.

How to do this with jquery validate?

Follow the code below:

<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>"
        },
        ....
        ....
        ....        
    }   
}

Nothing happens. I do not know what I'm doing wrong.

    
asked by anonymous 17.01.2017 / 20:17

1 answer

1

This is a solution without the validate plugin. Checking at least one, I had to change the input class name because it was giving me an error.

  

unrecognized expression: .checkbox []: checked

I changed to 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><labelfor="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>
    
17.01.2017 / 20:31