Bootstrap Validation | Checkbox data-toggle="toggle"

Question

I want to apply validation on checkbox with toggle effect

 <div class="togglebutton form-group has-feedback paddingTopBtn8">
    Yes<label> <input type="checkbox" ng-model="checkfield" required data-error="This is an mandatory field">
   <div class="help-block with-errors"></div>
   <span class="toggle"></span></label>No
</div>

Can anyone please help me. Its not working. I applied required and data-error also but at the time of submit the form shows the ng-valid whether i checked the checkbox or not

Thanks in advance

Answer 1

I am not much clear on what you mean by toggle effect with checkbox.

But i have utilized form validation Example of https://scotch.io/tutorials/angularjs-form-validation and created a small POC for checkbox validation.

PLease have a look here.

 <div class="togglebutton form-group has-feedback paddingTopBtn8">
    Yes<label> <input type="checkbox" ng-model="user.checkfield" required    
    name="checkfield">
    <p ng-show="userForm.checkfield.$invalid && !userForm.checkfield.$pristine"   
    class="help-block">Please toggle.</p>
    <span class="toggle"></span></label>No
</div>

CodePen Example