Jquery Validate - Mark at least 1 checkbox true

Asked

Viewed 1,542 times

0

I use toogle bootstrap from this example: http://www.bootstraptoggle.com/

I have 4 checkbox, one of them must have true.

How to do this with jquery validate ?

Follows code:

<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 don’t know what I’m doing wrong.

  • I think it’s the name of the class, try to change, not to be with "[ ]"

  • Yeah, try it, Matheus

  • @Miguel, it didn’t work

1 answer

2


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

unrecognized Expression: . checkbox[]:checked

I switched 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>
  <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>

  • What does e.preventDefault(); ?

  • 1

    @Matheusmiranda causes the form not to be submitted before the checks/validations

Browser other questions tagged

You are not signed in. Login or sign up in order to post.