JavaScript - Bootstrap Validator

Question

I am using this plugin: Plugin Link

I am trying to validate, if at least one checkbox out of a checkbox group has been selected. The plugin doesn't support such a functionality. Therefore i googled, and found this, by the plugin author himself: Discussion Link and a working implementation here: Example

I tried implementing it and failed. This is what i have so far:

<div class="col-lg-9">

                <?php
                // Input form for choosing complaints
                foreach (Complaints::getComplaints() as $complaint) {
                    ?>

                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="complaints[]" data-chkgrp="complaints[]"
                                       data-error="Try selecting at least one...">
                                <?= Helper::sanitize($complaint->getName()) ?>
                            </label>

                            <div class="help-block with-errors"></div>
                        </div>
                    </div>

                    <?php
                }
                ?>

            </div>

Plus this is the copied JS Function, that should do the magic...:

<script>
$('[data-toggle="validator"]').validator({
    custom: {
        chkgrp: function ($el) {
            console.log("Some debug output, if it is triggered at all" + $el);
            var name = $el.data("chkgrp");
            var $checkboxes = $el.closest("form").find('input[name="' + name + '"]');

            return $checkboxes.is(":checked");
        }
    },
    errors: {
        chkgrp: "Choose atleast one!"
    }
}).on("change.bs.validator", "[data-chkgrp]", function (e) {
    var $el = $(e.target);
    console.log("Does is even work? " + $el);
    var name = $el.data("chkgrp");
    var $checkboxes = $el.closest("form").find('input[name="' + name + '"]');

    $checkboxes.not(":checked").trigger("input");
});

So yeeh. Nothing happens, if i try to run this. None of my debug output is printed in the console. Nothing. The form itself also consists out of some password fields and text fields, the checkbox group - generated in the foreach loop - is just one part of it. The validator works for the text and password fields, but does exactly nothing for the checkbox group. Any ideas?

Thanks! :)

can you provide the html after php processing?

Eric Phillips
– Eric Phillips

2015-12-07 01:04:38 +00:00
Commented Dec 7, 2015 at 1:04 — Eric Phillips
– Eric Phillips, Commented Dec 7, 2015 at 1:04

Alvaro Silvino · Accepted Answer · 2015-12-07 03:28:43Z

1

I just tried to make it neat.
please checkout the solution:

Reference: http://1000hz.github.io/bootstrap-validator/

$('#form').validator().on('submit', function (e) {
  var validate = false;
  $("input[type='checkbox']").each(function(index,e){
    
    if($(e).is(':checked'))
      validate = true;
  });
  
  if(validate){
    //valid
    $('.with-errors').html(' ');
  } else {
    $('.with-errors').html('not valid');

  }
  
  //if (e.isDefaultPrevented()) {
    // handle the invalid form...
  //} else {
    // everything looks good!
  //}
})

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>





<form  role="form" data-toggle="validator" id="form" action="" method="POST">
<div class="col-lg-9">


  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" data-error="Try selecting at least one...">
        Teste1
      </label>
    
      <div class="help-block  "></div>
    </div>
  </div>
  
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" data-error="Try selecting at least one...">
        Teste2
      </label>
    
      <div class="help-block with-errors"></div>
    </div>
  </div>
  
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" data-error="Try selecting at least one...">
        Teste3
      </label>
    
      <div class="help-block with-errors"></div>
    </div>
  </div>
  

</div>
  <button type="submit" >Validade</button>
  </form>

edited Dec 7, 2015 at 3:28

answered Dec 7, 2015 at 1:28

Alvaro Silvino

9,83314 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BoA456 Over a year ago

Thank you very much. I changed the code to the following: if(validate){ $(".checkbox .with-errors").html(""); $("#registerForm").find(":submit").prop("disabled", false); } else { $(".checkbox .with-errors").html("Select at least one").css("color", "rgb(169, 68, 66)"); $("#registerForm").find(":submit").prop("disabled", true); }

Collectives™ on Stack Overflow

JavaScript - Bootstrap Validator

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related