如何在引导程序中验证样式为= display：none的复选框？

Question

我想选中一个复选框作为必填字段。 但是我使用display:none CSS隐藏了该复选框。 这样就不会显示引导表单验证错误消息。 如何显示错误消息？

 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

添加.control-label类以使用.input-group类在div中标记和包装元素（复选框和标签）。

现在在输入组div上添加.has-error会将其变为红色。

使用jquery或javascript验证复选框。

希望这可以帮助..