how to validate a checkbox with the style =display:none in bootstrap?

Question

I want to make a checkbox as a required field. But I hide the checkbox using display:none CSS. So that the bootstrap form validation error message not showing. How can I show the error message?

 input[type=checkbox] { display: none; } .option-input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 40px; width: 40px; transition: all 0.15s ease-out 0s; border: none; color: #fff; cursor: pointer; display: inline-block; margin-right: 0.5rem; outline: none; position: relative; z-index: 1000; } 

 <input class="option-input" id="feature-checkbox1" type="checkbox" name="features[]" value="E-mail Login" /> <label class="feature-label" for="feature-checkbox1"> <div id="feature-card" class="card" data-option-id="101" data-name="E-mail Login" data-price-min="200" data-price-max="400"> <div class="card-content text-center"> <i id="feature-icon" class="fa fa-envelope"></i> <p>Login</p> </div> </div> </label> 

Answer 1

Add a .control-label class to label and wrap the elements(checkbox and label) in a div with a class .input-group .

Now adding .has-error on the input-group div turns it into red color.

use jquery or javascript to validate checkbox .

hope this helps..